How to inherit XAML style and override property of child element?

The question


how to inherit XAML style and override some the property of the child element/

the problem

there is a very good question indeed, times are you need to define a base button that you want the derived classs to override. 

 

This article is about the principle tha how you can override the style inherited from the base style.

 

 

the solution

It is more a best practise/guide rather than the solutoin, there is a good artile on on this discussion on the stackoverlow already, so that yoy might have a look here. 

 

the note "The standard approach to making a customizable control template is to use TemplateBinding in the template to bind to properties  of the control, and then to set those properties in the child styles."

 

 

and here ist one of the example that you can find the stackoverflow forum.

 

 

<StackPanel>
    <StackPanel.Resources>
        <Style x:Key="BaseButtonStyle" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Border
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                            <ContentPresenter/>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="BlueButtonStyle" TargetType="Button"
               BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Blue"/>
        </Style>
        <Style x:Key="RedButtonStyle" TargetType="Button"
               BasedOn="{StaticResource BaseButtonStyle}">
            <Setter Property="Background" Value="Red"/>
        </Style>
    </StackPanel.Resources>
    <Button Style="{StaticResource RedButtonStyle}">Red</Button>
    <Button Style="{StaticResource BlueButtonStyle}">Blue</Button>
</StackPanel>

 

 

 

 

The note: 

Below is a more elaborated example of how you can overrid the style to make the togglebutton to have different image depending on the IsChecked status.

 

 

<Style x:Key="_icoToggleButton"
           BasedOn="{x:Null}"
           TargetType="{x:Type ToggleButton}">
    <Style.Resources>
      <BitmapImage x:Key="_imageOnSource"
                   UriSource="pack://application:,,,/Resources/Images/excel_icon.gif" />
      <BitmapImage x:Key="_imageOffSource"
                         UriSource="pack://application:,,,/Resources/Images/refresh.PNG" />
    </Style.Resources>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type ToggleButton}">
          <Grid>
            <Image Margin="2,2,2,2"
                           x:Name="image"
                    Source="{DynamicResource _imageOnSource}"
                         />
          </Grid>
          <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="True">
                    <Setter TargetName="image" Property="Source" Value="{DynamicResource _imageOnSource}" />
                    <Setter Property="ToolTip" Value="Click to Turn Off Auto Sorted/Filtered/Grouped by Fields" />
                  </Trigger>
                  <Trigger Property="IsChecked" Value="False" >
                    <Setter TargetName="image" Property="Source" Value="{DynamicResource _imageOffSource}" />
                    <Setter Property="ToolTip" Value="Click to Turn On Auto Sorted/Filtered/Grouped by Fields" />
                  </Trigger> 
                  <Trigger Property="IsChecked" Value="{x:Null}" >
                    <Setter TargetName="image" Property="Source" Value="{DynamicResource _imageOnSource}" />
                    <Setter Property="ToolTip" Value="Click to Turn On Auto Sorted/Filtered/Grouped by Fields" />
            </Trigger>
            <Trigger Property="IsFocused"
                         Value="True" />
            <Trigger Property="IsMouseOver"
                         Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource _iconOverStoryboard}"
                                     x:Name="_iconOverStoryboard_BeginStoryboard" />
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource _iconAwayStoryboard}"
                                     x:Name="_iconAwayStoryboard_BeginStoryboard" />
              </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsPressed"
                         Value="True">
              <Trigger.EnterActions>
                <BeginStoryboard Storyboard="{StaticResource _iconPressStoryboard}"
                                     x:Name="_iconPressStoryboard_BeginStoryboard" />
              </Trigger.EnterActions>
              <Trigger.ExitActions>
                <BeginStoryboard Storyboard="{StaticResource _iconReleaseStoryboard}"
                                     x:Name="_iconReleaseStoryboard_BeginStoryboard" />
              </Trigger.ExitActions>
            </Trigger>
            <Trigger Property="IsEnabled"
                         Value="False" />
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

 

 

 

Then you can define a child style as such.

 

 

 

<Style x:Key="_customizedIcoToggleButton"
           BasedOn="{StaticResource _customizedIcoToggleButton}"
           TargetType="{x:Type ToggleButton}">
    <Style.Resources>
      <BitmapImage x:Key="_imageOnSource"
                   UriSource="pack://application:,,,/Resources/Images/automatic.gif" />
      <BitmapImage x:Key="_imageOffSource"
                         UriSource="pack://application:,,,/Resources/Images/manua.PNG" />
    </Style.Resources>
    
</Style>

 

 

 

the new style "_customizedIcoToggleButton" now have a different images for on/off status.