UWP change style of selected ListViewItem

Question

I have a ListView. It is not dynamic, I am giving it's ListViewItem in the XAML like this. There are very few ListViewItems in the ListView. The XAML is like this:

<ListView Name="ABC">
    <ListViewItem>
        <StackPanel>
            <BitmapIcon/>
            <TextBlock/>
        </StackPanel>
    </ListViewItem>

     <ListViewItem>
        <StackPanel>
            <BitmapIcon/>
            <TextBlock/>
        </StackPanel>
    </ListViewItem>

     <ListViewItem>
        <StackPanel>
            <BitmapIcon/>
            <TextBlock/>
        </StackPanel>
    </ListViewItem>
</ListView>

When a ListViewItem gets selected, I want to change the Foreground property of the BitmapIcon inside the ListViewItem to some other value. How do I achieve this. I am open to changing the ListView to some lighter controls like ItemsControl as long as I am able to change the Foreground property of the BitmapIcon.

Answer 1

This should be done inside the Style of the ListViewItem. You just need to change the SelectedForeground to whatever color you like. For example -

<Style x:Key="ListViewItemStyle1" TargetType="ListViewItem">
    <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
    <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
    <Setter Property="Background" Value="{ThemeResource ListViewItemBackground}" />
    <Setter Property="Foreground" Value="{ThemeResource ListViewItemForeground}" />
    <Setter Property="TabNavigation" Value="Local" />
    <Setter Property="IsHoldingEnabled" Value="True" />
    <Setter Property="Padding" Value="12,0,12,0" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
    <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
    <Setter Property="AllowDrop" Value="False" />
    <Setter Property="UseSystemFocusVisuals" Value="True" />
    <Setter Property="FocusVisualMargin" Value="0" />
    <Setter Property="FocusVisualPrimaryBrush" Value="{ThemeResource ListViewItemFocusVisualPrimaryBrush}" />
    <Setter Property="FocusVisualPrimaryThickness" Value="2" />
    <Setter Property="FocusVisualSecondaryBrush" Value="{ThemeResource ListViewItemFocusVisualSecondaryBrush}" />
    <Setter Property="FocusVisualSecondaryThickness" Value="1" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListViewItem">
                <ListViewItemPresenter CheckBrush="{ThemeResource ListViewItemCheckBrush}"
                                       ContentMargin="{TemplateBinding Padding}"
                                       CheckMode="{ThemeResource ListViewItemCheckMode}"
                                       ContentTransitions="{TemplateBinding ContentTransitions}"
                                       CheckBoxBrush="{ThemeResource ListViewItemCheckBoxBrush}"
                                       DragForeground="{ThemeResource ListViewItemDragForeground}"
                                       DragOpacity="{ThemeResource ListViewItemDragThemeOpacity}"
                                       DragBackground="{ThemeResource ListViewItemDragBackground}"
                                       DisabledOpacity="{ThemeResource ListViewItemDisabledThemeOpacity}"
                                       FocusVisualPrimaryBrush="{TemplateBinding FocusVisualPrimaryBrush}"
                                       FocusVisualSecondaryThickness="{TemplateBinding FocusVisualSecondaryThickness}"
                                       FocusBorderBrush="{ThemeResource ListViewItemFocusBorderBrush}"
                                       FocusVisualMargin="{TemplateBinding FocusVisualMargin}"
                                       FocusVisualPrimaryThickness="{TemplateBinding FocusVisualPrimaryThickness}"
                                       FocusSecondaryBorderBrush="{ThemeResource ListViewItemFocusSecondaryBorderBrush}"
                                       FocusVisualSecondaryBrush="{TemplateBinding FocusVisualSecondaryBrush}"
                                       HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                       Control.IsTemplateFocusTarget="True"
                                       PointerOverForeground="{ThemeResource ListViewItemForegroundPointerOver}"
                                       PressedBackground="{ThemeResource ListViewItemBackgroundPressed}"
                                       PlaceholderBackground="{ThemeResource ListViewItemPlaceholderBackground}"
                                       PointerOverBackground="{ThemeResource ListViewItemBackgroundPointerOver}"
                                       ReorderHintOffset="{ThemeResource ListViewItemReorderHintThemeOffset}"
                                       SelectedPressedBackground="{ThemeResource ListViewItemBackgroundSelectedPressed}"
                                       SelectionCheckMarkVisualEnabled="{ThemeResource ListViewItemSelectionCheckMarkVisualEnabled}"
                                       SelectedForeground="LightBlue"
                                       SelectedPointerOverBackground="{ThemeResource ListViewItemBackgroundSelectedPointerOver}"
                                       SelectedBackground="{ThemeResource ListViewItemBackgroundSelected}"
                                       VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" />
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

As long as you don't specify the Foreground property on your BitmapIcon, it will automatically get the updated color (from SelectedForeground in the style above) when the ListViewItem gets selected.