WPF: ;可重复使用的图像按钮模板
本文关键字:图像 按钮 #160 WPF | 更新日期: 2023-09-27 18:29:28
我的WPF项目使用了很多图像按钮,但由于我没有找到正确的方法(每次都必须编写相同的触发器和样式,唯一的区别是图像源),我的资源字典变得很长。有更好的方法吗?
以下是我用于按钮的样式示例:
<Style x:Key="ButtonStyle" TargetType="{x:Type Button}">
<!-- Some setters -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Image Source="Images.png" Stretch="Fill"/>
</Grid>
<ControlTemplate.Triggers>
<!-- Some triggers ( IsFocused, IsMouseOver, etc.) -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
谢谢:)
最简单的方法是创建具有Image
属性的特定控件:
public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof (ImageButton),
new FrameworkPropertyMetadata(typeof (ImageButton)));
}
public ImageSource Image
{
get { return (ImageSource)GetValue(ImageProperty); }
set { SetValue(ImageProperty, value); }
}
public static readonly DependencyProperty ImageProperty =
DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(default(ImageSource)));
}
然后,您只需在generic.xaml中为其创建一个样式,并绑定到Image
属性,而不是显式设置图像:
<Style x:Key="{x:Type my:ImageButton}" TargetType="{x:Type my:ImageButton}">
<!-- Some setters -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type my:ImageButton}">
<Grid>
<Image Source="{TemplateBinding Image}" Stretch="Fill"/>
</Grid>
<ControlTemplate.Triggers>
<!-- Some triggers ( IsFocused, IsMouseOver, etc.) -->
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
然后你可以这样使用它:
<my:ImageButton Image="Image.png" />
如果按钮的不同状态需要更多的图像,可以向控件添加更多的依赖属性。
另一种可能的方法是使用我所说的"参数化样式",以避免创建特定的控件;有关详细信息,请参阅此博客文章。
您可以尝试创建一个从Button继承的自定义控件,并将其用作模板中的TargetType。然后您可以在图像源中使用TemplateBinding。
<Image Source="{TemplateBinding ImageSource}" Stretch="Fill"/>
您需要在自定义控件中创建ImageSource属性。这样,您可以在xaml中设置源,但只需要一个资源模板。
您可以像这样使用BasedOn属性:
<Style x:Key="BlueHighlightedButtonStyle" BasedOn="{StaticResource ButtonStyle}" TargetType="Button">
<Setter Property="Background" Value="DeepSkyBlue"/>
</Style>
这将使按钮样式具有与您的按钮样式相同的属性,但具有DeepSkyBlue背景。