WPF - 將按鈕轉換爲樣式

Question

我在窗口中創建了一個按鈕。爲了更容易的使用，我想將按鈕轉換爲樣式。

窗口文件

<Button x:Name="btn_CustomButton" 
          HorizontalAlignment="Stretch" 
          VerticalAlignment="Top" 
          Padding="0,10,0,7" 
          HorizontalContentAlignment="Stretch" 
          BorderBrush="{x:Null}" 
          Background="#FF2E2E2E" 
          Margin="0,0,0,1"> 
         <Grid> 
          <Grid.ColumnDefinitions> 
           <ColumnDefinition Width="*"/> 
           <ColumnDefinition Width="3*"/> 
          </Grid.ColumnDefinitions> 

          <Image Grid.Column="0" Source="UIExplorer_64x.png" Margin="10,0,0,0" Stretch="UniformToFill" /> 
          <Label Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,2" FontSize="18" Foreground="#FFD6D6D6" Padding="0" >btn_CustomButton</Label> 
         </Grid> 
        </Button> 

我嘗試的風格按鈕：

<Style x:Key="NavigationButton" TargetType="{x:Type Button}"> 
    <Setter Property="OverridesDefaultStyle" Value="True"/> 
    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="HorizontalAlignment" Value="Stretch" /> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    <Setter Property="Background" Value="#FF2E2E2E" /> 
    <Setter Property="Padding" Value="0,10,0,7"/> 
    <Setter Property="Margin" Value="0,0,0,1"/> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid Width="{TemplateBinding Width}"> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="3*"/> 
         </Grid.ColumnDefinitions> 

         <Image Grid.Column="0" Source="UIExplorer_64x.png" Margin="10,0,0,0" Stretch="UniformToFill" /> 
         <Label Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="10,0,0,2" FontSize="18" Foreground="#FFD6D6D6" Padding="0" >btn_CustomButton</Label> 
        </Grid> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

的問題是，風格似乎忽略像背景顏色，以及填充某些屬性。

它應該是什麼樣子：

什麼它看起來象：

很難看出差別，但風格實際上忽略了背景色。

而且，我怎麼能發送圖像路徑按鈕，這樣我可以用

<button Style="{StaticResource NavigationButton}" 
    Content="Text" 
    ImageSource="someImage.png" /> 

由於我是新學習WPF的造型，任何幫助表示讚賞:)

Answer 1

你不」 t需要在樣式中設置OverridesDefaultStyle，因爲設置ControlTemplate會這樣做。這就是整個問題。

<Style x:Key="NavigationButton" TargetType="{x:Type Button}"> 
    <Setter Property="SnapsToDevicePixels" Value="True" /> 
    <Setter Property="HorizontalAlignment" Value="Stretch" /> 
    <Setter Property="HorizontalContentAlignment" Value="Stretch" /> 
    <Setter Property="Background" Value="#FF2E2E2E" /> 
    <Setter Property="Padding" Value="0,10,0,7"/> 
    <Setter Property="Margin" Value="0,0,0,1"/> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border Background="{TemplateBinding Background}" 
         BorderThickness="{TemplateBinding BorderThickness}" 
         BorderBrush="{TemplateBinding BorderBrush}" 
         Padding="{TempalteBinding Padding}" 
         Margin="{TemplateBinding Margin}"> 
        <Grid Width="{TemplateBinding Width}"> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="*"/> 
          <ColumnDefinition Width="3*"/> 
         </Grid.ColumnDefinitions> 

         <Image Grid.Column="0" 
           Source="UIExplorer_64x.png" 
           Margin="10,0,0,0" 
           Stretch="UniformToFill" /> 
         <Label Grid.Column="1" 
           HorizontalAlignment="Left" 
           VerticalAlignment="Center" 
           Margin="10,0,0,2" 
           FontSize="18" 
           Foreground="#FFD6D6D6" 
           Padding="0"> 
          btn_CustomButton 
         </Label> 
        </Grid> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

這應該讓你更接近你要找的東西。您正在爲控件定義模板，在這種情況下爲按鈕。這意味着你正在拋棄所有的屬性設置並自己設置它們。你從一張白紙開始，這就是爲什麼你失去了所有其他默認設置。所以如果你想這樣做，你必須願意添加你想要的視覺風格 - 你希望用戶看到的每一個屬性。