ListBox Background Color (XAML/WinRT/Metro)

Question

I'm trying to change the background color on a "ListBox" on a WinRT page (XAML). When I use the "Background" property, it changes the background how I want it when the control doesn't have the focus. When it gets the focus, it changes to White and I can't figure out how to override it.

My question, how to I force the background of the ListBox to always be Gray whether it's selected/has focus or not?

XAML #1:

    <ListBox x:Name="ListBoxMenu" Background="LightGray" Grid.Row="0" Grid.Column="0" Margin="0,0,0,0">
        <ListBoxItem>Menu Item 1</ListBoxItem>
        <ListBoxItem>Menu Item 2</ListBoxItem>
        <ListBoxItem>Menu Item 3</ListBoxItem>
    </ListBox>

XAML #2 (with each item also set):

    <ListBox x:Name="ListBoxMenu" Background="LightGray" Grid.Row="0" Grid.Column="0" Height="124" VerticalAlignment="Top">
        <ListBoxItem Background="LightGray">Menu Item 1</ListBoxItem>
        <ListBoxItem Background="LightGray">Menu Item 2</ListBoxItem>
        <ListBoxItem Background="LightGray">Menu Item 3</ListBoxItem>
    </ListBox>

As temporary solution, I set the ListBox to only be a hard coded height, then used a border on that column to fill in the rest of the space with LightGray. I really would like to just always set the Background color on the ListBox though, is this possible?

Answer 1

Use Visual Studio Blend 2012 and edit the ListBox ItemTemplate or it's template, which will create a hard copy in the XAML, where you can edit it's properties.

Answer 2

You can just put some colour brush overrides in your XAML resource file to override the default ListBox control template colours.

<SolidColorBrush x:Key="ListBoxBackgroundThemeBrush" Color="Transparent" />
<SolidColorBrush x:Key="ListBoxFocusBackgroundThemeBrush" Color="Transparent" />

Answer 3

I ran into the same issue and I used the help of Visual studio Blend. Hope this helps.

Add a style to the ListBoxMenu as follows:

<ListBox x:Name="ListBoxMenu" Style="{StaticResource ListBoxStyle1} Background="LightGray" Grid.Row="0" Grid.Column="0" Height="124" VerticalAlignment="Top"> <ListBoxItem Background="LightGray">Menu Item 1</ListBoxItem> <ListBoxItem Background="LightGray">Menu Item 2</ListBoxItem> <ListBoxItem Background="LightGray">Menu Item 3</ListBoxItem> </ListBox>

Then specify the styling as follows:

<Style x:Key="ListBoxStyle1" TargetType="ListBox">
        <Setter Property="Foreground" Value="{StaticResource ListBoxForegroundThemeBrush}"/>
        <Setter Property="Background" Value="{StaticResource ListBoxBackgroundThemeBrush}"/>
        <Setter Property="BorderBrush" Value="{StaticResource ListBoxBorderThemeBrush}"/>
        <Setter Property="BorderThickness" Value="{StaticResource ListBoxBorderThemeThickness}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled"/>
        <Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="True"/>
        <Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled"/>
        <Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True"/>
        <Setter Property="ScrollViewer.ZoomMode" Value="Disabled"/>
        <Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False"/>
        <Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="TabNavigation" Value="Once"/>
        <Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
        <Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ListBox">
                    <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{StaticResource AppBarBackgroundThemeBrush}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="LayoutRoot">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxDisabledForegroundThemeBrush}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ScrollViewer">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Black"/>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                                <VisualState x:Name="Unfocused"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ScrollViewer x:Name="ScrollViewer">
                        <ItemsPresenter/>
                    </ScrollViewer>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

The above sample would replace the background of you List box container to Black when the focus is set to the ListBox.

Answer 4

If you need some more help on customizing the colors of Items in a ListBox, ListView or GridView, they all work on the same principle, just be sure to update the TargetType properties, I'd recommend having a look at Vito DeMercurio's blog post Styling a GridViewItem in WinRT