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

陌路散爱 提交于 2019-12-11 04:59:45

问题


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,


回答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>


来源:https://stackoverflow.com/questions/19716656/how-to-bind-a-textblock-in-a-template-defining-the-listboxitem-of-a-listbox-to

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!