CODEWITHSUNDEEP
wpfxamlbinding
djangojazz
djangojazz

Reputation: 13232

Override Selected Item in Combobox's style to show comboxbox's background not gray background

I am having an issue with getting a custom property set with a combobox. I am using .Net 4.0, WPF with xaml resources for types set in a dictionary and some brushes set in the app.xaml. I can get the nice rounded corner just find and a gradient and layout to my combobox using the surrounding 'border' trick. However I can't seem to get the 'Selected Item' in the combobox to have a background other than dull gray. I would prefer to change it to transparent and inherit the gradient of the parent border. However I am missing the property or relationship to do this.

Does anyone know how to do this in the xaml?

Image:

Combobox Current showings of Selections and selected

code:

Dictionary item:

  <Style TargetType="{x:Type Border}">
        <Setter Property="Background" Value="{StaticResource MoneyBrush}" />
        <Setter Property="BorderBrush" Value="#071C07" />
    <Setter Property="BorderThickness" Value="3" />
    <Setter Property="CornerRadius" Value="20" />
    <Setter Property="SnapsToDevicePixels" Value="True" />
  </Style>

Brush in main App.xaml:

<LinearGradientBrush x:Key="MoneyBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#3A883A" Offset="1" />
            <GradientStop Color="#FFFFFF" Offset="0" />
            <GradientStop Color="#FF53AA75" Offset="0.50" />
            <GradientStop Color="#073307" Offset="0.95" />
        </LinearGradientBrush>
<LinearGradientBrush x:Key="FontBrush" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="Black" Offset="0" />
            <GradientStop Color="#107810" Offset="0.50" />
            <GradientStop Color="Black" Offset="0.65" />
        </LinearGradientBrush>

Actual item in mainwindow:

<Border Margin="5" >
                    <ComboBox Height="30" Width="170" Margin="10" x:Name="combopersons" 
                    FontSize="20"
                    ItemsSource="{Binding Path=People}"
                    DisplayMemberPath="FirstName"
                    SelectedValuePath="PersonId"
                    SelectedValue="{Binding Path=CurrentUser}"
                    Foreground="{StaticResource FontBrush}">
                    </ComboBox>
                </Border>

EDIT >>>

I like the solution proposed by @iltzortz, but I wanted a gradient so in this case this would work better:

<ComboBox.Resources>
    <LinearGradientBrush x:Key="{x:Static SystemColors.WindowBrushKey}" >
        <GradientStop Color="#3A883A" Offset="1" />
        <GradientStop Color="#FFFFFF" Offset="0" />
        <GradientStop Color="#FF53AA75" Offset="0.50" />
        <GradientStop Color="#073307" Offset="0.95" />
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" >
        <GradientStop Color="#000000" Offset="1" />
        <GradientStop Color="#FFFFFF" Offset="0" />
    </LinearGradientBrush>
</ComboBox.Resources>

EDIT 2 >>>

For some reason this will only work on applications I have built using .NET 4.0 or higher on Visual Studio 2012 with Windows 7. When I try to run the code at home for some reason it won't render I believe this is due to either Windows 8 or Visual Studio 2010 interpreting different colors for different system values. Be aware of this if you have Windows 8 or Visual Studio 2010 as it will work for me for one environment but not the other... curious.

Upvotes: 1

Views: 2340

Answers (1)

iltzortz
iltzortz

Reputation: 2412

The following code seems to do the job

<Grid Background="Pink">

    <ComboBox Margin="10,0" Width="100" Height="40">
        <ComboBoxItem>1</ComboBoxItem>
        <ComboBoxItem>2</ComboBoxItem>            
        <ComboBoxItem>3</ComboBoxItem>
        <ComboBox.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.WindowBrushKey}" Color="Green" />
            <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Green" />
        </ComboBox.Resources>            
    </ComboBox>

    <TextBox VerticalAlignment="Top" Margin="10"/>
</Grid>

Upvotes: 1

Related Questions