属性为 StaticResource 的自定义按钮

Question

我正在尝试实现以下目标：在自定义按钮中使用 svg 图像。

为了做到这一点，我创建了一个自定义按钮：

public class MainButton : Button
{
    static MainButton()
    {
      DefaultStyleKeyProperty.OverrideMetadata(typeof(MainButton),
          new FrameworkPropertyMetadata(typeof(MainButton)));
    }

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

    public static readonly DependencyProperty TextProperty =
         DependencyProperty.Register("Text", typeof(string), typeof(MainButton),
             new UIPropertyMetadata(""));

    public object Image
    {
        get { return (object)GetValue(ImageProperty); }
        set { SetValue(ImageProperty, value); }
    }

    public static readonly DependencyProperty ImageProperty =
        DependencyProperty.Register("Image", typeof(object), typeof(MainButton),
            new UIPropertyMetadata(""));
}

我拿了一个 svg 文件，在 inkscape 中打开它并保存为 xaml 文件。

我打开 Themes.xaml 并将创建的 xaml 图像添加为 ControlTemplate

<ControlTemplate x:Key="Home">
    <Viewbox Stretch="Uniform">
        <Canvas .....
        </Canvas>
    </Viewbox>
</ControlTemplate>

而按钮样式是：

Style TargetType="{x:Type local:MainButton}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type local:MainButton}">
          <Canvas x:Name="sp" Width="80" 
                    Height="80">

            <StackPanel Canvas.Top="12"
                  Canvas.Left="0"
                  Canvas.ZIndex="2"
                  Width="80">

                <ContentControl x:Name="Img" Template="{StaticResource Home}" />

            </StackPanel>

            <StackPanel x:Name="spText" Canvas.Top="45"
                           Canvas.Left="1" 
                           Canvas.ZIndex="1"
                           Width="80">

                <TextBlock x:Name="Txt" Text="{Binding Path=(local:MainButton.Text),
                                RelativeSource ={RelativeSource FindAncestor,
                                AncestorType ={x:Type Button}}}"
                            VerticalAlignment="Center"
                            HorizontalAlignment="Center"
                            Foreground="White"
                            FontSize="14"/>
            </StackPanel>
...

如您所见，我已经硬编码了 StaticResource 名称 <ContentControl x:Name="Img" Template="{StaticResource Home}" />

我希望能够与此模板上的属性 Image 进行绑定，例如

<ContentControl x:Name="Img" Template="{StaticResource {???Binding Image???}}" />

这样我就可以将按钮的 Image 属性设置为我想要的 StaticResource 的名称。

例如，在“主页”图像旁边，另一个“返回”我将在 MainWindow 中有两个按钮，声明如下：

<MyControls:MainButton Text="Go Home!" Image="Home" />
<MyControls:MainButton Text="Go Back!" Image="Back" />

欢迎采纳任何建议。感谢您的时间。

Answer 1

您无需创建自定义按钮即可获得相同的结果。例如，在下面的代码中，我在网格资源中创建了一个图像，然后在按钮的内容中使用它。

<Grid>
    <Grid.Resources>
        <DrawingImage x:Key="Home">
            <DrawingImage.Drawing>
                <DrawingGroup>
                    <DrawingGroup.Children>
                        <GeometryDrawing Brush="#FFFFFFFF" Geometry="F1 M 0,20L 30,20L 30,40L 0,40 Z ">
                            <GeometryDrawing.Pen>
                                <Pen Thickness="2" LineJoin="Round" Brush="#FF000000"/>
                            </GeometryDrawing.Pen>
                        </GeometryDrawing>
                    </DrawingGroup.Children>
                </DrawingGroup>
            </DrawingImage.Drawing>
        </DrawingImage>
    </Grid.Resources>

    <Button>
        <StackPanel Orientation="Horizontal">
            <Image Source="{StaticResource ResourceKey=Home}" />
            <TextBlock Text="Hello!" />
        </StackPanel>
    </Button>
</Grid>

要添加更多图像，您只需将另一个 DrawingImage 添加到网格资源中，然后以相同的方式将其用于另一个按钮。