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???}}" />

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

例如，在“Home”图像旁边，另一个“Back”我会在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添加到网格资源中，然后以相同的方式将其用于另一个按钮。

自定义按钮，属性为StaticResource

1 个答案: