Wpf按鈕與圖像 - 使用風格/模板

Question

我想爲我的Wpf應用程序有一個圖像按鈕。起初，我對我找到的這個答案很滿意（WPF Button with Image）。

但是，現在我想製作一個樣式/模板出來，所以我不需要一遍又一遍地寫同樣的東西。

最接近我能得到是這樣的形象：

Image showing the three buttons i got so far

問題是：（！好像有什麼），我已經失去了背景。我已經試圖用矩形回到背景，但是，該按鈕沒有動畫 - 沒有鼠標懸停或點擊不同的顏色。似乎通過使用模板我擦除了所有...

這不是我想要的。 我想簡單地設置一個模板，並具有所有默認顏色/動畫。

這是迄今爲止我的XAML：

<Style x:Key="btnSave" TargetType="{x:Type Button}"> 
    <Setter Property="Width" Value="100"></Setter> 
    <Setter Property="Height" Value="25"></Setter> 
    <Setter Property="Margin" Value="5"></Setter> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <StackPanel Orientation="Horizontal"> 
        <Image Source="/Resources/save.png"></Image> 

        <ContentPresenter HorizontalAlignment="Center" 
             VerticalAlignment="Center"/> 
       </StackPanel> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

我想要的是簡單地使用它作爲：

<Button Style="{StaticResource btnSave}">Save File</Button> 

，並與圖像和默認的顏色/動畫按鈕。

有沒有簡單的方法來做到這一點？到目前爲止，我不想混淆觸發器，我發現的所有鏈接都試圖教導如何製作完整的自定義按鈕。

Answer 1

簡單：使用ContentTemplate，它僅模擬Button的內容區域，而不是整體。 Button支持，因爲它從ContentControl繼承。幾乎所有WPF中的Content屬性都支持完全相同的事情。

的DataTemplate在那裏有控制的Content財產的DataContext，所以你{Binding}綁定Content簡單。而且我冒昧地給圖片留下了一點右邊距，所以它不會碰到常規的按鈕內容。

<Style x:Key="btnSave" TargetType="{x:Type Button}"> 
    <Setter Property="Width" Value="100"></Setter> 
    <Setter Property="Height" Value="25"></Setter> 
    <Setter Property="Margin" Value="5"></Setter> 
    <Setter Property="ContentTemplate"> 
     <Setter.Value> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Image 
         VerticalAlignment="Center" 
         Source="/Resources/save.png" 
         Margin="0,0,8,0" 
         /> 

        <ContentControl 
         Content="{Binding}" 
         VerticalAlignment="Center" 
         /> 
       </StackPanel> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 2

如果你想保持默認Button模板，唯一有點裝飾它的內容，最好的辦法是，以方便Button.ContentTemplate財產。由於它是一個依賴屬性，它可以被設置爲風格/綁定/等。下面是它怎麼會看你的情況：

<Style x:Key="btnSave" TargetType="{x:Type Button}"> 
    <Setter Property="Width" Value="100"></Setter> 
    <Setter Property="Height" Value="25"></Setter> 
    <Setter Property="Margin" Value="5"></Setter> 
    <Setter Property="ContentTemplate"> 
     <Setter.Value> 
      <DataTemplate> 
       <StackPanel Orientation="Horizontal"> 
        <Image Source="/Resources/save.png"></Image> 
        <ContentPresenter Content="{Binding}" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center"/> 
       </StackPanel> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

唯一的區別是您使用DataTemplate而不是ControlTemplate，你需要在模板中的ContentPresenter.Content屬性綁定。請注意，在這種情況下，我們將對象模板化爲Button.Content的值，因此綁定沒有指定路徑。