【WPF】XAML实现按钮背景图片的点击切换
2017-01-09 19:22
1331 查看
原因:要做一组搜索结果的排序按钮(类似一组RadioButton),效果像下图这样。想法是使用原生的按钮控件,将文字左对齐,整个按钮背景是一张图片,通过样式Trigger控制字体变色、背景图切换。
需求:RadioButton开关按钮,点击后切换自身按钮的背景图片。
MyRadioButton.xaml
坑点:
ControlTemplate必须使用一个Border包裹。
在Trigger中给按钮设置文字颜色时,使用Foreground不需要指明TargetName,但是给背景设置图片时,必须要指明TargetName,否则无效果。(非常坑爹,运行无报错,能看到文字变色,不能看到背景图)
需求: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,否则无效果。(非常坑爹,运行无报错,能看到文字变色,不能看到背景图)
相关文章推荐
- RadioGroup 中按钮背景图片点击切换用选择器实现
- Android_UI_点击按钮切换背景效果实现
- 【Android 界面效果3】Android_UI_点击按钮切换背景效果实现
- 基于jquery实现左右按钮点击的图片切换效果
- Android 点击按钮实现来回切换背景图和文字
- 怎么实现点击屏幕背景图片的某一区域,切换另一张屏幕背景?没分了,希望大家帮帮我这个菜鸟!
- iOS之点击按钮切换背景图片
- 【Android 界面效果3】Android_UI_点击按钮切换背景效果实现
- 利用JS实现点击按钮后图片自动切换的简单方法
- 利用JS实现点击按钮后图片自动切换
- android 点击按钮切换背景图片(根据按钮点击的ID切换)
- android图片按钮点击变灰变量效果实现(一张背景图实现效果)
- Android_UI_点击按钮切换背景效果实现
- 利用JS实现点击按钮后图片自动切换的简单方法
- Android_UI_点击按钮切换背景效果实现
- Android 图片实现按钮点击切换效果
- 无js实现点击图片切换背景css3
- Android 图片实现按钮点击切换效果
- 类型为image的input标签,鼠标点击切换按钮背景图片
- 设置按钮点击切换背景图片