Question

我正在开发一个WPF应用程序，其中包含许多按钮，这些按钮需要包含一些文本以及可能的图标。我希望这些按钮具有一致的样式，但可以更改文本和/或图标。我正在使用Mahapps.Metro进行样式设计，并使用Mahapps.Metro.IconPacks库进行图标设计。这是我在应用程序中为每个按钮复制的内容：

<Button Padding="15 5" 
    Margin="5 5 30 5"
    Command="{Binding AcceptCommand}" 
    FontSize="14"
    Style="{StaticResource CustomAccentedSquareButtonStyle}"
    Grid.Column="2">
<StackPanel Orientation="Horizontal">
    <TextBlock Text="Test"
               Margin="0 0 5 0"
               x:Name="TestTextBlock"/>
    <Rectangle Width="12" Height="12" 
               Fill="{Binding ElementName=TestTextBlock, Path=Foreground}">
        <Rectangle.OpacityMask>
            <VisualBrush Visual="{StaticResource appbar_check}" Stretch="Fill" />
        </Rectangle.OpacityMask>
    </Rectangle>
</StackPanel>

和CustomAccentedSquareButtonStyle：

<Style TargetType="{x:Type Button}" BasedOn="{StaticResource AccentedSquareButtonStyle}"
       x:Key="CustomAccentedSquareButtonStyle">
    <Setter Property="BorderBrush" Value="{DynamicResource AccentColorBrush2}"/>
    <Setter Property="controls:ControlsHelper.ContentCharacterCasing" Value="Normal"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="{DynamicResource AccentColorBrush3}"/>
        </Trigger>
    </Style.Triggers>
</Style>

因此，我决定尝试制作一个具有某些依赖项属性的自定义按钮，而不是在各处Button复制相同的代码：

public class CustomButton : Button
{

    public Canvas Icon
    {
        get { return (Canvas)GetValue(IconProperty); }
        set { SetValue(IconProperty, value); }
    }

    public static readonly DependencyProperty IconProperty =
        DependencyProperty.Register("Icon", typeof(Canvas), typeof(CustomButton), new PropertyMetadata(defaultValue: null));

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(CustomButton), new PropertyMetadata(defaultValue: null));


    public int IconWidth
    {
        get { return (int)GetValue(IconWidthProperty); }
        set { SetValue(IconWidthProperty, value); }
    }

    public static readonly DependencyProperty IconWidthProperty =
        DependencyProperty.Register("IconWidth", typeof(int), typeof(CustomButton), new PropertyMetadata(0));

    public int IconHeight
    {
        get { return (int)GetValue(IconHeightProperty); }
        set { SetValue(IconHeightProperty, value); }
    }

    public static readonly DependencyProperty IconHeightProperty =
        DependencyProperty.Register("IconHeight", typeof(int), typeof(CustomButton), new PropertyMetadata(0));

}

以及我的自定义Button的样式：

<Style TargetType="{x:Type customControls:CustomButton}" BasedOn="{StaticResource CustomAccentedSquareButtonStyle}">
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="Margin" Value="5"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type customControls:CustomButton}">
                <customControls:CustomButton Style="{StaticResource CustomAccentedSquareButtonStyle}"
                                                  Padding="15 5">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{TemplateBinding Text}"
                                   Margin="0 0 5 0"/>
                        <Rectangle Width="{TemplateBinding IconWidth}" 
                                   Height="{TemplateBinding IconHeight}" 
                                   Fill="{TemplateBinding Foreground}">
                            <Rectangle.OpacityMask>
                                <VisualBrush Visual="{TemplateBinding Icon}" 
                                             Stretch="Fill" />
                            </Rectangle.OpacityMask>
                        </Rectangle>
                    </StackPanel>
                </customControls:CustomButton>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

...然后最终使用xaml中的按钮：

<customControls:CustomButton Command="{Binding TestCommand}"
                              Text="Test" 
                              Icon="{StaticResource appbar_people}"
                              IconWidth="15"
                              IconHeight="15"
                              Grid.Column="1"/>

问题：该图标未显示。文本正在显示，因此设置依赖项属性Text并在我的ControlTemplate中将其用于按钮样式显然是可行的。我究竟做错了什么？谢谢！

无法在自定义按钮控件中显示图标

0 个答案: