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"); 
}