Question

我有9个按钮，它们位于Polygon内的Canva中。每个按钮都是一个“方向”。

“选择”它们时，我需要有一种特殊的Fill颜色（当我单击一个方向时，它会在ViewModel中设置一个属性。

我可以很容易地做到这一点：

<Button Command="{Binding SelectNewOrientationCommand}" CommandParameter="{x:Static local:OrientationEditorDirection.Top}" >
    <Button.Template>
        <ControlTemplate>
            <Polygon Points="4,0 8,0 8,6 12,6 12,24 0,24 0,6 4,6"  RenderTransformOrigin="0.5,1.75" >
                <Polygon.Resources>
                    <Style TargetType="Polygon">
                        <Setter Property="Fill" Value="Blue" />
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding SelectedDirection, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
                                         Value="{x:Static local:OrientationEditorDirection.Top}" />
                        </Style.Triggers>
                    </Style>
                </Polygon.Resources>
                <Polygon.RenderTransform>
                    <TransformGroup>
                        <TranslateTransform X="40" Y="4"/>
                    </TransformGroup>
                </Polygon.RenderTransform>
            </Polygon>
        </ControlTemplate>
    </Button.Template>
</Button>

这行得通，但是这意味着我必须将该样式复制粘贴9次并进行9次维护。

我不能将其“按原样”放入Canva资源中，因为我必须能够为每个按钮分别指定一个值，该按钮会触发特定值。

当我声明按钮时，是否有一种方法可以指示我的按钮是否为Top值，然后在“样式”中寻找我的DataTrigger中的“ Top”值？

谢谢！

Answer 1

您可以使用一种样式设置多个DataTriggers（每个方向一个）：

<DataTrigger Binding="{Binding SelectedDirection, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
             Value="{x:Static local:OrientationEditorDirection.Top}" >
     <Setter Property="Fill" Value="Red"/>
</DataTrigger >
<DataTrigger Binding="{Binding SelectedDirection, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}"
             Value="{x:Static local:OrientationEditorDirection.Bottom}" >
     <Setter Property="Fill" Value="Green"/>
</DataTrigger >

Answer 2

您可以创建一个基础Style，在其中将Fill中Polygon的{{1}}的{{1}}属性绑定到ControlTemplate的属性，然后创建基于每个Button的基本样式的特定样式：

Button

<Style x:Key="ButtonStyle" TargetType="Button">
    <Setter Property="Background" Value="Blue" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="Button">
                <Polygon Points="4,0 8,0 8,6 12,6 12,24 0,24 0,6 4,6"  RenderTransformOrigin="0.5,1.75"
                                 Fill="{TemplateBinding Background}">
                    <Polygon.RenderTransform>
                        <TransformGroup>
                            <TranslateTransform X="40" Y="4"/>
                        </TransformGroup>
                    </Polygon.RenderTransform>
                </Polygon>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

您不能重用实际的<Button> <Button.Style> <Style TargetType="Button" BasedOn="{StaticResource ButtonStyle}"> <Style.Triggers> <DataTrigger Binding="{Binding SelectedDirection, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Value="{x:Static local:OrientationEditorDirection.Top}"> <Setter Property="Background" Value="Red" /> </DataTrigger> </Style.Triggers> </Style> </Button.Style> </Button> <Button> <Button.Style> <Style TargetType="Button" BasedOn="{StaticResource ButtonStyle}"> <Style.Triggers> <DataTrigger Binding="{Binding SelectedDirection, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type UserControl}}}" Value="{x:Static local:OrientationEditorDirection.Bottom}"> <Setter Property="Background" Value="Green" /> </DataTrigger> </Style.Triggers> </Style> </Button.Style> </Button>。

将“标签”附加到元素以进行样式设计

2 个答案: