WPF Button with image Trigger Mouseover to change Image - wpf

Question

i've a Button like this
<Button Content="Add">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal">
<Image x:Name="image" Source="../Resources/Images/Icons/Pruefplan_Add_32_gray.png" Margin="8" />
<TextBlock x:Name="text" Text="ADD" Margin="3,0,3,0" VerticalAlignment="Center"></TextBlock>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="image" Property="Source" Value="../Resources/Images/Icons/Pruefplan_Add_32.png" />
<Setter TargetName="text" Property="Opacity" Value=".5" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
This Button has a Styling and a Trigger to change the Image on MouseOver. It works all fine. But i want to use a global Resource for the Button.
<Style x:Key="ButtonsMenue1" TargetType="{x:Type Button}">
<Setter Property="Background" Value="#02FFFFFF" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="Padding" Value="1" />
<Setter Property="Foreground" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Background="{TemplateBinding Background}">
<ContentPresenter x:Name="contentPresenter" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="10"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
RecognizesAccessKey="True"
TextBlock.FontFamily="Segoe WP Light"
TextBlock.Foreground="Black"
TextBlock.FontSize="14"
/>
<Rectangle x:Name="border"
SnapsToDevicePixels="True"
IsHitTestVisible="False"
Opacity="0.25"
Width="10" Height="20" VerticalAlignment="Stretch" HorizontalAlignment="Right"
Fill="DarkGray" Margin="15,0,0,0" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="contentPresenter" Property="Opacity" Value="1" />
</Trigger>
<Trigger Property="IsMouseOver" Value="False">
<Setter TargetName="contentPresenter" Property="Opacity" Value=".5" />
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="true" />
<Trigger Property="ToggleButton.IsChecked" Value="true" />
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="White" />
</Trigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource PreviousData}}" Value="{x:Null}">
<Setter TargetName="border" Property="Rectangle.Width" Value="2"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I know i can use
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource ButtonsMenue1}">
But it wont show for example my Rectangle as Separator. And it looks not good. Do you have a nice Solution for me ?
nice Wishes
Manuel

Answer 1

Unfortunately you cannot inherit a ControlTemplate. The template you define for the inherited style will override the template you defined for the base style.
If you want to use a base template and then want to modify it you will have to find a way to do it with properties. You would than have to define a custom control which has a DependencyProperty to handle special requirements. Something like:
<Style TargetType="{x:Type Button}" BasedOn="{StaticResource ButtonsMenue1}">
<Setter Property="ImageForMouseOver" Value="..." />
</Style>