Прикрепите «Тег» к элементу для стилизации
У меня 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, когда я объявляю кнопку, а затем в Style, чтобы искать это значение «Top» в моем DataTrigger?
Спасибо!
Ответы 2
у вас может быть несколько DataTrigger - по одному для каждого направления - в одном стиле:
<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 >
Вы можете создать один базовый Style, в котором вы привяжете свойство FillPolygon в 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.
На самом деле я ищу почти противоположное. Точки моего многоугольника, переводы ... разные для каждой кнопки, поэтому я не могу объединить их. Я ищу способ иметь такой же dataTrigger (кроме значения Value).
Это невозможно. Вы не можете «повторно использовать» DataTrigger таким образом. Если многоугольник разный для каждой кнопки, что можно использовать повторно? Затем вы должны определить отдельный стиль или шаблон для каждого из них.
Цвета такие же;), и источник триггера стиля такой же.
Затем определите цвета как ресурсы и укажите на них ссылку в каждом шаблоне.
Я думаю, вы неправильно поняли, но каждая кнопка должна быть одного цвета, только выбранная должна быть этого цвета. В вашем примере ВСЕ кнопки будут одного цвета, в зависимости от того, на какой кнопке я нажал.