原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样。想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色、背景图切换。
需求:RadioButton开关按钮,点击后切换自身按钮的背景图片。
MyRadioButton.xaml
<ResourceDictionary x:Class="HomeDecorationPSD.Presentation.Style.MyRadioButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:HomeDecorationPSD.Presentation.Style"
mc:Ignorable="d">
<ResourceDictionary.MergedDictionaries>
<!-- 引入颜色字符串 -->
<ResourceDictionary Source="/Presentation/Resources/ColorResources.xaml" />
</ResourceDictionary.MergedDictionaries>
<Style x:Key="myRadioButton" TargetType="{x:Type RadioButton}">
<Setter Property="BorderThickness" Value="0"></Setter>
<Setter Property="Width" Value="80"></Setter>
<Setter Property="Height" Value="30"></Setter>
<Setter Property="Foreground" Value="{StaticResource LightGreyColor}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type RadioButton}">
<Grid x:Name="grid" VerticalAlignment="Center">
<Border x:Name="border" BorderThickness="1" BorderBrush="{StaticResource LightGreyColor}" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"
HorizontalAlignment="Center" Background="#E9E9E9" Padding="5,0,0,0">
<ContentPresenter Content="{TemplateBinding Content}" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
<!-- 触发器:设置字体的颜色 -->
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="true">
<Setter Property="Foreground" Value="{StaticResource SoftRedColor}"/> <!-- 被引入的颜色字符串 -->
<Setter TargetName="border" Property="Background">
<Setter.Value>
<ImageBrush ImageSource="/HomeDecorationPSD;component/Presentation/Resources/Images/down_arrow_selected.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="IsChecked" Value="false">
<Setter Property="Foreground" Value="{StaticResource LightGreyColor}"/>
<Setter TargetName="border" Property="Background"> <!-- 必须指明TargetName -->
<Setter.Value>
<ImageBrush ImageSource="/HomeDecorationPSD;component/Presentation/Resources/Images/down_arrow.png" Stretch="Fill"/>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
ControlTemplate必须使用一个Border包裹。
在Trigger中给按钮设置文字颜色时,使用Foreground不需要指明TargetName,但是给背景设置图片时,必须要指明TargetName,否则无效果。(非常坑爹,运行无报错,能看到文字变色,不能看到背景图)