綁定到樣式內的依賴項屬性

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，這難道不是還有問題？

自定義按鈕.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>

自定義按鈕.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;
    }
}

圖標.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);
}

在控制模板中：

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