WPF Simple DataMatrix

Question

我在接下来的几天里开始一个相当大的项目，我想到了创建项目的最佳方式。现在我对控制有一个重要的问题，我不知道实现它的最佳方式是什么。

我有一个led灯矩阵。 （32x16 LED）。这些必须显示在一个网格中，现在是棘手的部分。我必须能够与他们做很多事情。举例来说，我必须能够轻松地访问数据绑定文件，可以执行一些操作，例如将它们全部右移或左移两次，或者反转它们等等。

我想过这样在itemcontrol显示它们：

<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> 

但是我应该如何处理在带领鼠标点击打开它或者。 （我正在使用MVVM） 你将如何抽象出LED中的整个网格？

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

请问您是否有一个有趣的想法来创建一个简单而干净的解决方案。

Answer 1

而不是使用UniformGrid的，我宁愿建议您使用优秀DataGrid2D控制引入in this stackoverflow thread

它会允许您在DataGrid2D的ItemsSource绑定到一个2D对象，在你的情况下， Led[,]，然后将显示2D数组中的任何更改。 假设你想切换两个LED，就像从位置[1,2]到[2,5]，你只需要在你的Led[,]阵列上进行切换，视图就会相应地更新自己。

Answer 2

而不是UniformGrid，请考虑在ItemsControl中使用常规Grid，并将ItemContainerStyle中的Grid.Column和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事件的属性绑定在你的视图模型，并通过它选择的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"); 
}