WPF中如何将样式的DataTrigger绑定到数组指定元素？

嘿，你这个思路其实没走错，不用急着换UserControl！问题出在你每个Border的绑定没有指向数组里的具体元素——现在你直接用{Binding}的话，每个Border拿到的DataContext是整个[5,5]数组，而不是单个布尔值，所以触发器自然没法正确判断啦。

快速解决方法：指定数组索引绑定 #

你的BingoCell样式本身是没问题的，它的触发器是针对单个布尔值设计的。只需要给每个Border指定绑定到数组的对应索引位置就行：

比如第一行第一列的Border要绑定到数组的[0][0]元素，你可以这么修改：

<Border Grid.Row="0" Grid.Column="0" BorderBrush="Black" BorderThickness="1" 
        Style="{StaticResource BingoCell}" 
        DataContext="{Binding [0][0]}"/>

按照这个逻辑，把剩下的24个Border依次修改对应的索引：

• 第一行第二列：{Binding [0][1]}
• 第二行第一列：{Binding [1][0]}
• ...以此类推，直到第五行第五列：{Binding [4][4]}

修改后，每个Border的DataContext就变成了数组里的单个布尔值，你的触发器就能正常工作，true时背景变红，false时保持白色。

优化建议：用嵌套ItemsControl减少重复代码 #

手动写25个Border太繁琐了，你可以用嵌套的ItemsControl配合UniformGrid来自动生成单元格，代码会简洁很多：

<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">
    <ItemsControl ItemsSource="{Binding}" Margin="10">
        <!-- 外层ItemsControl绑定数组的每一行 -->
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <ItemsControl ItemsSource="{Binding}" Orientation="Horizontal">
                    <!-- 内层ItemsControl绑定每行的元素 -->
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border BorderBrush="Black" BorderThickness="1" 
                                    Style="{StaticResource BingoCell}"/>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <UniformGrid Columns="5"/>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="5"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
    </ItemsControl>
</DataTemplate>

这样不管是5x5还是其他尺寸的数组，都能自动生成对应的单元格布局，不用手动重复写Border。

关于UserControl的疑问 #

UserControl不是必须的，但如果以后你的单元格需要添加更多交互逻辑（比如点击事件、显示额外信息、动画效果等），把单个单元格封装成UserControl会让代码更模块化，更容易维护和扩展。目前只是简单显示背景色的话，用DataTemplate+Style完全足够。

备注：内容来源于stack exchange，提问作者Chris