1

WPFコードの重複を削除する最も簡単な方法を探しています。

以下のコードは、3つのライトを備えた単純な信号機です- Red、、。これらの3つの値のいずれかを取る1つの列挙型プロパティを持つViewModelにバインドされます。AmberGreenState

3つの省略記号を宣言するコードは、非常に重複しています。次に、アニメーションを追加して、各ライトがフェードインおよびフェードアウトするようにします。スタイルがさらに大きくなり、重複が悪化します。

ライトの動作を説明するリソースで単一のスタイルを使用し、それを「赤」、「琥珀」、「緑」のライトに3回使用できるようにState、引数を使用してスタイルをパラメーター化することは可能ですか？Color

<UserControl.Resources>
    <l:TrafficLightViewModel x:Key="ViewModel" />
</UserControl.Resources>

<StackPanel Orientation="Vertical" DataContext="{StaticResource ViewModel}">
    <StackPanel.Resources>
        <Style x:Key="singleLightStyle" TargetType="{x:Type Ellipse}">
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="Stroke" Value="Black" />
            <Setter Property="Height" Value="{Binding Width, RelativeSource={RelativeSource Self}}" />
            <Setter Property="Width" Value="60" />
            <Setter Property="Fill" Value="LightGray" />
        </Style>
    </StackPanel.Resources>

    <Ellipse>
        <Ellipse.Style>
            <Style TargetType="{x:Type Ellipse}" BasedOn="{StaticResource singleLightStyle}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding State}" Value="Red">
                        <Setter Property="Fill" Value="Red" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <Ellipse>
        <Ellipse.Style>
            <Style TargetType="{x:Type Ellipse}" BasedOn="{StaticResource singleLightStyle}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding State}" Value="Amber">
                        <Setter Property="Fill" Value="Red" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
    <Ellipse>
        <Ellipse.Style>
            <Style TargetType="{x:Type Ellipse}" BasedOn="{StaticResource singleLightStyle}">
                <Style.Triggers>
                    <DataTrigger Binding="{Binding State}" Value="Green">
                        <Setter Property="Fill" Value="Green" />
                    </DataTrigger>
                </Style.Triggers>
            </Style>
        </Ellipse.Style>
    </Ellipse>
</StackPanel>

4

1 に答える 1

1

あなたの「信号機」がコントロールの中に包まれている限り、それはそうであるように見えますが、これは恐ろしいことではないと思います。各楕円は明確に定義されており、それぞれが独自の状態を示すさまざまなトリガーがあります。あなたはすでに共通の部分を基本スタイルに分解しました、それは良いことです。

ActiveStateプロパティとプロパティを持つ別のユーザーコントロール（バッキングViewModelは必要ありません）内で個々の省略記号をラップすることができActiveFillます。次に、TrafficLightは次のようになります。

<StackPanel Orientation="Vertical" DataContext="{StaticResource ViewModel}">
    <my:Indicator State="{Binding State}" ActiveState="Red" ActiveFill="Red" />
    <my:Indicator State="{Binding State}" ActiveState="Amber" ActiveFill="Red" />
    <my:Indicator State="{Binding State}" ActiveState="Green" ActiveFill="Green" />
</StackPanel>

これにより、すべての楕円のスタイリングをインジケーターコントロール内にまとめることができます。コントロールが心配する必要があるのは、とを比較しStateて、ブラシ ActiveStateで塗りつぶす必要があるかどうかを判断することだけです。ActiveFill

これが努力する価値があるかどうかに関しては、それはあなたが浮かんでいるこれらの数と、信号機のユーザーコントロールの外でそれらを使用するかどうかに依存します。覚えておいてください：あなたはそれを必要としないでしょう。

于 2010-03-17T12:34:23.987 に答える