3

近日中にかなり大きなプロジェクトを開始する予定で、プロジェクトを作成する最善の方法は何かを考えました。そして今、コントロールについて重要な質問があります。それを実装する最善の方法が本当にわからないのです。

私はLEDライトのマトリックスを持っています。(32x16 LED)。これらはグリッドに表示する必要があり、ここで注意が必要です。私は彼らとかなり多くのことをすることができなければなりません. 例として、データバインドされた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のマウスクリックをどのように処理して、LEDをオンまたはオフにする必要がありますか。（私はMVVMを使用しています）そして、LED内のグリッド全体をどのように抽象化しますか?

解決策はたくさんありますが、どれを選択すればよいかわかりません。

シンプルでクリーンなソリューションを作成する方法について、興味深いアイデアがあれば教えてください。

4

2 に答える 2

2

の代わりに、UniformGridでレギュラーを使用しGrid、オブジェクトの値にとをItemsControlバインドすることを検討してください。これにより、列全体または行全体をシフトするなどの操作がはるかに簡単になります。Grid.ColumnGrid.RowItemContainerStyle

16行と32行の行/列の定義を書き出すことができます。または、ブログにいくつかのプロパティを添付して、それぞれ1行でこれを実行できるようにします。

<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イベントを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");
}
于 2012-08-09T13:37:07.053 に答える
0

を使用する代わりに、このスタックオーバーフロースレッドで導入されUniformGridた優れたコントロールを使用することをお勧めしますDataGrid2D

これにより、を2Dオブジェクト（この場合は、）DataGrid2Dにバインドでき、変更内容を2D配列に表示できます。位置[1,2]から[2,5]のように、2つのLEDを切り替えたいとすると、配列でそれを行うだけで、ビューはそれに応じて自動的に更新されますItemsSourceLed[,]Led[,]

于 2012-08-09T13:33:45.947 に答える