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>