列表框项目中选定项目和普通项目的不同项目模板

Question

我想显示一个列表框，其项目在被选择时将显示一个按钮，该按钮对所选数据项目执行特定操作。为此，我使用两个 DataTemplates，一个是 NormalTemplate（没有按钮），另一个是 SelectedTemplate（有一个按钮，其 Tag 属性绑定到数据，即在按钮单击事件处理程序中使用）。当选择列表框中的项目时，我想分配 SelectedTemplate。

为此，我使用了自定义 ControlTemplate，它具有 VisualStateManager，它根据 VisualState 选择适当的模板（即，选定和未选定）。此解决方案的问题是，每次需要使用不同的 DataTemplate 时，我都必须创建新的 ControlTemplate。我正在尝试找到一个解决方案，您可以在其中指定正常和特定的模板。选择项目并使用通用代码根据视觉状态更改数据模板。

下面是我的未选择和未选择的数据模板选定的项目：

<DataTemplate x:Key="NormalItemTemplate">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="1" Margin="8,0,0,3" VerticalAlignment="Center">
                <TextBlock Text="{Binding Name}" FontWeight="Bold" FontFamily="Arial" FontSize="14"/>
                <TextBlock Text="{Binding Description}" />
            </StackPanel>
        </Grid>
    </Border>
</DataTemplate>

<DataTemplate x:Key="SelectedItemTemplate">
    <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"    />
                <ColumnDefinition Width="65"/>
            </Grid.ColumnDefinitions>

            <StackPanel Grid.Column="1" Margin="8,0,0,3">
                <TextBlock Text="{Binding Name}" FontWeight="Bold" FontFamily="Arial" FontSize="14"/>
                <TextBlock Text="{Binding Description}" />
            </StackPanel>

            <Border Grid.Column="2" Grid.RowSpan="2" VerticalAlignment="Stretch">
                <Button Content="Process" Tag={Binding} OnClick="Process_Clicked" HorizontalAlignment="Center" VerticalAlignment="Center"/>
            </Border>
        </Grid>
    </Border>
</DataTemplate>

下面是定义自定义 ControlTemplate 的样式，它使用 VisualStateManager 显示或隐藏相应的 ContentPresenter，其 ContentTemplate 分配给 NormalItemTemplate & SelectedItemTemplate

<Style TargetType="ListBoxItem" x:Key="ActiveGamesItemContainerStyle">
    <Setter Property="HorizontalContentAlignment" Value="Stretch" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ListBoxItem">
                <Grid Background="{TemplateBinding Background}">
                    <VisualStateManager.VisualStateGroups>
                        <VisualStateGroup x:Name="CommonStates">
                            <VisualState x:Name="Normal" />
                        </VisualStateGroup>

                        <VisualStateGroup x:Name="SelectionStates">
                            <VisualState x:Name="Unselected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedContentPresenter" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnSelectedContentPresenter" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>

                            <VisualState x:Name="Selected">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="SelectedContentPresenter" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Visible</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="UnSelectedContentPresenter" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <Visibility>Collapsed</Visibility>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>

                    <ContentPresenter
                                x:Name="SelectedContentPresenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{StaticResource NormalItemTemplate}"
                                HorizontalAlignment="Stretch"
                                Margin="{TemplateBinding Padding}"
                                Visibility="Collapsed"/>

                    <ContentPresenter
                                x:Name="UnSelectedContentPresenter"
                                Content="{TemplateBinding Content}"
                                ContentTemplate="{StaticResource SelectedItemTemplate}"
                                HorizontalAlignment="Stretch"
                                Margin="{TemplateBinding Padding}"
                                Visibility="Visible"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

此解决方案的问题是：

1. 对于每个需要使用不同 DataTemplate 的新 ListBoxItem，我需要使用 ControlTemplate 创建一个样式，该样式与上面相同，但只需要更改 ContentPresenter 的 ContentTemplate。因此，有很多重复的代码/XAML。

2. 由于我使用的是 SelectedItemTemplate 中的按钮，因此我需要在定义 Click 事件处理程序的同一 UserControl 类中定义样式。如果 UserControl 使用多个 ListBox，则将为每个 ListBox 声明一个巨大的样式定义。

我尝试使用附加属性来解决这个问题，但它不起作用。因为，我无法获取 Selected ListBoxItem （而是获取绑定数据）。这个想法是获取 ListBoxItem 的 ContentPresenter 并将其 ContentTemplate 设置为 SelectedItemTemplate。

有没有更好的方法来做到这一点？

谢谢&问候， 苏尼尔

Answer 1

无需两个单独的模板，只需使用一个模板并使用 DataTrigger 切换可见性即可。

1. 为您的项目创建一个具有 IsSelected 属性的视图模型。添加 NotifyPropertyChanged 事件。

2. 设置 ItemContainerStyle 以将 ListBoxItem.IsSelected 属性绑定到视图模型上的 IsSelected 属性。

3. 然后在您的DataTemplate中有一个DataTrigger，当IsSelected为时，它会更改按钮的Visibility >正确。

有关如何执行上述操作的示例，请查看答案这个 StackOverflow 问题。