Question

我需要一个具有自定义样式的按钮，我想在上面放一个图像。

所以我用ControlTemlate制作了CustomButton样式，其中包含用于文本的TextBlock的StackPanel和用于图像的Rectangle，我想从我的Icons.xaml使用DrawingImage，它将SVG转换为XAML。

我还制作了CustomButton类，它是从常规Button类派生的，并且具有DrawingImageProperty，它是依赖项属性。

在我看来，我想使用DrawingImage属性创建此按钮，然后以我的样式绑定到此属性，如下所示：

<controls:CustomButton DrawingImage="{StaticResource Add}" Content="Add" Style="{StaticResource CustomButton}" />

但不幸的是，按钮图像丢失了。我不确定要绑定到样式中的依赖项属性，也不确定类型，因为DrawingBrush的Drawing属性的类型为Drawing，但是在我的Icons.xaml资源中我具有DrawingImage，不能吗还有问题吗？

CustomButton.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="clr-namespace:Torch.Controls">
    <Style x:Key="CustomButton" TargetType="{x:Type controls:CustomButton}">
        <Setter Property="Foreground" Value="{StaticResource IconicWhiteBrush}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type controls:CustomButton}">
                    <Border
                        Name="Border"
                        Background="{StaticResource IconicBlueLittleDarkBrush}"
                        BorderBrush="{StaticResource IconicBlackBrush}"
                        BorderThickness="1">
                        <StackPanel Orientation="Horizontal">
                            <Rectangle Width="20" Height="20">
                                <Rectangle.Fill>
                                    <DrawingBrush Drawing="{TemplateBinding DrawingImage}" />
                                </Rectangle.Fill>
                            </Rectangle>
                            <TextBlock
                                Margin="0,0,5,0"
                                VerticalAlignment="Center"
                                Text="{TemplateBinding Content}" />
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

CustomButton.cs

public class CustomButton : Button
{
    public static readonly DependencyProperty DrawingImageProperty =
        DependencyProperty.Register("DrawingImage", typeof(DrawingImage), typeof(CustomButton),
            new FrameworkPropertyMetadata(OnDrawingImageChanged));

    public DrawingImage DrawingImage
    {
        get => (DrawingImage)GetValue(DrawingImageProperty);
        set => SetValue(DrawingImageProperty, value);
    }

    private static void OnDrawingImageChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ((CustomButton)d).DrawingImage = (DrawingImage)e.NewValue;
    }
}

Icons.xaml

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <DrawingImage x:Key="Add">
        <DrawingImage.Drawing>
            <DrawingGroup ClipGeometry="M0,0 V24 H24 V0 H0 Z">
                <GeometryDrawing Brush="#FF00ACC1" Geometry="F1 M24,24z M0,0z M19,13L13,13 13,19 11,19 11,13 5,13 5,11 11,11 11,5 13,5 13,11 19,11 19,13z" />
            </DrawingGroup>
        </DrawingImage.Drawing>
    </DrawingImage>
</ResourceDictionary>

谢谢。

Answer 1

DrawingImage不是绘图，因此

Drawing="{TemplateBinding DrawingImage}"

无法工作。请改用Image元素，并绑定其Source属性。

<Image Source="{TemplateBinding DrawingImage}"/>

除此之外，OnDrawingImageChanged回调是毫无意义的。它将一个值分配给它已经拥有的属性。您可以安全地删除它。

我还将使用ImageSource而不是DrawingImage作为依赖项属性的类型。您可以更灵活地使用它，还可以分配其他图像类型，例如BitmapImage。

public static readonly DependencyProperty ImageProperty =
    DependencyProperty.Register(nameof(Image), typeof(ImageSource), typeof(CustomButton));

public ImageSource Image
{
    get => (ImageSource)GetValue(ImageProperty);
    set => SetValue(ImageProperty, value);
}

在ControlTemplate中：

<Image Source="{TemplateBinding Image}"/>

绑定到样式内的依赖项属性

1 个答案: