How to bind a TextBlock in a template, defining the ListBoxItem of a ListBox, to the IsSelected property of the parent ListBoxItem?

Question

I have a List box defined like this:

<ListBox x:Name="EmailList"
     ItemsSource="{Binding MailBoxManager.Inbox.EmailList}"
     SelectedItem="{Binding SelectedMessage, Mode=TwoWay}"
     Grid.Row="1">

    <ListBox.ItemTemplate>
        <DataTemplate>
            <usrctrls:MessageSummary />
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

The UserControl is defined like this:

<UserControl x:Class="UserControls.MessageSummary"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         mc:Ignorable="d"
         d:DesignHeight="300"
         d:DesignWidth="600">

<UserControl.Resources>
</UserControl.Resources>

<Grid
      HorizontalAlignment="Left">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="50" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <CheckBox Grid.Column="0"
              VerticalAlignment="Center" />

    <Grid Grid.Column="1" Margin="0,0,12,0">
        <Grid.RowDefinitions>
            <RowDefinition />
            <RowDefinition />
            <RowDefinition />
        </Grid.RowDefinitions>

        <Grid Grid.Row="0"
              Grid.Column="0"
              HorizontalAlignment="Stretch">

            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="30" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="80" />
                <ColumnDefinition Width="80" />
            </Grid.ColumnDefinitions>

            <Image x:Name="FlaggedImage"
                   Grid.Column="0"
                   Width="20"
                   Height="10"
                   Margin="0"
                   VerticalAlignment="Center"
                   HorizontalAlignment="Center"
                   Source="/Assets/ico_flagged_white.png" />

            <TextBlock x:Name="Sender"
                       Grid.Column="1"
                       Text="{Binding EmailProperties.DisplayFrom}"
                       Style="{StaticResource TextBlock_SenderRowTitle}"
                       HorizontalAlignment="Left" VerticalAlignment="Center" />

            <Grid x:Name="ImagesContainer"
                  Grid.Column="2" VerticalAlignment="Center">

                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>

                <Image x:Name="ImgImportant"
                       Grid.Column="0"
                       Width="20"
                       Height="20"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Source="ms-appx:///Assets/ico_important_red.png" />

                <Image x:Name="ImgFolders"
                       Grid.Column="1"
                       Width="20"
                       Height="20"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Source="ms-appx:///Assets/ico_ico_addtofolder.png" />

                <Image x:Name="ImgAttachment"
                       Grid.Column="2"
                       Width="20"
                       Height="20"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Source="ms-appx:///Assets/ico_attachment_lightgray.png" />

                <Image x:Name="ImgFlag"
                       Grid.Column="3"
                       Width="20"
                       Height="20"
                       VerticalAlignment="Center"
                       HorizontalAlignment="Center"
                       Source="ms-appx:///Assets/ico_flag.png" />
            </Grid>

            <TextBlock x:Name="Time"
                       Grid.Column="3"
                       Text="{Binding EmailProperties.DateReceived, Converter={StaticResource EmailHeaderTimeConverter}}"
                       TextAlignment="Center"
                       FontSize="16" VerticalAlignment="Center" Margin="0" />
        </Grid>

        <TextBlock Grid.Row="1"
                   Text="{Binding EmailProperties.Subject}"
                   TextTrimming="WordEllipsis"
                   Margin="0,10" />

        <TextBlock Grid.Row="2"
                   Text="{Binding EmailProperties.Preview}"
                   TextTrimming="WordEllipsis" />
    </Grid>

</Grid>

The MessageSummary is a UserControl. I would like to bind the foreground color of the ListBoxItems to whether the item is the one selected (IsSelectd property) in the ListBox, i.e. I would like the ListBoxItem's foreground color (the TextBlocks) to be Black if not selected and Blue if the ListBoxItem is selected.

How can it be done?

Thanks,

Answer 1

The code below demonstrates that. To pass the colour to your custom control you need to define ItemTemplate of the ListBox. Your control has to expose Foreground property which will be bound to TemplatedParent's Foreground. Inside your control you will have to bind a TextBox to the control's Foreground. This is the only way I see this can be done.

<Page
    x:Class="App1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="using:App1"
    mc:Ignorable="d">
    <Page.Resources>
        <!-- Default style for Windows.UI.Xaml.Controls.ListBoxItem -->
        <Style TargetType="ListBoxItem">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="TabNavigation" Value="Local" />
            <Setter Property="Padding" Value="8,10" />
            <Setter Property="HorizontalContentAlignment" Value="Left" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <Border x:Name="LayoutRoot"
                            Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal" />
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemPointerOverBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="LayoutRoot"
                                                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="PressedBackground"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0" />
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SelectionStates">
                                    <VisualState x:Name="Unselected" />
                                    <VisualState x:Name="Selected">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedUnfocused">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedDisabled">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedDisabledBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPointerOver">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedPointerOverBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SelectedPressed">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="InnerGrid"
                                                                       Storyboard.TargetProperty="Background">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource ListBoxItemSelectedBackgroundThemeBrush}" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                                                       Storyboard.TargetProperty="Foreground">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Storyboard.TargetName="FocusVisualWhite"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0" />
                                            <DoubleAnimation Storyboard.TargetName="FocusVisualBlack"
                                                         Storyboard.TargetProperty="Opacity"
                                                         To="1"
                                                         Duration="0" />
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Unfocused" />
                                    <VisualState x:Name="PointerFocused" />
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid x:Name="InnerGrid"
                              Background="Transparent">
                                <Rectangle x:Name="PressedBackground"
                                       Fill="{StaticResource ListBoxItemPressedBackgroundThemeBrush}"
                                       Opacity="0" />
                                <ContentPresenter x:Name="ContentPresenter"
                                              Content="{TemplateBinding Content}"
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                              Margin="{TemplateBinding Padding}" />

                                <Rectangle x:Name="FocusVisualWhite"
                                       Stroke="{StaticResource FocusVisualWhiteStrokeThemeBrush}"
                                       StrokeEndLineCap="Square"
                                       StrokeDashArray="1,1"
                                       Opacity="0"
                                       StrokeDashOffset=".5" />
                                <Rectangle x:Name="FocusVisualBlack"
                                       Stroke="{StaticResource FocusVisualBlackStrokeThemeBrush}"
                                       StrokeEndLineCap="Square"
                                       StrokeDashArray="1,1"
                                       Opacity="0"
                                       StrokeDashOffset="1.5" />
                            </Grid>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid>
        <ListBox>
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <usrctrls:MessageSummary Foreground = {Binding Foreground, RelativeSource={RelativeSource Mode=TemplatedParent}} />
                    </DataTemplate>
                </ListBox.ItemTemplate>
            <ListBoxItem >Item1</ListBoxItem>
            <ListBoxItem >Item2</ListBoxItem>
            <ListBoxItem >Item3</ListBoxItem>
        </ListBox>
    </Grid>
</Page>