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

时间:2019-02-11 22:34:09

标签: xaml mahapps.metro

我有一系列按钮样式(添加,编辑,删除等),它们使用了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代码中的最后一个按钮。任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:0)

样式中的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"

enter image description here