Jon Bailey
Jon Bailey

Reputation: 103

Change style of default text of Combo Box in XAML

I'm trying to use XAML to make a combo box that is a drop-down list, that has default text already in the box in Italics, and when you click on the drop down to expand the list of options, all of the options will be listed in normal text rather than Italics. When a selection is made, I want the selected option to still be normal rather than Italic, even when it is in the same place as the default text. I'm new to XAML, and I am not sure how to do this, or if it is even possible?

My combo box is for now, as follows, where the default text to be shown is in the property 'Text'. Basically, I want 'Default Text' to be italic, but nothing else.

<ComboBox x:Name="ColumnComboBox" Grid.Column="1" Width="200" Margin="0,2"  IsEditable="True" Text="Default Text" FontWeight="Normal"  />

Any help is much appreciated.

Upvotes: 1

Views: 3880

Answers (2)

har07
har07

Reputation: 89285

It is possible, but as you already noticed, default Text and the text shown when an item selected is the same text. That's why it will be tricky to set default text's style different from selected item's text style. The simplest implementation is to listen to ComboBox's selection changed event. When an item selected, change ComboBox's FontStyle to Normal, and when no item selected change it to Italic.

<ComboBox x:Name="ColumnComboBox" SelectionChanged="ColumnComboBox_SelectionChanged" IsEditable="True" Text="Default Text" FontWeight="Italic">
    <ComboBoxItem Content="Item 1" FontStyle="Normal"/>
</ComboBox>

private void ColumnComboBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    ColumnComboBox.FontStyle = ColumnComboBox.SelectedItem != null ? FontStyles.Normal : FontStyles.Italic;
}

Or maybe you actually want a watermark behavior for ComboBox. Check this blog post on decent implementation of watermarked ComboBox, downloadable source code available here.

Upvotes: 0

BRAHIM Kamel
BRAHIM Kamel

Reputation: 13765

You need to do a bit more of work to achieve this.
try this

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded">        
    <Grid>
        <ComboBox Name="comboBox1" Margin="40,55,192,225" FontStyle="Italic">
            <ComboBox.ItemTemplate>
                <DataTemplate>
                    <Label Content="{Binding}" ></Label>
                </DataTemplate>
            </ComboBox.ItemTemplate>
            <ComboBox.ItemContainerStyle>
                <Style TargetType="{x:Type ComboBoxItem}">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="{x:Type ComboBoxItem}">
                                <Label   Name="lbl" Content="{Binding}" ></Label>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsHighlighted" Value="True">
                                        <Setter TargetName="lbl" Property="FontStyle" Value="Normal"> </Setter>
                                        <Setter TargetName="lbl" Property="Background" Value="AliceBlue"></Setter>
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="True">
                                        <Setter TargetName="lbl" Property="FontStyle" Value="Italic"></Setter>
                                    </Trigger>
                                    <Trigger Property="IsSelected" Value="False">
                                        <Setter TargetName="lbl" Property="FontStyle" Value="Normal"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>

                        </Setter.Value>
                    </Setter>
                </Style>
            </ComboBox.ItemContainerStyle>

        </ComboBox>




    </Grid>
</Window>

and here for testing the style from code behind

using System.Collections.ObjectModel;
using System.Windows;

namespace WpfApplication1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window

    {
        public  ObservableCollection<string>  observableCollection  =  new ObservableCollection<string>();
        public MainWindow()
        {
            for (int i = 0; i < 10; i++)
            {
                observableCollection.Add( "item:"+ i.ToString());
            }
            InitializeComponent();
            comboBox1.ItemsSource = observableCollection;  
        }

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {

        }
    }
}

Upvotes: 1

Related Questions