在单个UserControl中使用相同的MahApps按钮样式两次不起作用

Question

我有一系列按钮样式（添加，编辑，删除等），它们使用MahApps Metro圆形按钮样式，但将特定图像应用于按钮样式。当我在UserControl中仅使用任何一种样式时，它们工作得很好，我从样式中得到了预期的外观。但是，当我在一个UserControl中多次使用这些样式时，只有一个样式实例表现得很好，其他样式会丢弃我期望看到的图像。

我已经尝试命名特定的控件实例（如果它是某种生命周期管理问题）使用样式来查看这是否可以解决问题，但事实并非如此。我也尝试创建多个使用相同样式属性的按钮，但不使用样式，DID工作和按钮显示正确，但我不想走那条路，因为这会破坏样式的目的。

下面是我定义按钮样式的资源字典的代码。请注意，我只显示了添加按钮的样式，因为其他基本上完全相同，我只是更改图像类型和工具提示。这就是我用来定义大部分样式属性的圆形按钮基础的原因。

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

而且我使用这样的风格。

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

我希望加号图像会在两个按钮上出现，而不仅仅是xaml代码中的最后一个按钮。任何帮助，将不胜感激。

Answer 1

您的样式中的IconPacks控件将仅创建一次。您可以使用ControlTemplate中的IconPacks控件并绑定到作为枚举值的内容以避免此问题：

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

命名空间是：

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