ListBox Background Color (XAML/WinRT/Metro)

microsoft-metrowindows 8windows-runtimexaml

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>

ListBox with Gray background when it doesn't have the focus

ListBox, resetting the background to white when it gets focus

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?

Best Answer

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" />

Related Solutions

C# – Listbox WPF item background color

if you mean just when its selected but inactive try InactiveSelectionHighlightBrushKey

    <ListBox.Resources>
        <!-- Background of selected item when focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}"
                         Color="Blue" />
        <!-- Background of selected item when not focussed -->
        <SolidColorBrush x:Key="{x:Static SystemColors.InactiveSelectionHighlightBrushKey}"
                         Color="Blue" />

    </ListBox.Resources>

C# – Setting Background Color or WPF (4.0) ListBox – Windows 8

Those posts are getting outdated for Windows-8.

In Windows-8 for some reason Microsoft don't want people editing their Default Style's so easily or something with a Brush over-ride.

ListBoxItem default Style from VS has this for selection triggers:

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="False" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="#3DDADADA" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="#FFDADADA" />
</MultiTrigger>
<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="True" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="#3D26A0DA" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="#FF26A0DA" />
</MultiTrigger>

Triggers for Selection state no longer are applying brushes we can over-ride easily but are static colors. Hence to modify it you are going to need to derive the template and modify the trigger there. to White

This is the full Style given by VS2012 Windows-8 for ListBoxItem

<Style x:Key="ListBoxItemStyle1"
       TargetType="{x:Type ListBoxItem}">
  <Setter Property="SnapsToDevicePixels"
          Value="True" />
  <Setter Property="Padding"
          Value="4,1" />
  <Setter Property="HorizontalContentAlignment"
          Value="{Binding HorizontalContentAlignment,
                          RelativeSource={RelativeSource FindAncestor,
                                                         AncestorLevel=1,
                                                         AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="VerticalContentAlignment"
          Value="{Binding VerticalContentAlignment,
                          RelativeSource={RelativeSource FindAncestor,
                                                         AncestorLevel=1,
                                                         AncestorType={x:Type ItemsControl}}}" />
  <Setter Property="Background"
          Value="Transparent" />
  <Setter Property="BorderBrush"
          Value="Transparent" />
  <Setter Property="BorderThickness"
          Value="1" />
  <Setter Property="FocusVisualStyle">
    <Setter.Value>
      <Style>
        <Setter Property="Control.Template">
          <Setter.Value>
            <ControlTemplate>
              <Rectangle Margin="2"
                         SnapsToDevicePixels="True"
                         Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"
                         StrokeDashArray="1 2"
                         StrokeThickness="1" />
            </ControlTemplate>
          </Setter.Value>
        </Setter>
      </Style>
    </Setter.Value>
  </Setter>
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ListBoxItem}">
        <Border x:Name="Bd"
                Background="{TemplateBinding Background}"
                BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Padding="{TemplateBinding Padding}"
                SnapsToDevicePixels="True">
          <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Content="{TemplateBinding Content}"
                            ContentStringFormat="{TemplateBinding ContentStringFormat}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
        </Border>
        <ControlTemplate.Triggers>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="IsMouseOver"
                         Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                    Property="Background"
                    Value="#1F26A0DA" />
            <Setter TargetName="Bd"
                    Property="BorderBrush"
                    Value="#A826A0DA" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="Selector.IsSelectionActive"
                         Value="False" />
              <Condition Property="IsSelected"
                         Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                    Property="Background"
                    Value="#3DDADADA" />
            <Setter TargetName="Bd"
                    Property="BorderBrush"
                    Value="#FFDADADA" />
          </MultiTrigger>
          <MultiTrigger>
            <MultiTrigger.Conditions>
              <Condition Property="Selector.IsSelectionActive"
                         Value="True" />
              <Condition Property="IsSelected"
                         Value="True" />
            </MultiTrigger.Conditions>
            <Setter TargetName="Bd"
                    Property="Background"
                    Value="#3D26A0DA" />
            <Setter TargetName="Bd"
                    Property="BorderBrush"
                    Value="#FF26A0DA" />
          </MultiTrigger>
          <Trigger Property="IsEnabled"
                   Value="False">
            <Setter TargetName="Bd"
                    Property="TextElement.Foreground"
                    Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}" />
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

if you modify those triggers to:

<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="False" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="White" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="White" />
</MultiTrigger>
<MultiTrigger>
  <MultiTrigger.Conditions>
    <Condition Property="Selector.IsSelectionActive"
                Value="True" />
    <Condition Property="IsSelected"
                Value="True" />
  </MultiTrigger.Conditions>
  <Setter TargetName="Bd"
          Property="Background"
          Value="White" />
  <Setter TargetName="Bd"
          Property="BorderBrush"
          Value="White" />
</MultiTrigger>

you should have your issue sorted.

Best Answer

Related Solutions

C# – Listbox WPF item background color

C# – Setting Background Color or WPF (4.0) ListBox – Windows 8

Related Topic