Accent Colors for Styled TextBlocks in WP7 Selected ListBoxItems

The Problem
The Windows Phone tools in Visual Studio an Expression Blend let you create a 'Windows Phone Data Bound Application" (Template). This application uses SampleData and two List/Detail pages. The List (MainPage) contains a listbox which is templated. The ItemSource of this listbox is databound to the Items in the SampleData. When run the application and select an Item in the ListBox the DetailsPage is shown using navigation. This navigation is initiated from the SelectionChanged event of the listbox in the MainPage. When you remove this event from the XAML you would expect that the selected item in the listbox would be shown using the Accent color of your phone. But this doesn't happen. It took me a while to figure out the reason why, and how to solve it.

    <
    ListBox
    x:Name
    ="MainListBox"
    Margin
    ="0,0,-12,0"
    ItemsSource
    ="{Binding Items}">
    <
    ListBox.ItemTemplate
    >
    <
    DataTemplate
    >
    <
    StackPanel
    Margin
    ="0,0,0,17"
    Width
    ="432"
    >
    <
    TextBlock
    Text
    ="{Binding LineOne}"
    TextWrapping
    ="Wrap"
    Style
    ="{StaticResource PhoneTextExtraLargeStyle}"
    />
    <
    TextBlock
    Text
    ="{Binding LineTwo}"
    TextWrapping
    ="Wrap"
    Margin
    ="12,-6,12,0"
    Style
    ="{StaticResource PhoneTextSubtleStyle}"
    />
    </
    StackPanel
    >
    </
    DataTemplate
    >
    </
    ListBox.ItemTemplate
    >
    </
    ListBox
    >
  

The Reason
The Selected (Visual)State of a ListBoxItem sets the foreground of the ContainerControl to the PhoneAccentBrush resource. The Two TextBlockes in the ItemTemplete of my listbox have a Style Property. Both styles are base on the PhoneTextBlockBase which has a Foreground property set to the PhoneForegroundBrush resource. This conflicts with the foreground set in the VisualState and therefore the color never changes.

    <
    VisualStateGroup
    x:Name
    ="SelectionStates"
    >
    <
    VisualState
    x:Name
    ="Unselected"
    />
    <
    VisualState
    x:Name
    ="Selected"
    >
    <
    Storyboard
    >
    <
    ObjectAnimationUsingKeyFrames
    Storyboard.TargetProperty="Foreground"Storyboard.TargetName="ContentContainer"><DiscreteObjectKeyFrameKeyTime="0"Value="{StaticResource PhoneAccentBrush}"/></ObjectAnimationUsingKeyFrames></Storyboard></VisualState></VisualStateGroup>

The Solution
The solution is very easy: remove the Foreground from the Style of the Textblock. I did this using Blend. I opened the ItemTemplate of the ListBox. Selected the first TextBlocked and created a copy of the style (menu Object, Edit Style, Edit a Copy...), naming it 'PhoneTextExtraLargeStyleWithoutForeground'. This style is based on the 'PhoneTextBlockBaseWithoutForeground' style which holds the Foreground property. I used Blend to create a copy of this style (menu Object, Edit Additional Styles, Edit BasedOn, Edit a Copy...), naming it 'PhoneTextBlockBaseWithoudForeground'. Then I removed the Foreground property from this style.

I also created a copy from the PhoneTextSubtleStyle and named it PhoneTextSubtleStyleWithoutForeground. This style sets the Foreground property to PhoneSubtleBrush resource. I removed this property and added an Opacity property which I set to 0.8

    <
    Style
    x:Key
    ="PhoneTextBlockBaseWithoudForeground"
    TargetType
    ="TextBlock"
    >
    <
    Setter
    Property
    ="FontFamily"
    Value
    ="{StaticResource PhoneFontFamilyNormal}"
    />
    <
    Setter
    Property
    ="FontSize"
    Value
    ="{StaticResource PhoneFontSizeNormal}"
    />
    <!--<Setter Property="Foreground"
     Value="{StaticResource PhoneForegroundBrush}" />-->
    <
    Setter
    Property
    ="Margin"
    Value
    ="{StaticResource PhoneHorizontalMargin}"
    />
    </
    Style
    >
    <
    Style
    x:Key
    ="PhoneTextExtraLargeStyleWithoutForeground"
    BasedOn
    ="{StaticResource PhoneTextBlockBaseWithoudForeground}"
    TargetType
    ="TextBlock"
    >
    <
    Setter
    Property
    ="FontFamily"
    Value
    ="{StaticResource PhoneFontFamilySemiLight}"
    />
    <
    Setter
    Property
    ="FontSize"
    Value
    ="{StaticResource PhoneFontSizeExtraLarge}"
    />
    </
    Style
    >
    <
    Style
    x:Key
    ="PhoneTextSubtleStyleWithoutForeground"
    BasedOn
    ="{StaticResource PhoneTextBlockBaseWithoudForeground}"
    TargetType
    ="TextBlock"
    >
    <
    Setter
    Property
    ="Opacity"
    Value
    ="0.8"
    />
    <!--<Setter Property="Foreground" Value="{StaticResource PhoneSubtleBrush}"/>-->
    </
    Style
    >
  

The Styles of the two TextBlocks are now set to PhoneTextExtraLargeStyleWithoutForeground and PhoneTextSubtleStyleWithoutForeground.

    <
    ListBox
    x:Name
    ="MainListBox"
    Margin
    ="0,0,-12,0"
    ItemsSource
    ="{Binding Items}"
    >
    <
    ListBox.ItemTemplate
    >
    <
    DataTemplate
    >
    <
    StackPanel
    Margin
    ="0,0,0,17"
    Width
    ="432"
    >
    <
    TextBlock
    Text
    ="{Binding LineOne}"
    TextWrapping
    ="Wrap"
    Style
    ="{StaticResource PhoneTextExtraLargeStyleWithoutForeground}"
    />
    <
    TextBlock
    Text
    ="{Binding LineTwo}"
    TextWrapping
    ="Wrap"
    Margin
    ="12,-6,12,0"
    Style
    ="{StaticResource PhoneTextSubtleStyleWithoutForeground}"
    />
    </
    StackPanel
    >
    </
    DataTemplate
    >
    </
    ListBox.ItemTemplate
    >
    </
    ListBox
    >
  

If you run the application the selected item in the listbox is shown using the accent color. Problem fixed.

Cheers,

Fons

All postings/content on this blog are provided "AS IS" with no warranties, and confer no rights. All entries in this blog are my opinion and don't necessarily reflect the opinion of my employer or sponsors. The content on this site is licensed under a Creative Commons Attribution By license.