Setting the selected font colour to be different to unselected font colour in listbox control

Question

I've found that the font colour comes from the content (ie outside of the controltemplate) of a listbox or combobox. I'd like to have black text on white background when the items are unselected, and when selected would like black background with white text. unfortunately I've not been able to figure out how to change the text colour. I'm struggling to find colours that contrast well between the selected and unselected background colour.

checked in Silverlight 3 and you dont seem able to do it there either.

Answer 1

I managed to do a similar thing in Silverlight 4 for a ListBox popping under an AutoCompleteBox, but it was copious amounts of Binging and XAML rape.

Basically you have to create a ListBoxItem style and force some control template hackery under it. This then you can apply on your ListBox and it should work.

I just copied the relevant code from the project I'm working on so you'll have to tweak it a bit, but it does change both the font and the selection rectangle colour on mouse over, so should be a great start.

    <Style x:Key="MyListBoxItemStyle" TargetType="ListBoxItem">
        <Setter Property="Foreground" Value="#FF4C4C4C" />
        <Setter Property="FontStyle" Value="Normal" />
        <Setter Property="FontWeight" Value="Bold"/>
        <Setter Property="FontFamily" Value="Arial"/>
        <Setter Property="Template">
            <Setter.Value>
              <ControlTemplate TargetType="ListBoxItem">
                <Grid Background="{TemplateBinding Background}">
                  <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="0:0:0.2" To="MouseOver">
                                <VisualTransition.GeneratedEasingFunction>
                                    <CubicEase EasingMode="EaseOut"/>
                                </VisualTransition.GeneratedEasingFunction>
                            </VisualTransition>
                            <VisualTransition From="MouseOver" GeneratedDuration="0:0:0.1">
                                <VisualTransition.GeneratedEasingFunction>
                                    <CubicEase EasingMode="EaseOut"/>
                                </VisualTransition.GeneratedEasingFunction>
                            </VisualTransition>
                        </VisualStateGroup.Transitions>
                      <VisualState x:Name="Normal"/>
                      <VisualState x:Name="MouseOver">
                        <Storyboard>
                          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor" Storyboard.TargetProperty="Opacity">
                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                          </DoubleAnimationUsingKeyFrames>
                          <ColorAnimation Duration="0" To="#FFFFFFFF" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" d:IsOptimized="True"/>
                        </Storyboard>
                      </VisualState>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="SelectionStates">
                      <VisualState x:Name="Unselected"/>
                      <VisualState x:Name="Selected">
                        <Storyboard>
                          <DoubleAnimationUsingKeyFrames Storyboard.TargetName="fillColor2" Storyboard.TargetProperty="Opacity">
                            <SplineDoubleKeyFrame KeyTime="0" Value="1"/>
                          </DoubleAnimationUsingKeyFrames>
                        </Storyboard>
                      </VisualState>
                    </VisualStateGroup>
                  </VisualStateManager.VisualStateGroups>
                  <Rectangle x:Name="fillColor" IsHitTestVisible="False" Opacity="0" RadiusX="1" RadiusY="1" Fill="#FF1f6cae"/>
                  <Rectangle x:Name="fillColor2" IsHitTestVisible="False" Opacity="0" Fill="#FF000000" RadiusX="1" RadiusY="1"/>
                  <ContentControl HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" x:Name="contentPresenter" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" Foreground="#FF4c4c4c"/>
                </Grid>
              </ControlTemplate>
            </Setter.Value>
          </Setter>
        <Setter Property="FontSize" Value="14"/>
    </Style>

It should go straight under UserControl.Resources and you'll be ready to bind it.

Let me know if you managed or need more explanation!