What are your strategies for putting XAML into styles? - wpf

Question

When I create WPF applications, very quickly my XAML starts to bloat.
I then approach the XAML/style issue in a HTML/CSS way, looking for repetitive code and packing it into styles which I put into my Window.Resources section.
Is this the way others are doing it or is there some better way now in XAML? It just seems that the two blocks below only differ on two little words, it seems that I could put it in some kind of functional user control (this is a left-side menu) so that when I have 25 elements in my menu I could just have 25 lines of same with the names and perhaps the Click targets.
Or perhaps when I move this to MVVM this issue will take care of itself with DataBinding (it is currrently just a hard-coded prototype), so I can keep the names of the menu items in a collection in my ViewModel and it then creates the menu dynamically in an ItemsControl?
Or are bloated XAML files just a fact of life with WPF applications?
What kind of XAML styling strategies do you have when you create WPF applications?
Window.Resources (top of file):
<Window.Resources>
<Style x:Key="Link" TargetType="Button">
<Setter Property="Cursor" Value="Hand"/>
<Setter Property="Foreground" Value="#555"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<TextBlock TextDecorations="Underline"
Text="{TemplateBinding Content}"
Background="{TemplateBinding Background}"/>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
Current XAML:
<Expander HorizontalAlignment="Left" Header="File" VerticalAlignment="Top" ExpandDirection="Down" Width="200" Padding="2">
<Expander.Background>
<LinearGradientBrush>
<GradientStop Color="#bbb" Offset="0"/>
<GradientStop Color="#ccc" Offset="1"/>
</LinearGradientBrush>
</Expander.Background>
<Border CornerRadius="5">
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Button Click="buttonClose_Click"
Style="{StaticResource Link}"
Margin="10 3 3 3"
Content="Close">
</Button>
</StackPanel>
</Border>
</Expander>
<Expander HorizontalAlignment="Left" Header="Customers" VerticalAlignment="Top" ExpandDirection="Down" Width="200" Padding="2">
<Expander.Background>
<LinearGradientBrush>
<GradientStop Color="#bbb" Offset="0"/>
<GradientStop Color="#ccc" Offset="1"/>
</LinearGradientBrush>
</Expander.Background>
<Border CornerRadius="5">
<Border.Background>
<LinearGradientBrush>
<GradientStop Color="#ccc" Offset="0"/>
<GradientStop Color="#bbb" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
<StackPanel HorizontalAlignment="Left" VerticalAlignment="Top">
<Button Click="btnAppPage_Click"
Tag="CustomerAdd"
Style="{StaticResource Link}"
Margin="10 3 3 3"
Content="Create Customer"/>
</StackPanel>
</Border>
</Expander>

Answer 1

Simple: identify repetition and move it into a control. The control can have whatever properties necessary to compose the required variations at runtime. And it can be re-templated by virtue of being a control.

Answer 2

Also, you can identify repetitions and move them into resources. One resource can easily reference another.