Search code examples
xamlmahapps.metro

Using Same MahApps Button Style Twice in Single UserControl Isn't Working

I have a series of button styles (add, edit, delete, etc.) that make use of the MahApps Metro cirucular button style but apply specific images to the button style. When I use any of the styles only once in a UserControl they work just fine and I get the anticipated look from the styles. However, when I use the styles more than once in a single UserControl, only one of the style instances acts as behaved, the others drop the image I am expecting to see.

I have tried naming the specific control instances (in case it was some sort of lifetime management issue) that are using the styles to see if this would fix the issue but it did not. I also tried creating multiple buttons that use the same style properties but do not use the style and that DID work and the buttons showed correctly, but I don't want to go that route as that would defeat the purpose of the styles.

Below is my code for the resource dictionary where I define the button styles. Please note that I have only shown the style for the add button as the other ones are basically the exact same I just change the image type and tool tip. That's why there is the circular button base that I use to define the majority of the style properties. 

<!--Reference Dictionaries-->
<ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Controls.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Fonts.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
    <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseLight.xaml" />      Source="pack://application:,,,/MahApps.Metro;component/Styles/FlatButton.xaml" />
</ResourceDictionary.MergedDictionaries>

<!--Circular Control Button Base-->
<Style x:Key="CircularControlButtonBase" TargetType="Button" BasedOn="{StaticResource MahApps.Metro.Styles.MetroCircleButtonStyle}">
    <Setter Property="Height" Value="30"/>
    <Setter Property="Width" Value="30"/>
    <Setter Property="Margin" Value="2"/>
    <Setter Property="BorderThickness" Value="1"/>
    <Setter Property="BorderBrush" Value="{DynamicResource GrayBrush1}"/>
    <Setter Property="Foreground" Value="Black"/>

    <Style.Triggers>

        <!--IsMouseOver Trigger-->
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{DynamicResource AccentColorBrush4}"/>
            <Setter Property="Foreground" Value="{DynamicResource AccentColorBrush}"/>
            <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush}"/>
            <Setter Property="BorderThickness" Value="2"/>
        </Trigger>

        <!--IsEnabled Trigger-->
        <Trigger Property="IsEnabled" Value="False">
            <Setter Property="Foreground" Value="{DynamicResource MahApps.Metro.Brushes.Badged.DisabledBackgroundBrush}"/>
        </Trigger>


    </Style.Triggers>

</Style>

<!--Add Button-->
<Style TargetType="Button" x:Key="AddButton" BasedOn="{StaticResource CircularControlButtonBase}">

    <Setter Property="ToolTip" Value="Add"/>

    <!--Icon Image-->
    <Setter Property="Content">
        <Setter.Value>
            <Rectangle Width="20" Height="20" Fill="{Binding Path=Foreground, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
                <Rectangle.OpacityMask>
                    <VisualBrush Stretch="Fill">
                        <VisualBrush.Visual>
                            <iconPacks:PackIconMaterial Kind="Plus"/>
                        </VisualBrush.Visual>
                    </VisualBrush>
                </Rectangle.OpacityMask>
            </Rectangle>
        </Setter.Value>
    </Setter>

</Style>
</ResourceDictionary>

And I consume the styles like this.

<UserControl x:Class ="TestClass"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

<!--The image on this button won't come through.-->
<Button Style="{DynamicResource AddButton}"/>

<!--The image on this button will come through.-->
<Button Style="{DynamicResource AddButton}"/>

</UserControl>

I would expect that the the plus sign image would come through on both buttons, instead of just the last button in the xaml code. Any help would be appreciated.

Solution

  • The IconPacks control inside your style will be only created once. You can use the IconPacks control inside the ControlTemplate and bind to the content which is the enum value to avoid this issue:

    <Style x:Key="AddButton"
    BasedOn="{StaticResource CircularControlButtonBase}"
    TargetType="Button">

    <Setter Property="ToolTip" Value="Add"/>
    <Setter Property="Content" Value="{x:Static iconPacks:PackIconMaterialKind.Plus}"/>

    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <iconPacks:PackIconMaterial Width="20" Height="20" Kind="{Binding}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>

</Style>

<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal">
    <Button Style="{DynamicResource AddButton}"/>
    <Button Style="{DynamicResource AddButton}"/>
    <Button Style="{DynamicResource AddButton}"/>
</StackPanel>

    Namespace are:

    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
xmlns:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"

    enter image description here