WPF - 如何使用模板创建图像按钮
Posted
技术标签:
【中文标题】WPF - 如何使用模板创建图像按钮【英文标题】:WPF - How to create image button with template 【发布时间】:2010-11-18 17:08:59 【问题描述】:我正在尝试创建一个包含 3 个图像的按钮:一个正常图像、一个按下图像和一个禁用图像(我将使用这些图像创建上/下箭头按钮)。
我相信正确的方法是从Button
派生并使用Template
并设置触发器来更改图像。我有 3 个依赖属性,每个图像一个。
图像将是 .png 并具有透明背景(因为它们不是矩形)。
我在 MFC 中寻找类似 @987654323@ 的东西。
【问题讨论】:
【参考方案1】:您不需要依赖属性,因为您继承自 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();
【讨论】:
没错。实际上,从 Button 继承是多余的。您可以使用此模板和应用它的样式来做所有事情。这里的规则应该是如果你需要改变行为、继承和控制。如果您需要更改“外观”,请使用样式。 感谢您的回复。这就是我一直在寻找的。span> 谢谢。这是唯一对我有用的图像按钮解决方案。我什至添加了一个“悬停”触发器,Major Kudos! 当我尝试添加按钮模板时,它显示错误,因为找不到按钮的可附加属性 如何将图像 src 作为参数传递,以便我可以将此解决方案用于不同的按钮,谢谢【参考方案2】:我提供了这个解决方案的替代方案,它的重量不是很轻,但它提供了更高的可重用性。
WPF TriState Image Button
【讨论】:
【参考方案3】: 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>
【讨论】:
【参考方案4】:试试这段代码
<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>
【讨论】:
【参考方案5】: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;
【讨论】:
问题清楚地表明他们需要一个带有模板的图像按钮。 photoshop 按钮不构成任何类型的模板,除了您不需要处理 MouseEnter 和 MouseLeave 事件来更改光标之外,您还拥有 Cursor 属性。还有一点,不要以为正常的光标是箭头,可能是别的东西,可以把Cursor设置为null就可以恢复正常了。以上是关于WPF - 如何使用模板创建图像按钮的主要内容,如果未能解决你的问题,请参考以下文章