CODEWITHSUNDEEP
wpf
Flack
Flack

Reputation: 5899

Inheriting/overriding WPF styles

I created style for a toggle button, defined below:

<Style TargetType="{x:Type ToggleButton}">
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="{x:Type ToggleButton}">
        <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" Padding="5,5,5,5" CornerRadius="5" Background="#FFBFACAC" BorderBrush="#FF000000" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">
          <ContentPresenter x:Name="contentPresenter"/>
        </Border>
        <ControlTemplate.Triggers>
          <Trigger Property="IsChecked" Value="true">
            <Setter Property="Foreground" Value="White"/>
            <Setter Property="Background" TargetName="border">
              <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="#FF36587C" Offset="0.5"/>
                  <GradientStop Color="#FF122F53" Offset="1"/>
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
          </Trigger>
          <Trigger Property="IsChecked" Value="false">
            <Setter Property="Foreground" Value="Black"/>
            <Setter Property="Background" TargetName="border">
              <Setter.Value>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                  <GradientStop Color="LightGray" Offset="0.5"/>
                  <GradientStop Color="White" Offset="1"/>
                </LinearGradientBrush>
              </Setter.Value>
            </Setter>
          </Trigger>
        </ControlTemplate.Triggers>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

I have multiple toggle buttons but I would like a way to change their border corner radius. For example, I would like buttons with only their right border corners to be rounded, or some with no corner rounding.

Do I have to recreate the entire style for each type of rounding I need, where the only difference in each style would be the following line?

    <Border HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="border" Padding="5,5,5,5" CornerRadius="5" Background="#FFBFACAC" BorderBrush="#FF000000" BorderThickness="1,1,1,1" SnapsToDevicePixels="True">

Since the corner rounding is part of the control template, I don't think I can somehow change just a part of the template in a new style without including all of it but I am not sure.

Thanks.

Upvotes: 1

Views: 1058

Answers (2)

Wonko the Sane
Wonko the Sane

Reputation: 10823

The alternative is to create a Custom Control, inheriting from ToggleButton.

You could then have a property called CornerRadius, and in the generic template for the class, do a TemplateBinding to this property.

If this is something you plan to use "a lot" in your project, with a bunch of variations, then a Custom Control may be the way to go. It will also allow you to expand the number of properties later, in case you want to do further customizations.

Upvotes: 0

Philip Rieck
Philip Rieck

Reputation: 32578

You will need to create the entire style to change part of the control template. I suggest putting this into a resource dictionary that you can merge as part of your window to keep the window (or control) XAML cleaner.

An easy way to do this is with Blend - add the control you want and right click it, then choose "edit template", to edit a copy of the template.

Upvotes: 2

Related Questions