Search code examples
wpfxamlmahapps.metroapp.xaml

Add button created in App.xaml to a view


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 what it looks like

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.


Solution

  • 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>