属性为 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 名称进行硬编码

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

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

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

例如，除了“主页”图像之外，还有另一个“后退”图像，我将在主窗口中声明两个按钮，如下所示：

<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 添加到网格资源中，然后以相同的方式将其使用到另一个按钮中。