在WPF样式中设置嵌套元素的属性

时间:2016-11-17 14:45:10

标签: wpf xaml

我有几种样式(左,右,中),只有哪些角(如果有的话)是圆的。

<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>

我希望能够创建单个基本样式而不会对任何角落(即中心按钮样式)进行创建,然后再根据它设置两个角落来设置左侧和最右侧元素的圆角,但是我无法弄清楚如何在派生样式中设置边框半径,因为它不是样式中的顶级元素。

1 个答案:

答案 0 :(得分:3)

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

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

2)使用动态资源。

在遇到包含动态资源(Wpf dynamic resource lookup for Validation.ErrorTemplate)的包版广告后,我更喜欢第3个

3)使用附加的依赖属性

首先我创建了一个CornerRadius类型的附加DP(默认半径= 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模板:

<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>

唯一的变化(键除外)是

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

最后基于ToggleRadioButton

派生左侧RadioButton的样式
<Style x:Key="ToggleRadioButtonLeft" 
        TargetType="{x:Type ToggleButton}" 
        BasedOn="{StaticResource ToggleRadioButton}">
    <Setter Property="local:Attached.RadiusValue" Value="10,0,0,10"/>
</Style>