WPF Changing ListboxItem background Color when Selected

Question

I have a surfacelistbox as follows

<s:SurfaceListBox x:Name="viewList" Height="200" Width="Auto" SelectedIndex="0"
                ItemsSource="{Binding Source={StaticResource views}, XPath=Views/View}"
                DisplayMemberPath="@Title"                    
                SelectionChanged="viewList_SelectionChanged" Grid.Row="2" VerticalAlignment="Bottom" HorizontalContentAlignment="Stretch" ScrollViewer.VerticalScrollBarVisibility="Disabled">
        <s:SurfaceListBox.ItemsPanel>
            <ItemsPanelTemplate>
                <StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch"/>
            </ItemsPanelTemplate>
        </s:SurfaceListBox.ItemsPanel>
    </s:SurfaceListBox>

I've styled the items from the App.xaml file as follows

<Style TargetType="{x:Type s:SurfaceListBoxItem}">

        <Style.Resources>
            <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
                     Color="#0071bc"/>
        </Style.Resources>
        <Setter Property="Height" Value="200"></Setter>
        <Setter Property="Width" Value="480"></Setter>
        <Setter Property="BorderThickness" Value="0,0,0,0"></Setter>
        <Setter Property="Padding" Value="20,20,0,20"></Setter>
        <Setter Property="Margin" Value="0"></Setter>
        <Setter Property="Foreground" Value="White"></Setter>
        <Setter Property="BorderBrush" Value="White"></Setter>
        <Setter Property="FontSize" Value="57"></Setter>
        <Setter Property="FontFamily" Value="TitilliumText22L"></Setter>
        <Setter Property="FontWeight" Value="Bold"></Setter>
        <Setter Property="TextBlock.TextAlignment" Value="Left"></Setter>
        <Setter Property="TextBlock.HorizontalAlignment" Value="Stretch"></Setter>
        <Setter Property="Background">
            <Setter.Value>
                <LinearGradientBrush>
                    <GradientStop Color="#3c3c3c" Offset="0"></GradientStop>
                    <GradientStop Color="#383838" Offset="0.6"></GradientStop>
                    <GradientStop Color="#6d6e6e" Offset="1"></GradientStop>
                </LinearGradientBrush>
            </Setter.Value>
        </Setter>
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Foreground" Value="White"></Setter>
                <Setter Property="BorderBrush" Value="#0071bc"></Setter>
                <Setter Property="Background" Value="#0071bc"></Setter>
            </Trigger>
        </Style.Triggers>
    </Style>

My Problem is, the backgroundcolor of the selected item remains white as opposed to the colors described in the styling. Any pointers would be appreciated

Come on just search SO listbox background http://stackoverflow.com/questions/7298282/listbox-selected-item-background — paparazzo, Jun 16 '12 at 23:06
Try the answer to this question: [WPF: Change background color for selected ListBox item](http://stackoverflow.com/questions/2138200/wpf-change-background-color-for-selected-listbox-item). — Y.Yanavichus, Jun 17 '12 at 03:00
Blam, I already searched and none of the solutions worked for me unfortunately — Masinde Muliro, Jun 17 '12 at 06:38

score 2 · Answer 1 · answered Jun 27 '12 at 15:11

Not sure if you found your answer yet, but I just ran into the same problem. Try setting the surface color resource in your style. You can find the list of surface colors here: http://msdn.microsoft.com/en-us/library/microsoft.surface.presentation.surfacecolors_properties.aspx

Make sure you import the namespace for SurfaceColors

xmlns:sc="clr-namespace:Microsoft.Surface.Presentation;assembly=Microsoft.Surface.Presentation"

Then update the surface color in your SurfaceListBox style:

<s:SurfaceListBox>
     <s:SurfaceListBox.ItemContainerStyle>
         <Style TargetType="s:SurfaceListBoxItem">
              <Style.Resources>
                 <SolidColorBrush x:Key="{x:Static sc:SurfaceColors.ListBoxItemSelectionBackgroundBrushKey }" Color="#FFA2CD65"/>
              </Style.Resources>
          </Style>
     </s:SurfaceListBox.ItemContainerStyle>
</s:SurfaceListBox>

score 0 · Answer 2 · answered Jun 17 '12 at 05:26

0

It looks like you are trying to create your own ListBox. USUALLY there is not a need to do this, but if you feel you must, make sure that you override the GetContainerForItemOverride method

    protected override DependencyObject GetContainerForItemOverride()
    {
        return new SurfaceListBoxItem();
    }

answered Jun 17 '12 at 05:26

Shawn Kendrot

12,425
1
25
41

No, he's using SurfaceListBox from the Microsoft Surface SDK – Robert Levy Jun 17 '12 at 12:46

WPF Changing ListboxItem background Color when Selected

2 Answers2