WPF自定义控件与样式(2)-自定义按钮FButton
2015-11-30 11:19
686 查看
原文:WPF自定义控件与样式(2)-自定义按钮FButton一.前言.效果图
申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
还是先看看效果图吧:
View Code
2.3 FButton基本样式
样式定义代码:
基本按钮的效果,参考(一.前言-效果图),示例代码:
2.4 FButton透明背景样式
背景透明效果的按钮样式
示例及效果:
![](http://images2015.cnblogs.com/blog/151257/201511/151257-20151112232435025-2029135029.gif)
2.3 类似LinkButton(超链接)样式
样式定义:
示例及效果:
![](http://images2015.cnblogs.com/blog/151257/201511/151257-20151112233301181-1609107028.gif)
附录:参考引用
WPF自定义控件与样式(1)-矢量字体图标(iconfont)
版权所有,文章来源:http://www.cnblogs.com/anding
个人能力有限,本文内容仅供学习、探讨,欢迎指正、交流。
申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接。
还是先看看效果图吧:
<!--FButton模板--> <ControlTemplate x:Key="FButton_Template" TargetType="{x:Type local:FButton}"> <Border x:Name="border" Background="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Background}" Height="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Height}" CornerRadius="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=CornerRadius}" Width="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Width}"> <!--Icon/Text--> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"> <TextBlock x:Name="icon" Margin="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FIconMargin}" RenderTransformOrigin="0.5,0.5" Style="{StaticResource FIcon}" Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIcon}" FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= FIconSize}" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path= Foreground}"> <TextBlock.RenderTransform> <RotateTransform x:Name="transIcon" Angle="0"/> </TextBlock.RenderTransform> </TextBlock> <TextBlock VerticalAlignment="Center" x:Name="txt" TextDecorations="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=ContentDecorations}" Text="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Content}" FontSize="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=FontSize}" Foreground="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=Foreground}"></TextBlock> </StackPanel> </Border> <!--触发器--> <ControlTemplate.Triggers> <!--设置鼠标进入时的背景、前景样式--> <Trigger Property="IsMouseOver" Value="True"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=MouseOverBackground}" TargetName="border" /> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=MouseOverForeground}" TargetName="icon"/> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=MouseOverForeground}" TargetName="txt"/> </Trigger> <!--Ficon的动画触发器--> <MultiTrigger> <MultiTrigger.Conditions> <Condition Property="IsMouseOver" Value="true"></Condition> <Condition Property="AllowsAnimation" Value="true"></Condition> </MultiTrigger.Conditions> <MultiTrigger.EnterActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="180" Duration="0:0:0.2" /> </Storyboard> </BeginStoryboard> </MultiTrigger.EnterActions> <MultiTrigger.ExitActions> <BeginStoryboard> <Storyboard> <DoubleAnimation Storyboard.TargetName="transIcon" Storyboard.TargetProperty="Angle" To="0" Duration="0:0:0.2" /> </Storyboard> </BeginStoryboard> </MultiTrigger.ExitActions> </MultiTrigger> <!--鼠标按下时的前景、背景样式--> <Trigger Property="IsPressed" Value="True"> <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=PressedBackground}" TargetName="border" /> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=PressedForeground}" TargetName="icon"/> <Setter Property="Foreground" Value="{Binding RelativeSource={RelativeSource Mode=TemplatedParent}, Path=PressedForeground}" TargetName="txt"/> </Trigger> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Opacity" Value="0.5" TargetName="border"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate>
View Code
2.3 FButton基本样式
样式定义代码:
<!--默认样式--> <Style TargetType="{x:Type local:FButton}"> <Setter Property="Background" Value="{StaticResource ButtonBackground}" /> <Setter Property="Foreground" Value="{StaticResource ButtonForeground}" /> <Setter Property="MouseOverBackground" Value="{StaticResource ButtonMouseOverBackground}" /> <Setter Property="MouseOverForeground" Value="{StaticResource ButtonMouseOverForeground}" /> <Setter Property="PressedBackground" Value="{StaticResource ButtonPressedBackground}" /> <Setter Property="PressedForeground" Value="{StaticResource ButtonPressedForeground}" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="Width" Value="100" /> <Setter Property="Height" Value="30" /> <Setter Property="FontSize" Value="13" /> <Setter Property="CornerRadius" Value="0" /> <Setter Property="FIconSize" Value="22" /> <Setter Property="Template" Value="{StaticResource FButton_Template}"/> <Setter Property="Padding" Value="3,1,3,1" /> <Setter Property="Content" Value="{x:Null}" /> <Setter Property="FIconMargin" Value="0,0,5,0" /> <Setter Property="AllowsAnimation" Value="False" /> </Style>
基本按钮的效果,参考(一.前言-效果图),示例代码:
<StackPanel > <core:FButton FIcon="" Margin="3">系统换转</core:FButton> <core:FButton FIcon="" Margin="3" Width="140" Height="40" Background="#771C79" MouseOverBackground="#F20BA0" Click="FButton_Click" >WaitingBox</core:FButton> <core:FButton FIcon="" Margin="3" Width="140" Height="40" Background="#12B512" IsDefault="True" MouseOverBackground="#08EE08" Click="FButton_Click_WindowBase">WindowBase</core:FButton> <core:FButton FIcon="" Margin="5,0,0,0" CornerRadius="16,0,0,16" AllowsAnimation="True" Click="FButton_Click_Info">Info</core:FButton> <core:FButton FIcon="" CornerRadius="0" Click="FButton_Click_Question">Question</core:FButton> <core:FButton FIcon="" CornerRadius="0" Click="FButton_Click_Warning">Warining</core:FButton> <core:FButton FIcon="" CornerRadius="0,16,16,0" AllowsAnimation="True" Click="FButton_Click_Error">Error</core:FButton> </StackPanel>
2.4 FButton透明背景样式
背景透明效果的按钮样式
<!--背景透明的FButton样式--> <Style x:Key="FButton_Transparency" TargetType="{x:Type local:FButton}"> <Setter Property="Background" Value="Transparent" /> <Setter Property="MouseOverBackground" Value="Transparent" /> <Setter Property="PressedBackground" Value="Transparent" /> <Setter Property="Foreground" Value="{StaticResource TextForeground}" /> <Setter Property="MouseOverForeground" Value="{StaticResource MouseOverForeground}" /> <Setter Property="PressedForeground" Value="{StaticResource PressedForeground}" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="Height" Value="Auto" /> <Setter Property="Width" Value="Auto" /> <Setter Property="CornerRadius" Value="0" /> <Setter Property="FontSize" Value="13" /> <Setter Property="FIconSize" Value="20" /> <Setter Property="Template" Value="{StaticResource FButton_Template}"/> <Setter Property="Padding" Value="3,1,3,1" /> <Setter Property="Content" Value="{x:Null}" /> <Setter Property="FIconMargin" Value="0,0,2,0" /> <Setter Property="AllowsAnimation" Value="False" /> <Setter Property="Cursor" Value="Hand" /> </Style>
示例及效果:
<core:FButton FIcon="" Margin="5" FIconMargin="0" FIconSize="30" Style="{StaticResource FButton_Transparency}" ></core:FButton> <core:FButton FIcon="" Margin="5" Style="{StaticResource FButton_Transparency}"></core:FButton> <core:FButton FIcon="" Margin="5" Style="{StaticResource FButton_Transparency}" IsEnabled="False"></core:FButton> <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}">如何开启调试模式?</core:FButton> <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}" IsEnabled="False">设备检测</core:FButton> <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_Transparency}">爸爸回来了</core:FButton>
![](http://images2015.cnblogs.com/blog/151257/201511/151257-20151112232435025-2029135029.gif)
2.3 类似LinkButton(超链接)样式
样式定义:
<!--LinkButton的FButton样式,默认无FIcon--> <Style x:Key="FButton_LinkButton" TargetType="{x:Type local:FButton}"> <Setter Property="Background" Value="Transparent" /> <Setter Property="MouseOverBackground" Value="Transparent" /> <Setter Property="PressedBackground" Value="Transparent" /> <Setter Property="Foreground" Value="{StaticResource LinkForeground}" /> <Setter Property="MouseOverForeground" Value="{StaticResource MouseOverForeground}" /> <Setter Property="PressedForeground" Value="{StaticResource PressedForeground}" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="Height" Value="Auto" /> <Setter Property="Width" Value="Auto" /> <Setter Property="CornerRadius" Value="0" /> <Setter Property="FontSize" Value="13" /> <Setter Property="FIconSize" Value="20" /> <Setter Property="Template" Value="{StaticResource FButton_Template}"/> <Setter Property="Padding" Value="3,1,3,1" /> <Setter Property="Content" Value="{x:Null}" /> <Setter Property="FIconMargin" Value="0" /> <Setter Property="FIcon" Value="" /> <Setter Property="AllowsAnimation" Value="False" /> <Setter Property="ContentDecorations" Value="Underline" /> <Setter Property="Cursor" Value="Hand" /> </Style>
示例及效果:
<core:FButton Margin="3,15" Style="{StaticResource FButton_LinkButton}" >如何开启调试模式?</core:FButton> <core:FButton FIcon="" Margin="3" Style="{StaticResource FButton_LinkButton}">设备检测</core:FButton> <core:FButton Margin="3" Style="{StaticResource FButton_LinkButton}">爸爸回来了</core:FButton>
![](http://images2015.cnblogs.com/blog/151257/201511/151257-20151112233301181-1609107028.gif)
附录:参考引用
WPF自定义控件与样式(1)-矢量字体图标(iconfont)
版权所有,文章来源:http://www.cnblogs.com/anding
个人能力有限,本文内容仅供学习、探讨,欢迎指正、交流。
相关文章推荐
- WPF自定义控件与样式(1)-矢量字体图标(iconfont)
- LESS CSS 框架简介
- css书写规范及顺序
- WPF自定义控件与样式(11)-等待/忙/正在加载状态-控件实现
- CSS基础知识
- 不懂CSS的后端难道就不是好程序猿?
- css3 media媒体查询器用法总结
- css定位
- CSS 简介
- CSS 简介
- 响应式布局
- background-CSS属性记
- CSS样式与选择器
- 天猫消息盒子的CSS实现
- 原生JS编写图片切换效果和点击按钮的样式变化
- css基础学习
- CSS-文本垂直居中
- Div+CSS总结
- css之自动换行
- CSS HACK 兼容列表 Firefox, IE5, IE5.5, IE6, IE7, IE8