屬性爲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到網格資源，然後使用它以同樣的方式到另一個按鈕。