使用 AlternationIndex 触发器的带有两个 DataTemplates 的 ItemsControl,XAML
ItemsControl with two DataTemplates using AlternationIndex trigger, XAML
我有一个带有项目控件的用户控件,我希望它有 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 代码中。
谢谢
ItemTemplate
适用于所有项目。您可以做的是将 ContentControl
用作 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>
一个更简单的解决方案是设置 ItemContainerStyle
,并为 AlternationIndex 使用 Trigger 而不是 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>
我有一个带有项目控件的用户控件,我希望它有 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 代码中。
谢谢
ItemTemplate
适用于所有项目。您可以做的是将 ContentControl
用作 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>
一个更简单的解决方案是设置 ItemContainerStyle
,并为 AlternationIndex 使用 Trigger 而不是 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>