WPF - 如何使用模板创建图像按钮

Question

WPF - 如何使用模板创建图像按钮

wpfimagetemplatesbutton

31

我正在尝试创建一个带有3个图像的按钮：正常图像、按下图像和禁用图像（我将使用它们来创建上/下箭头按钮）。

我认为正确的方法是继承自Button并使用一个Template，然后设置触发器以更改图像。我有3个依赖属性，分别对应每个图像。

这些图像将是.png格式，并且具有透明背景（因为它们不是矩形的）。

我正在寻找类似于MFC中的CBitmapButton的东西。

- Craig Wooldridge

5个回答

1

 public static readonly DependencyProperty DefaultImageSourceProperty = DependencyProperty.Register("DefaultImageSource", typeof(ImageSource), typeof(PressedImageButton), new PropertyMetadata(null, new PropertyChangedCallback(DefaultImageSourceChangedCallback)));
    public static readonly DependencyProperty PressedImageSourceProperty = DependencyProperty.Register("PressedImageSource", typeof(ImageSource), typeof(PressedImageButton), new PropertyMetadata(null, new PropertyChangedCallback(PressedImageSourceChangedCallback)));
    public static readonly DependencyProperty ImageStretchProperty = DependencyProperty.Register("ImageStretch", typeof(Stretch), typeof(PressedImageButton), new PropertyMetadata(Stretch.None, new PropertyChangedCallback(ImageStretchChangedCallback)));

   <ControlTemplate>
        <Grid>
            <Image Name="imgDefault" Source="{Binding Path=DefaultImageSource,ElementName=uc}" Stretch="{Binding Path=ImageStretch,ElementName=uc}"></Image>
            <ContentPresenter Content="{TemplateBinding Property=ContentControl.Content}" />
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="Button.IsPressed" Value="True">
                <Setter Property="Image.Source" TargetName="imgDefault" Value="{Binding Path=PressedImageSource,ElementName=uc}"></Setter>
                <Setter Property="UIElement.Effect">
                    <Setter.Value>
                        <DropShadowEffect BlurRadius="10" Color="Black" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                    </Setter.Value>
                </Setter>
            </Trigger>
            <Trigger Property="Button.IsMouseOver" Value="True">
                <Setter Property="UIElement.Effect">
                    <Setter.Value>
                        <DropShadowEffect BlurRadius="10" Color="White" Direction="0" Opacity="0.6" RenderingBias="Performance" ShadowDepth="0" />
                    </Setter.Value>
                </Setter>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>

- tning

1

我提供了一种替代方案，虽然它不太轻量级，但它提供了更大的可重用性。

WPF TriState Image Button

- PJUK

-1

只需尝试此代码即可

    <Button Name="btn_Refresh" Grid.Column="0" Height="25" Width="25" HorizontalAlignment="Right" VerticalAlignment="Center" Background="White" Margin="0,0,10,0" Click="btn_Refresh_Click">
                        <Button.Content>
                            <Grid>
                                <Path Width="15" Height="15" Fill="Blue" Stretch="Fill" Data="F1 M 38,20.5833C 42.9908,20.5833 47.4912,22.6825 50.6667,26.046L 50.6667,17.4167L 55.4166,22.1667L 55.4167,34.8333L 42.75,34.8333L 38,30.0833L 46.8512,30.0833C 44.6768,27.6539 41.517,26.125 38,26.125C 31.9785,26.125 27.0037,30.6068 26.2296,36.4167L 20.6543,36.4167C 21.4543,27.5397 28.9148,20.5833 38,20.5833 Z M 38,49.875C 44.0215,49.875 48.9963,45.3932 49.7703,39.5833L 55.3457,39.5833C 54.5457,48.4603 47.0852,55.4167 38,55.4167C 33.0092,55.4167 28.5088,53.3175 25.3333,49.954L 25.3333,58.5833L 20.5833,53.8333L 20.5833,41.1667L 33.25,41.1667L 38,45.9167L 29.1487,45.9167C 31.3231,48.3461 34.483,49.875 38,49.875 Z " Margin="-8.3,-2,-5.701,0"/>
                            </Grid>
                        </Button.Content>
                    </Button>

- Joee

-3

WPF 中的简单方法：

使用Photoshop或其他程式创建一个按钮图像。

将其放置在窗口上并利用 MouseEnter 和 MouseLeave 事件。

private void img1_MouseEnter(object sender, MouseEventArgs e)
{
    Cursor = Cursors.Hand;
}

private void img1_MouseLeave(object sender, MouseEventArgs e)
{
    Cursor = Cursors.Arrow;
}

- Ilan

2

问题明确说明他们需要一个带有模板的图像按钮。Photoshop按钮不构成任何类型的模板，而且您不需要处理MouseEnter和MouseLeave事件来更改光标，因为您有Cursor属性可以使用。还有一件事，不要假设正常光标是箭头，它可能是其他东西，您可以将光标设置为null以返回正常状态。 - Hannish

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Charlie · Accepted Answer

由于你继承了 Button，所以不需要使用依赖属性。你已经拥有了 IsPressed 和 IsEnabled 属性。实际上，这就是你所需要的：

<Button x:Class="TestWpfApplication.ThreeStateImageButton"
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
   <Button.Template>
      <ControlTemplate TargetType="{x:Type Button}">
         <Grid>
            <Image Name="Normal" Source="Resources/Normal.png"/>
            <Image Name="Pressed" Source="Resources/Pressed.png" Visibility="Hidden"/>
            <Image Name="Disabled" Source="Resources/Disabled.png" Visibility="Hidden"/>
         </Grid>
         <ControlTemplate.Triggers>
            <Trigger Property="IsPressed" Value="True">
               <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
               <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
               <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
               <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
            </Trigger>
         </ControlTemplate.Triggers>
      </ControlTemplate>
   </Button.Template>
</Button>

使用您的UserControl代码后台文件：

public partial class ThreeStateImageButton : Button
{
   public ThreeStateImageButton()
   {
      InitializeComponent();
   }
}