来自ControlTemplate中的样式DataTrigger的TemplateBinding

问题描述

在以下XAML中，我使用带有边框的矩形作为ToggleButton的模板.我希望BorderBrush为不同的颜色，以反映ToggleButton.IsChecked的变化值.不幸的是，我在DataTrigger中使用TemplateBinding的尝试不起作用.我该怎么办呢?

In the following XAML I'm using a Rectangle with a Border as the Template for a ToggleButton.I want the BorderBrush to be a different colour to reflect the changing value of ToggleButton.IsChecked.Unfortunately my attempt here of using a TemplateBinding in the DataTrigger doesn't work. What do I need to do instead?

<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <ControlTemplate x:Key="ButtonAsSwatchTemplate">
            <Border BorderThickness="1">
                <Border.Style>
                    <Style>
                        <Setter Property="BorderBrush" Value="Gainsboro" />
                        <Style.Triggers>
                            <!-- TemplateBinding doesn't work.-->
                            <DataTrigger
                                 Binding={TemplateBinding Property=IsChecked}
                                 Value="True">
                                <Setter Property="BorderBrush" Value="Black" />
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </Border.Style>
                <Rectangle Fill="{TemplateBinding Property=Background}"
                           Width="15" Height="15" />
            </Border>
        </ControlTemplate>
    </StackPanel.Resources>
    <ToggleButton Template="{StaticResource ButtonAsSwatchTemplate}"
                  HorizontalAlignment="Center" VerticalAlignment="Center"
                  Margin="2" Background="Red" />
</StackPanel>

编辑

构建并重新加载设计器时，出现以下错误:

When I build and reload the designer I get the following error:

错误1属性绑定"不支持类型为"TemplateBindingExpression"的值.

Error 1 Property 'Binding' does not support values of type 'TemplateBindingExpression'.

解决方案

<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <ControlTemplate x:Key="ButtonAsSwatchTemplate">
            <Border x:Name="SwatchBorder" BorderThickness="1">
                <Rectangle Fill="{TemplateBinding Property=Background}" Width="15" Height="15" />
            </Border>
        <ControlTemplate.Triggers>
            <Trigger Property="ToggleButton.IsChecked" Value="True">
                <Setter TargetName="SwatchBorder" Property="BorderBrush" Value="Yellow" />
            </Trigger>
        </ControlTemplate.Triggers>
            </ControlTemplate>
        </StackPanel.Resources>
    <RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
        GroupName="CropGuidesColourRadioButtonGroup"
        IsChecked="{Binding Checked}" Margin="2" Background="Red" />
    <RadioButton Template="{StaticResource ButtonAsSwatchTemplate}"
        GroupName="CropGuidesColourRadioButtonGroup"
        IsChecked="{Binding Checked}" Margin="2" Background="Black" />
    ...
</StackPanel>

推荐答案

您可以在ControlTemplate中使用触发器，例如

You could use a Trigger in the ControlTemplate, e.g.

<StackPanel Orientation="Horizontal">
    <StackPanel.Resources>
        <ControlTemplate x:Key="ButtonAsSwatchTemplate">
            <Border x:Name="myBorder" BorderBrush="Gainsboro" BorderThickness="1">
                <Rectangle Fill="{TemplateBinding Property=Background}" Width="15" Height="15" />
            </Border>
            <ControlTemplate.Triggers>
                <Trigger Property="ToggleButton.IsChecked" Value="True">
                    <Setter TargetName="myBorder" Property="BorderBrush" Value="Black" />
                </Trigger>
            </ControlTemplate.Triggers>
        </ControlTemplate>
    </StackPanel.Resources>
    <ToggleButton Template="{StaticResource ButtonAsSwatchTemplate}"
              HorizontalAlignment="Center" VerticalAlignment="Center"
              Margin="2" Background="Red" />
</StackPanel>

这篇关于来自ControlTemplate中的样式DataTrigger的TemplateBinding的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！