0

I have a style for Buttons and now I want to apply it to RadioButtons, except that where a normal Button has a CornerRadius that is a single number (each corner is the same) I want to render the RadioButtons with different corner radii, like this:

enter image description here

I use a custom ControlTemplate for Button as well as a style:

<ControlTemplate TargetType="{x:Type ButtonBase}" x:Key="ButtonTemplate">
    <Border Background="{TemplateBinding Background}" 
            Width="{TemplateBinding Width}" 
            CornerRadius="22.5"
            BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding Foreground}">
        <TextBlock FontSize="14" FontWeight="Bold"
                    TextWrapping="Wrap" TextAlignment="Center"
                    VerticalAlignment="Center" HorizontalAlignment="Center" Margin="30 0"
                    Foreground="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"
                    Text="{Binding Content, RelativeSource={RelativeSource TemplatedParent}}"/>
    </Border>
</ControlTemplate>

<Style TargetType="{x:Type ButtonBase}" x:Key="MainButton">
    <Setter Property="Foreground" Value="{StaticResource IntBlue2}"/>
    <Setter Property="TextBlock.Foreground" Value="{StaticResource IntBlue2}"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="MinWidth" Value="132"/>
    <Setter Property="Template" Value="{StaticResource ButtonTemplate}"/>

    <Style.Triggers>
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="LightSlateGray"/>
        </Trigger>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Foreground" Value="#66CDFF"/>
        </Trigger>
    </Style.Triggers>
</Style>

And I have a style for RadioButton that uses the Button template

<Style TargetType="RadioButton">
    <Setter Property="Template" Value="{StaticResource ButtonTemplate}"/>
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="Foreground" Value="{StaticResource ForegroundPureWhite}"/>
    <Setter Property="BorderThickness" Value="2"/>
    <Style.Triggers>
        <Trigger Property="IsChecked" Value="False">
            <Setter Property="Foreground" Value="{StaticResource DisabledGrey}"/>
        </Trigger>
    </Style.Triggers>
</Style>

Everything above works, until I want the custom CornerRadius for each RadioButton.

I've tried CornerRadius="{Binding CornerRadius, RelativeSource={RelativeSource TemplatedParent}}" inside the Border in the ControlTemplate, and <Setter Property="Border.CornerRadius" Value="22.5"/> inside the MainButton style, but it doesn't work (it doesn't apply the radius).

Binding CornerRadius="{TemplateBinding CornerRadius}" to the border in the template doesn't even compile, and setting CornerRadius on a Button or RadioButton, through the control tag or through a setter in the style, also doesn't compile.

How do I use one template, but different CornerRadius in each style or instance?

Jonathan Tuzman
  • 11,568
  • 18
  • 69
  • 129
  • 2
    Does this answer your question? [Set CornerRadius on button template](https://stackoverflow.com/questions/17681022/set-cornerradius-on-button-template) – Pavel Anikhouski Jul 07 '20 at 07:19

1 Answers1

1

A ButtonBase has no CornerRadius property that you can bind to but you could use the Tag property:

<ControlTemplate TargetType="{x:Type ButtonBase}" x:Key="ButtonTemplate">
    <Border Background="{TemplateBinding Background}" 
            Width="{TemplateBinding Width}" 
            CornerRadius="{Binding Tag, RelativeSource={RelativeSource TemplatedParent}}"
            ...

<Style TargetType="RadioButton">
    <Setter Property="Tag" Value="22.5" />
    ...
</Style>

<RadioButton ... Tag="0" />
mm8
  • 163,881
  • 10
  • 57
  • 88