xaml - Set a property of a nested element in an WPF style

Question

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>

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.

Answer 1

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

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) use a dynamic resource.

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

3) use an attached dependency property

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);
    }
}

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>

the only change (except key) is

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

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>