So maybe my approach to this problem is wrong, but here it goes: I use a Button of MahApps.Metro framework which is already styled and as content it receives an Icon. In my project I've repeatedly used code like this:
<Button
Width="30"
Height="30"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
BorderBrush="{DynamicResource AccentBaseColorBrush}"
FocusVisualStyle="{DynamicResource MahApps.Metro.Styles.MetroCircleFocusVisual}"
FontSize="16"
Style="{DynamicResource MahApps.Metro.Styles.MetroCircleButtonStyle}">
<iconPacks:PackIconModern
Width="15"
Height="15"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Foreground="{DynamicResource AccentBaseColorBrush}"
Kind="Refresh" />
<Button.ToolTip>
<Label
Content="{x:Static properties:Resources.TooltipUpdate}"
FontWeight="DemiBold" />
</Button.ToolTip>
</Button>
This is how the buttons look. (One enabled, two disabled)
And as you can see, it's a lot of code to be repeatedly used in the project with many Views. So I've thought about adding it to App.xaml
and reusing them by changing command (and margin) in views.
However I'm not sure how to do this. I've tried adding entire button code as you see it and then just adding x:Key
to it, but I don't know how to then use it in the view. I know how to use "global" styles and templates, but this is already styled and finished control template and the only thing that changes between the buttons is command and occasionally tooltip.
Create a Style
with an x:Key
in App.xaml
where you define all default property values using setters:
<Style x:Key="myStyle" TargetType="Button" BasedOn="{StaticResource MahApps.Metro.Styles.MetroCircleButtonStyle}">
<Setter Property="Width" Value="30" />
<Setter Property="Height" Value="30" />
<Setter Property="HorizontalContentAlignment" Value="Center" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="BorderBrush" Value="{DynamicResource AccentBaseColorBrush}" />
<Setter Property="Content">
<Setter.Value>
<iconPacks:PackIconModern
Width="15"
Height="15"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Foreground="{DynamicResource AccentBaseColorBrush}"
Kind="Refresh" />
</Setter.Value>
</Setter>
</Style>
You can then apply the Style
to any Button
element and override any property you want:
<Button Style="{DynamicResource myStyle}" Command="{Binding YourCommand}" Margin="10">
<iconPacks:PackIconModern
Width="15"
Height="15"
HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Foreground="{DynamicResource AccentBaseColorBrush}"
Kind="Add" />
</Button>