Multiple Style Resource in WPF Metro Button - wpf

Question

I am trying to achieve my save button to reusable button and original button style is like this=>
<Button Margin="5"
Padding="0"
Width="98"
Cursor="Hand"
x:Name="btnSave"
Click="btnSave_Click">
<StackPanel Orientation="Horizontal" Height="25" Width="90">
<Image Source="\Image\Other\Save.ico" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
</Button>
Just text and image. So I just want to use this button as a reusable button. So I move this button to App.xaml Like this=>
<Style TargetType="Button" x:Key="SaveButton" BasedOn="{StaticResource MetroButton}">
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Style.Resources>
<Style TargetType="StackPanel">
<Setter Property="Orientation" Value="Horizontal"/>
<Setter Property="Height" Value="25"/>
<Setter Property="Width" Value="90"/>
<Setter Property="Background" Value="Red"/>
<Style.Resources>
<Style TargetType="Image">
<Setter Property="Source" Value="/Image/Other/Save.ico"/>
<Setter Property="Width" Value="20"/>
<Setter Property="Margin" Value="3 0"/>
</Style>
<Style TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="Margin" Value="15 0"/>
<Setter Property="Text" Value="Save"/>
</Style>
</Style.Resources>
</Style>
</Style.Resources>
</Style>
But after moving that, This button is not working anymore. Please let me know why this one is not working.

Answer 1

You said you wanted to reuse styles, so you shouldn't nest them. The right thing to do is：
<Style x:Key="SaveButton" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" Height="25" Width="90" Background="Red">
<Image/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

Answer 2

You need to define the StackPanel somewhere and set the Button's Content property to it. You may define the StackPanel as a non-shared resource next to the Style in App.xaml like this:
<StackPanel x:Key="sp" x:Shared="False" Orientation="Horizontal" Height="25" Width="90">
<Image Source="screen.png" Width="20" Margin="3 0"></Image>
<TextBlock VerticalAlignment="Center" Margin="15 0">Save</TextBlock>
</StackPanel>
<Style TargetType="Button" x:Key="SaveButton">
<Style.Resources>
</Style.Resources>
<Setter Property="Margin" Value="5"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Width" Value="98"/>
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="FontSize" Value="12"/>
<Setter Property="Content" Value="{StaticResource sp}" />
</Style>