WPF按鈕不同的圖像爲一種風格

Question

我不明白爲什麼圖像不顯示。我想要一種風格的不同按鈕圖像。 我試圖將按鈕圖像設置爲按鈕樣式中的圖像刷，但隨後我將在所有按鈕上只顯示一張圖片。

<Button 
    Height="64" Width="64" Margin="0,0,50,50" 
    Style="{DynamicResource MyButtonStyle}" VerticalAlignment="Bottom" 
    HorizontalAlignment="Right"> 
    <Image Source="image1.png"/> 
</Button> 
<Button 
    Height="64" Width="64" Margin="0,0,125,50" 
    Style="{DynamicResource MyButtonStyle}" VerticalAlignment="Bottom" 
    HorizontalAlignment="Right"> 
    <Image Source="image2.png"/> 
</Button> 

按鈕風格

<Style x:Key="MyButtonStyle" TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Grid> 
        <Rectangle x:Name="rectangle" Stroke="Black" /> 
       </Grid> 
       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Opacity" TargetName="rectangle" Value="0.8"/> 
         <Setter Property="Stroke" TargetName="rectangle" Value="#FF478CFB"/> 
        </Trigger> 
        <Trigger Property="IsPressed" Value="True"> 
         <Setter Property="OpacityMask" TargetName="rectangle" Value="{x:Null}"/> 
         <Setter Property="Effect" TargetName="rectangle"> 
          <Setter.Value> 
           <BlurEffect/> 
          </Setter.Value> 
         </Setter> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 1

你的風格缺少ContentPresenter。因此，當你設置的圖像作爲Button它無處的Content使用樣式的ControlTemplate

因此，像這樣的時候居然把它：

注意 - 我已經改變了你的Grid爲Border，從而得到擺脫Rectangle嵌入式內，並添加ContentPresenter爲Border

<Style x:Key="MyButtonStyle" 
     TargetType="{x:Type Button}"> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="{x:Type Button}"> 
     <Border x:Name="rectangle"> 
      <ContentPresenter /> 
     </Border> 
     <ControlTemplate.Triggers> 
      <Trigger Property="IsMouseOver" 
        Value="True"> 
      <Setter TargetName="rectangle" 
        Property="Opacity" 
        Value="0.8" /> 
      <Setter TargetName="rectangle" 
        Property="BorderBrush" 
        Value="#FF478CFB" /> 
      </Trigger> 
      <Trigger Property="IsPressed" 
        Value="True"> 
      <Setter TargetName="rectangle" 
        Property="OpacityMask" 
        Value="{x:Null}" /> 
      <Setter TargetName="rectangle" 
        Property="Effect"> 
       <Setter.Value> 
       <BlurEffect /> 
       </Setter.Value> 
      </Setter> 
      </Trigger> 
     </ControlTemplate.Triggers> 
     </ControlTemplate> 
    </Setter.Value> 
    </Setter> 
</Style> 

用法的孩子：

和您一樣 -

<Button 
    Height="64" Width="64" Margin="0,0,125,50" 
    Style="{DynamicResource MyButtonStyle}" VerticalAlignment="Bottom" 
    HorizontalAlignment="Right"> 
    <Image Source="image2.png"/> 
</Button>