ItemsControl 与两个 DataTemplates 使用 AlternationIndex 触发器，XAML答案

【问题标题】：ItemsControl with two DataTemplates using AlternationIndex trigger, XAMLItemsControl 与两个 DataTemplates 使用 AlternationIndex 触发器，XAML
【发布时间】：2015-02-10 03:16:51
【问题描述】：

我有一个带有项目控件的用户控件，我希望它有 2 种完全不同的项目模板样式，具体取决于交替索引。我看过很多关于如何根据索引更改背景颜色但不更改每个索引样式的教程。这是我目前所拥有的。

定义的模板：

<UserControl.Resources>
    <DataTemplate x:Key="ItemLeft" >
        <Border Background="Blue" Height="10">
            <!-- Define Left Style -->

        </Border>
    </DataTemplate>
    <DataTemplate x:Key="ItemRight">
        <Border Background="Red" Height="10">
            <!-- Define Right Style -->

        </Border>
    </DataTemplate>
</UserControl.Resources>

我删除了数据模板代码以使其更易于阅读。它不仅仅是边框颜色。

项目控制：

        <ItemsControl Name="ItemControl" AlternationCount="2">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Style>
                <Style>
                    <Style.Triggers>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="0">
                            <Setter Property="ItemsControl.ItemTemplate" Value="{StaticResource ItemRight}"/>
                        </Trigger>
                        <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                            <Setter Property="ItemsControl.ItemTemplate" Value="{StaticResource ItemLeft}"/>
                        </Trigger>
                    </Style.Triggers>
                </Style>
            </ItemsControl.Style>
        </ItemsControl>

我很确定我不应该在样式中使用这种类型的触发器，但我不知道该怎么做。我是使用 WPF 的新手，我发现它大部分都很直观，但我在这里迷路了。我想尝试将其包含在 XAML 代码中。

谢谢

【问题讨论】：

你打算只改变背景颜色还是控件的布局也会改变？
我需要更改布局。 index 0 内容将左对齐， index 1 内容将右对齐。

标签： wpf xaml

【解决方案1】：

ItemTemplate 适用于所有项目。你可以做的是使用ContentControl as ItemTemplate 自定义样式，基于ItemsControl.AlternationIndex 选择ContentTemplate

<ItemsControl Name="ItemControl" AlternationCount="2">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <VirtualizingStackPanel IsItemsHost="True"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <ContentControl Content="{Binding}">
                <ContentControl.Style>
                    <Style TargetType="{x:Type ContentControl}">
                        <Setter Property="ContentTemplate" Value="{StaticResource ItemLeft}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ContentPresenter}}, Path=(ItemsControl.AlternationIndex)}" Value="1">
                                <Setter Property="ContentTemplate" Value="{StaticResource ItemRight}"/>                                      
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ContentControl.Style>
            </ContentControl>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

【讨论】：

看来我还有很多东西要学。感谢您的解释以及代码。像魅力一样工作。

【解决方案2】：

更简单的解决方案是设置ItemContainerStyle，并为 AlternationIndex 使用触发器而不是 DataTrigger：

<ItemsControl ... AlternationCount="2">
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="ContentTemplate" Value="{StaticResource ItemLeft}"/>
            <Style.Triggers>
                <Trigger Property="ItemsControl.AlternationIndex" Value="1">
                    <Setter Property="ContentTemplate"
                            Value="{StaticResource ItemRight}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </ItemsControl.ItemContainerStyle>
    ...
</ItemsControl>

【讨论】：