c# - WPF 简单数据矩阵

Question

接下来几天我要开始一个相当大的项目，我想过什么是创建项目的最佳方式。现在我有一个关于控件的重要问题，我真的不知道什么是实现它的最佳方法。

我有一个 LED 灯矩阵。 (32x16 LED)。这些必须显示在网格中，现在是棘手的部分。我必须能够和他们一起做很多事情。例如，我必须能够很容易地访问数据绑定(bind) LED，做一些操作，比如将它们全部向右或向左移动 2 次或反转它们等等。

我考虑过在这样的项目控件中显示它们:

<ItemsControl ItemsSource="{Binding Path=Leds}">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <UniformGrid Rows="16" Columns="32"/>
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:Led}">
                <Ellipse Name="ellipse" Fill="Green"/>
                <DataTemplate.Triggers>
                    <DataTrigger Binding="{Binding Path=State}" Value="Off">
                        <Setter TargetName="ellipse" Property="Fill" Value="Red"/>
                    </DataTrigger>
                </DataTemplate.Triggers>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>

但是我应该如何处理 LED 上的鼠标点击以将其打开或关闭。 (我正在使用 MVVM)您将如何抽象 LED 中的整个网格？

有很多解决方案，但我不知道该采取哪个？

希望您有一个有趣的想法，如何创建一个简单而干净的解决方案。

Answer 1

代替 UniformGrid，考虑在 ItemsControl 中使用常规 Grid 并绑定(bind) Grid.Column和 ItemContainerStyle 中的 Grid.Row 到对象的值。这将使移动整列或整行等操作变得更加容易。

你可以写出 16 和 32 行/列的定义，或者我有一些 attached properties on my blog这样你就可以每行一行。

<ItemsControl ItemsSource="{Binding Leds}">
    <!-- ItemsPanelTemplate -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Grid local:GridHelpers.RowCount="16"
                  local:GridHelpers.ColumnCount="32" />
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>

    <!-- ItemContainerStyle -->
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Grid.Column" 
                    Value="{Binding ColumnIndex}" />
            <Setter Property="Grid.Row" 
                    Value="{Binding RowIndex}" />
        </Style>
    </ItemsControl.ItemContainerStyle>

    <!-- ItemTemplate -->
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            ...
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

至于点击它们来打开/关闭它们，请将每个项目包装在 Button 标记中并覆盖 Template 以显示您想要的方式。然后，您可以将 Command 事件绑定(bind)到 ViewModel 中的一个属性，并将选定的 LED 作为 CommandParameter

传递给它

<Button Command="{Binding RelativeSource={RelativeSource ItemsControl}, Path=DataContext.ToggleLedCommand}"
        CommandParameter="{Binding }">
    <Button.Template>
        <ControlTemplate TargetType="{x:Type Button}">
            <Ellipse Name="ellipse" Fill="Green"/>
            <ControlTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=State}" Value="Off">
                    <Setter TargetName="ellipse" Property="Fill" Value="Red"/>
                </DataTrigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
   </Button.Template>
</Button>

而您的命令实现将只是

void ToggleLed(LedModel led)
{
    led.State = (led.State == "On" ? "Off" : "On");
}