属性为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 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> 
... 

正如你可以看到我已经硬编码的静态资源名称<ContentControl x:Name="Img" Template="{StaticResource Home}" />

我希望能够与该模板上的属性绑定，像

<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到网格资源，然后使用它以同样的方式到另一个按钮。