WPF C# RadioButton单选图标按钮
程序员文章站
2022-07-14 13:15:22
...
有一组单选按钮,选中不同的按钮切换到不同功能。按钮通过矢量图显示,当选中按钮变暗,先看一下效果:
单选按钮需要增加几个依赖属性:CornerRadius,Icon,IconWidth,IconHeight。
public class IconButton : RadioButton
{
public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
}
public static readonly DependencyProperty CornerRadiusProperty =
DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(IconButton), new PropertyMetadata(null));
/// <summary>
/// 图标
/// </summary>
public Geometry Icon
{
get { return (Geometry)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register("Icon", typeof(Geometry), typeof(IconButton), new PropertyMetadata(null));
/// <summary>
/// 图标宽度
/// </summary>
public double IconWidth
{
get { return (double)GetValue(IconWidthProperty); }
set { SetValue(IconWidthProperty, value); }
}
public static readonly DependencyProperty IconWidthProperty =
DependencyProperty.Register("IconWidth", typeof(double), typeof(IconButton), new PropertyMetadata(12.0));
/// <summary>
/// 图标高度
/// </summary>
public double IconHeight
{
get { return (double)GetValue(IconHeightProperty); }
set { SetValue(IconHeightProperty, value); }
}
public static readonly DependencyProperty IconHeightProperty =
DependencyProperty.Register("IconHeight", typeof(double), typeof(IconButton), new PropertyMetadata(12.0));
}
依赖属性类设计完,需要在样式中把这些属性绑定。
<Style TargetType="{x:Type local:IconButton}">
<Setter Property="Width" Value="28" />
<Setter Property="Height" Value="24" />
<Setter Property="BorderThickness" Value="1,1,1,1" />
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type local:IconButton}">
<Border
x:Name="bg"
Background="White"
BorderBrush="#E5E5E5"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
UseLayoutRounding="True">
<Path
x:Name="Content"
Width="{TemplateBinding IconWidth}"
Height="{TemplateBinding IconHeight}"
Data="{TemplateBinding Icon}"
Fill="#888888"
Stretch="Fill"
UseLayoutRounding="True" />
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsMouseOver" Value="True" />
<Condition Property="IsMouseOver" Value="True" />
</MultiTrigger.Conditions>
</MultiTrigger>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="bg" Property="Background" Value="{StaticResource ButtonHighlightBackColor}" />
<Setter TargetName="bg" Property="BorderThickness" Value="0" />
<Setter TargetName="Content" Property="Fill" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
继承类和样式都写好了,直接在代码中调用就行了。