在 WPF 样式中设置嵌套元素的属性 [英] Set a property of a nested element in an WPF style

问题描述

我有几种这样的样式(左、右、中)，它们的区别仅在于哪些角(如果有)是圆角的.

I have several styles like this one (left, right, center) that differ only in the which corners (if any) are rounded.

<Style x:Key="ToggleRadioButtonLeft" 
       TargetType="{x:Type ToggleButton}" 
       BasedOn="{StaticResource {x:Type ToggleButton}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border BorderBrush="Blue" 
                        Background="{TemplateBinding Background}"
                        Padding="15,0" 
                        BorderThickness="1" 
                        CornerRadius="10,0,0,10">  <!-- extract this -->
                    <ContentPresenter HorizontalAlignment="Center"
                                      VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>
    </Style.Triggers>
</Style>

我希望能够创建一个没有任何圆角的基本样式(即中心按钮样式)，然后再创建两个基于它的为左侧和最右侧元素设置圆角的样式，但我可以't 弄清楚如何在派生样式中设置边框半径，因为它不是样式中的顶级元素.

I'd like to be able to create a single base style without rounded any corners (ie the center button style) and then two more based on it that set the rounded corners for the left and rightmost elements, but I can't figure out how to set the border radius in a derived style because it's not the top level element in the style.

推荐答案

我知道 3 个以您正在寻找的方式自定义模板的选项

I know 3 options for customizing template in the way you are looking for

1) 创建一个从 ToggleButton 派生的 userControl，在那里添加一个 RadiusValue 依赖属性(CornerRadius 类型)并在控件模板中使用它:CornerRadius="{TemplateBinding RadiusValue}".

1) create a userControl derived from ToggleButton, add a RadiusValue dependency property there (of type CornerRadius) and use it in control template: CornerRadius="{TemplateBinding RadiusValue}".

2) 使用动态资源.

遇到动态资源的障碍后(Wpf 动态资源查找以进行验证.ErrorTemplate) 我更喜欢第三个

after running into a roadblock with dynamic resources (Wpf dynamic resource lookup for Validation.ErrorTemplate) I prefer the 3rd one

3) 使用附加的依赖属性

3) use an attached dependency property

起初我创建了一个 CornerRadius 类型的附加 DP(默认半径 = 3)

at first I created an attached DP of type CornerRadius (with default radius = 3)

public static class Attached
{
    public static readonly DependencyProperty RadiusValueProperty =
        DependencyProperty.RegisterAttached("RadiusValue", typeof (CornerRadius), typeof (Attached), new FrameworkPropertyMetadata(new CornerRadius(3)));


    public static void SetRadiusValue(DependencyObject element, CornerRadius value)
    {
        element.SetValue(RadiusValueProperty, value);
    }

    public static CornerRadius GetRadiusValue(DependencyObject element)
    {
        return (CornerRadius)element.GetValue(RadiusValueProperty);
    }
}

之后我修改了自定义 ToggleButton 模板:

after that I modified custom ToggleButton template:

<Style x:Key="ToggleRadioButton" 
        TargetType="{x:Type ToggleButton}" 
        BasedOn="{StaticResource {x:Type ToggleButton}}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Border BorderBrush="Blue" 
                Background="{TemplateBinding Background}"
                Padding="15,0" 
                BorderThickness="1" 
                CornerRadius="{Binding Path=(local:Attached.RadiusValue), 
                    RelativeSource={RelativeSource TemplatedParent}}"> 
                    <ContentPresenter HorizontalAlignment="Center"
                                VerticalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="True">
            <Setter Property="Background" Value="Blue"/>
            <Setter Property="Foreground" Value="White"/>
        </Trigger>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Background" Value="White"/>
            <Setter Property="Foreground" Value="Black"/>
        </Trigger>
    </Style.Triggers>
</Style>

唯一的变化(除了key)是

the only change (except key) is

CornerRadius="{Binding Path=(local:Attached.RadiusValue), 
               RelativeSource={RelativeSource TemplatedParent}}">

最后为 Left RadioButton 派生样式，基于 ToggleRadioButton

and finally derived style for Left RadioButton, based on ToggleRadioButton

<Style x:Key="ToggleRadioButtonLeft" 
        TargetType="{x:Type ToggleButton}" 
        BasedOn="{StaticResource ToggleRadioButton}">
    <Setter Property="local:Attached.RadiusValue" Value="10,0,0,10"/>
</Style>

这篇关于在 WPF 样式中设置嵌套元素的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！