WPF按钮为一种风格的不同图像

时间:2013-04-17 14:21:50

标签: wpf data-binding

我不明白为什么不显示图像。我想要一种风格的不同按钮图像。 我尝试按钮样式将按钮图像设置为图像画笔,但是我将在所有按钮上只有一张图片。

<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>

1 个答案:

答案 0 :(得分:0)

您的风格缺失ContentPresenter。因此,当您将图片设置为Content的{​​{1}}时,在使用您的Style Button

时,无法实际放置它

这样的事情:

注意 - 我已将您的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>