使用 WPF,如何将样式的数据触发器绑定到数组的特定元素



我试图使用datatemplate和样式与DataTriggers来简化我的代码,我很难弄清楚如何正确设置绑定。我一直盯着这个,只是觉得"卡住"了,不知道下一步该去哪里。

DataTemplate将应用于ListView中的项,并且项本身将是一个布尔值[5,5]数组。我只是想显示这些项目,如果为真边框背景为红色,如果为假边框背景为白色。

我是否完全走错了路,应该使用UserControl?

<Style x:Key="BingoCell" TargetType="Border">
<Setter Property="Background" Value="White"/>
<Style.Triggers>
<DataTrigger Binding="{Binding}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>
</Style.Triggers>
</Style>
<DataTemplate x:Key="BingoRulesTemplate">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="0" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="0" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="0" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="1" Grid.Column="0" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="1" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="1" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="1" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="1" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="2" Grid.Column="0" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="2" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="2" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="2" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="2" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="3" Grid.Column="0" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="3" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="3" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="3" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="3" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="4" Grid.Column="0" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="4" Grid.Column="1" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="4" Grid.Column="2" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="4" Grid.Column="3" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
<Border Grid.Row="4" Grid.Column="4" BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}"/>
</Grid>
</DataTemplate>

您可以使用以下语法绑定到锯齿数组中的特定位置:

<DataTrigger Binding="{Binding [0][0]}" Value="True">
<Setter Property="Background" Value="Red"/>
</DataTrigger>

不幸的是,这意味着您将需要一个单独的Style,对于数组中的每个bool都需要一个单独的Trigger。没有办法动态地只替换模板中的绑定路径,而保留其余的。XAML不支持这个

一种选择是以编程方式创建样式/模板,例如使用XamlReader。解析方法。

或者用视图模型类替换锯齿数组,该视图模型类具有可用于确定模板中Border的背景颜色的属性。

感谢@Clemens和@Andy,我能够找到一个解决方案,使用一对嵌套的ItemsControl为我工作。我必须把5x5的数组放平。

<ItemsControl x:Name="ExamplePatterns" Grid.Row="1" ItemsSource="{Binding GameRules.ExamplePatterns}" HorizontalAlignment="Center">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Rows="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ItemsControl ItemsSource="{Binding BoolsFlat}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Margin="10" Columns="5" Background="Azure"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="1" Style="{StaticResource BingoCell}">
<TextBlock Text="" Height="Auto" Width="{Binding ActualHeight, RelativeSource={RelativeSource Self}}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

最新更新