Прикрепить тег к элементу для укладки - PullRequest
Новая
       36

Прикрепить тег к элементу для укладки

0 голосов
/ 22 октября 2018

У меня 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 Resource, потому что я должен быть в состоянии указать индивидуально для каждой кнопки, для каких значений она вызывает конкретное значение.

Есть ли способ указать, что мойКнопка предназначена для значения Top, когда я объявляю кнопку, а затем в стиле, чтобы найти это «верхнее» значение в моем DataTrigger?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 октября 2018

Вы можете создать одну базу Style, в которой вы связываете свойство Fill Polygon в 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>

Вы не можете повторно использовать фактический DataTrigger.

0 голосов
/ 22 октября 2018

Вы можете иметь несколько 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 >
...