WPF 中自定义控件的默认样式
本文关键字:默认 样式 自定义控件 WPF | 更新日期: 2023-09-27 18:36:12
我想在WPF中设计一个灵活的图像按钮。
首先,我在命名空间"图像按钮"中创建一个 WPF 自定义控件库,如下所示:
namespace ImageButton
{
public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}
#region DisplayMode
[System.ComponentModel.Category("ImageButton")]
public ImageDisplayMode DisplayMode
{
get { return (ImageDisplayMode)GetValue(DisplayModeProperty); }
set { SetValue(DisplayModeProperty, value); }
}
public static readonly DependencyProperty DisplayModeProperty =
DependencyProperty.Register("DisplayMode", typeof(ImageDisplayMode), typeof(ImageButton), new FrameworkPropertyMetadata(ImageDisplayMode.ImageAboveText), displaymodevalidate);
public static bool displaymodevalidate(object value)
{
return value is ImageDisplayMode;
}
#endregion
}
}
在命名空间"ImageButton"中,我定义了一个名为"ImageDisplayMode"的枚举,如下所示:
public enum ImageDisplayMode
{
ImageAboveText = 1,
TextAboveImage = 2,
ImageBeforeText = 3,
TextBeforeImage = 4
}
和 Generic.xaml 文件修改如下:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:ImageButton">
<Style x:Name="style1" TargetType="{x:Type local:ImageButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:ImageButton}">
<Button Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.ColumnSpan="2" Name="img1" Width="{TemplateBinding ImageWidth}" Stretch="{TemplateBinding ImageStretch}" Height="{TemplateBinding ImageHeight}" Source="{TemplateBinding Image}"/>
<TextBlock Grid.ColumnSpan="2" Grid.Row="1" Name="lbl1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Text}"/>
</Grid>
</Button>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
上图代码的结果如下图所示:
[图片]
发短信
我想要:当我更改图像按钮的"显示模式"属性的值时,对于每个可能的值,控件更改为以下形式:
1-------------------------------------
[图片]
发短信
阿拉伯数字-------------------------------------
发短信
[图片]
3-------------------------------------
[图片]发短信
4--------------------------------------
文本[图片]
我想,我必须在 Generic.xaml 代码中的网格中定义触发器,如下所示:
<Grid.Triggers>
<Trigger Property="DisplayMode" Value="2">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
</Grid.Triggers>
请告诉我:
我该怎么做?
谢谢
将触发器添加到您的样式中(即 <Style.Triggers>...</Style.Triggers>
)。
即像这样:
<Style.Triggers>
<Trigger Property="DisplayMode" Value="2">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
</Style.Triggers>
谢谢fmunkert ...
我将触发器移动到 ControlTemplate.Triggers 并将 Trigger.Value 从"2"更改为"ImageAboveText"(我的自定义枚举项之一),如下所示:
编辑前:
<Trigger Property="DisplayMode" Value="2">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
编辑后:
<Trigger Property="DisplayMode" Value="ImageAboveText">
<Setter Property="Grid.Row" TargetName="lbl1" Value="0"/>
<Setter Property="Grid.Row" TargetName="img1" Value="1"/>
</Trigger>
我的问题成功解决了....
谢谢。