C# .NET - Help in WPF Combo - Asked By Abhi Rana on 14-Dec-09 02:06 AM

Im using Combo box in WPF

Here Im facing problem regarding selection style of combox box

In this combox box foreground is Darkblue and background is whitesmoke, problem starts when I select

any item, as default foreground of selected item is also darkblue its hides the text.

Can any body suggest how to change foreground of selected item of combox box.

Check this code... - Michael Detras replied to Abhi Rana on 14-Dec-09 03:29 AM

Hi, I don't know if I understand your question correctly since I don't know how the text is hidden. By default, the foreground changes when you hover the mouse over an item. Anyway, you can set the ItemContainerStyle property of the ComboBox and change the TextElement.Foreground property when the ComboBoxItem is selected, which is shown below.

<ComboBox.ItemContainerStyle>

    <Style TargetType="ComboBoxItem">

        <Style.Triggers>

            <Trigger Property="IsSelected" Value="True" >

                 <Setter Property="TextElement.Foreground" Value="Red"/>

            </Trigger>

        </Style.Triggers>

    </Style>

</ComboBox.ItemContainerStyle>

Please see the screen shot - Abhi Rana replied to Michael Detras on 14-Dec-09 04:00 AM

As Im unable to paste the screen shot, I have upload a doc file for you.

I think you can solve this problem my seeing this screen shot

http://www.eggheadcafe.com/fileupload/-763138483_In above screen shot.zip


I just want to change the default focus color i.e. blue - Abhi Rana replied to Michael Detras on 14-Dec-09 04:08 AM

I just want to change the default focus color i.e. blue on combobox

By default the color of focus on any control is blue i want to change this for combo as its foreground color

is also blue.

The link is broken - Michael Detras replied to Abhi Rana on 14-Dec-09 04:11 AM
Hi, please upload your image again and replace space characters with underscores. Thanks.
I want to change the default focus color blue on my comboxbox - Abhi Rana replied to Michael Detras on 14-Dec-09 04:26 AM

 http://eggheadcafe.com/FileUpload/123960179_untitled.PNG 

Change the ComboBoxItem template - Michael Detras replied to Abhi Rana on 14-Dec-09 09:52 PM

One way to do this is change the template of the ComboBoxItem. Check the code below. Here, we have overridden the default style. We also added a border around the ContentPresenter. When the IsHighlighted property becomes true, the background of the border is changed to red in this example. Put this style in the resources section. This will be applied to all ComboBoxItem controls in scope. If you do not want this behavior, specify a different key for the style.

<Style x:Key="{x:Type ComboBoxItem}" TargetType="ComboBoxItem">

<Setter Property="SnapsToDevicePixels" Value="true"/>

<Setter Property="OverridesDefaultStyle" Value="true"/>

<Setter Property="Template">

<Setter.Value>

<ControlTemplate TargetType="ComboBoxItem">

<Border

Name="Border"

SnapsToDevicePixels="true">

<ContentPresenter />

</Border>

<ControlTemplate.Triggers>

<Trigger Property="IsHighlighted" Value="true">

<Setter TargetName="Border" Property="Background" Value="Red"/>

</Trigger>

</ControlTemplate.Triggers>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

Focus color combo is dark blue - Abhi Rana replied to Michael Detras on 15-Dec-09 12:30 AM

Thanks alot for understanding my requirements and forwarding  code snippet that clarifies lot of things at my end, but im still struggling to get solution to avoid dark blue color of focus combo

please see the screen shot

http://www.eggheadcafe.com/fileupload/-763138483_screenshot.zip

Could you post some code... - Michael Detras replied to Abhi Rana on 15-Dec-09 01:47 AM

I would like to see your code on how you made the ComboBox look that way. I only need the style or template, not your entire code. Thanks!

Code - Abhi Rana replied to Michael Detras on 15-Dec-09 04:02 AM

Style in App.xamal:

<Style TargetType="ComboBox">

<Setter Property="Foreground" Value="Darkblue"/>

<Setter Property="Background" Value="Transparent"/>

<Setter Property="FontSize" Value="12"/>

<Setter Property="FontWeight" Value="Bold"/>

<Setter Property="HorizontalAlignment" Value="Center"/>

<Setter Property="VerticalAlignment" Value="Center"/>

<Setter Property="Width" Value="75"/>

<Setter Property="Height" Value="24"/>

</Style>

Page Code:

<ComboBox Name="cboClientName" Grid.Row="1" Grid.Column="1" Width="225" ItemsSource="{Binding}" SelectionChanged="cboClientName_TextChanged" Grid.ColumnSpan="2" Height="24" Margin="54,0" VerticalAlignment="Center">


.CS Code

private void LoadClients()

{

System.Data.DataTable dt = new System.Data.DataTable();

BussinessLayer BLayer = new BussinessLayer();

dt = BLayer.GetClients();

if(dt.Rows.Count > 0)

{

cboClientName.DataContext = dt;

cboClientName.DisplayMemberPath = dt.Columns[0].ToString();

}

txtClientName.Visibility = Visibility.Hidden;

}

I guess you need to change the ControlTemplate of the ComboBox. - Michael Detras replied to Abhi Rana on 16-Dec-09 02:50 AM

Hi, what you can do is change the ControlTemplate of the ComboBox. Do you have Expression Blend with you? That's an easy way to get the default style of the ComboBox. There, you can see the ControlTemplate. You probably need to change the following code:

<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsHitTestVisible="false" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" Content="{TemplateBinding SelectionBoxItem}" ContentStringFormat="{TemplateBinding SelectionBoxItemStringFormat}" ContentTemplate="{TemplateBinding SelectionBoxItemTemplate}" ContentTemplateSelector="{TemplateBinding ItemTemplateSelector}"/>

Perhaps you can replace it with a TextBlock (assuming the content is text only) and set the binding. Try to search the Internet on how to style a ComboBox. That will surely help.