Question

I’m having a ListBox with some TextBlocks in its ItemTemplate.
This TextBlocks are defined as this one

<TextBlock Grid.Column="1" Grid.Row="0" Text="{BindingGasStationName}" 
    FontSize="20" FontFamily="Segoe WP SemiLight" Margin="0,0,0,0" Padding="0"
    MinHeight="27" TextTrimming="WordEllipsis"/>

The ellipsis is working as expected.
The problem is, when the user selects an item, the color of the text (and also the “…”) changes to the current system highlight color. This is what I want to have.
But when the user changes the selection, the “…” stay the highlight color during the texts are turning back into white again.

Is this a known bug or have I done something wrong?

Update
When the user selects the item with the invalid colored ellipsis again, it is getting white for a moment before the highlight color is set again…

Answer 1

I just reproduced the error on my end, definitely looks like a WP bug to me.

The workaround is to manually do the ListBoxItem styling with VisualStates. I’ve included an example here of how you can style the ListBoxItem to highlight fully (including ellipsis) with the correct accent color. You set the ControlTemplate of the ListBoxItem and specify the foreground color for Unselected vs Selected states. Hope this helps!

<ListBox Name="TheListBox">
        <ListBox.ItemContainerStyle>
            <Style TargetType="ListBoxItem">
                <Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Border x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal"/>
                                        <VisualState x:Name="MouseOver"/>

                                    </VisualStateGroup>
                                    <VisualStateGroup x:Name="SelectionStates">
                                        <VisualState x:Name="Unselected">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="{StaticResource PhoneForegroundColor}" Storyboard.TargetProperty="(Control.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
                                                <ColorAnimation Duration="0" To="{StaticResource PhoneForegroundColor}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="{TemplateBinding Foreground}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <Storyboard>
                                                <ColorAnimation Duration="0" To="{TemplateBinding Foreground}" Storyboard.TargetProperty="(Control.Foreground).(SolidColorBrush.Color)" Storyboard.TargetName="ContentContainer" d:IsOptimized="True"/>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="#FF1BA1E2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Background="Black" BorderBrush="Black"/>
                            </Border>
                        </ControlTemplate>

                    </Setter.Value>
                </Setter>
            </Style>
        </ListBox.ItemContainerStyle>
        <ListBox.ItemTemplate>
            <DataTemplate>
                <TextBlock Grid.Column="1" Grid.Row="0" Text="{Binding}" 
FontSize="20" FontFamily="Segoe WP SemiLight" Margin="0,0,0,0" Padding="0"
MinHeight="27" TextTrimming="WordEllipsis"/>

            </DataTemplate>
        </ListBox.ItemTemplate>
    </ListBox>