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.

?