change property of a control in an extended style wpf

Question

I have this style for a button:

<Style x:Key="ButtonStyle1" TargetType="{x:Type local:ButtonExt}">
   <Setter Property="Template">
      <Setter.Value>
         <ControlTemplate TargetType="{x:Type local:ButtonExt}">
            <Grid Name="grid" Margin="0,0,0,0">
               <Rectangle Name="rectangle" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                  <Rectangle.Fill>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
                        <GradientStop Offset="1" Color="{DynamicResource button_background_gradient1}" />
                        <GradientStop Offset="0" Color="#FF004F96" />
                     </LinearGradientBrush>
                  </Rectangle.Fill>
                  <Rectangle.Effect>
                     <DropShadowEffect BlurRadius="3" Opacity="0.4" ShadowDepth="6" />
                  </Rectangle.Effect>
               </Rectangle>
               <Rectangle Width="0.7" Margin="0,0,43,1" HorizontalAlignment="Right" VerticalAlignment="Stretch" Stroke="#FF434343">
                  <Rectangle.Fill>
                     <LinearGradientBrush StartPoint="0,0" EndPoint="1,0.5">
                        <GradientStop Offset="0" Color="#FFF7F7F7" />
                        <GradientStop Offset="1" Color="#FFD6D6D6" />
                     </LinearGradientBrush>
                  </Rectangle.Fill>
               </Rectangle>
            </Grid>
            <ControlTemplate.Triggers>
               <Trigger Property="IsFocused" Value="True" />
               <Trigger Property="IsDefaulted" Value="True" />
               <Trigger Property="Button.IsPressed" Value="True">
                  <Setter TargetName="grid" Property="Margin" Value="2,2,-1,-1" />
                  <Setter TargetName="rectangle" Property="Effect" Value="{x:Null}"/>
               </Trigger>
               <Trigger Property="IsMouseOver" Value="True"/>
               <Trigger Property="IsPressed" Value="True" />
               <Trigger Property="IsEnabled" Value="False"/>
            </ControlTemplate.Triggers>
         </ControlTemplate>
      </Setter.Value>
   </Setter>
</Style>

and another style based on this style:

<Style x:Key="ButtonStyle2" BasedOn="{StaticResource ButtonStyle1}">
    <Setter  Property="Rectangle.Fill">
    <Setter.Value>

In the first style, I have two rectangles. In the second style, which is based on style 1, I would like to change the property of just one rectangle (which I named it "rectangle"). How can I do that?

Answer 1

Expose a property for the rectangle's fill in the ButtonEx class. In the template, use {TemplateBinding} to bind the Fill to this new property. In the derived style, set a new value to this property.