Button改变样式
2015-07-09 14:57
507 查看
1.效果图
默认效果鼠标移上去
点击
2.样式
<Style x:Key="ButtonStyle1" TargetType="{x:Type Button}"> <Setter Property="Background" Value="{StaticResource ButtonNormalBackground}" /> <Setter Property="BorderBrush" Value="red" /> <Setter Property="BorderThickness" Value="0" /> <Setter Property="Foreground" Value="white" /> <Setter Property="FontSize" Value="20" /> <Setter Property="FontWeight" Value="Bold" /> <Setter Property="FontFamily" Value="Yahei" /> <Setter Property="HorizontalContentAlignment" Value="Center" /> <Setter Property="VerticalContentAlignment" Value="Center" /> <Setter Property="Padding" Value="2" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Button}"> <!-- <Microsoft_Windows_Themes:ButtonChrome x:Name="Chrome" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}" RenderMouseOver="{TemplateBinding IsMouseOver}" RenderPressed="{TemplateBinding IsPressed}" RenderDefaulted="{TemplateBinding IsDefaulted}" SnapsToDevicePixels="true"> </Microsoft_Windows_Themes:ButtonChrome> --> <Grid> <Ellipse x:Name="border" Fill="lightYellow" Stroke="{TemplateBinding BorderBrush}"> <Ellipse.Effect> <DropShadowEffect /> </Ellipse.Effect> </Ellipse> <TextBlock Margin="{TemplateBinding Margin}" HorizontalAlignment="center" VerticalAlignment="Center" x:Name="tb" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" FontWeight="{TemplateBinding FontWeight}" Text="{TemplateBinding Content}" /> </Grid> <ControlTemplate.Triggers> <!-- <Trigger Property="IsKeyboardFocused" Value="true"> <Setter Property="RenderDefaulted" TargetName="Chrome" Value="true"/> </Trigger> <Trigger Property="ToggleButton.IsChecked" Value="true"> <Setter Property="RenderPressed" TargetName="Chrome" Value="true"/> </Trigger> --> <Trigger Property="IsEnabled" Value="false"> <Setter Property="Foreground" Value="#ADADAD" /> </Trigger> <Trigger Property="IsMouseOver" Value="true"> <Setter TargetName="border" Property="Stroke" Value="red" /> <Setter TargetName="tb" Property="Foreground" Value="red" /> </Trigger> <Trigger Property="IsMouseOver" Value="false"> <Setter TargetName="border" Property="Stroke" Value="lightBlue" /> <Setter TargetName="tb" Property="Foreground" Value="black" /> </Trigger> <Trigger Property="IsFocused" Value="true"> <Setter Property="Foreground" Value="red" /> </Trigger> <Trigger Property="IsFocused" Value="false"> <Setter Property="Foreground" Value="Black" /> </Trigger> <Trigger Property="IsPressed" Value="True"> <Setter TargetName="border" Property="Fill" Value="Orange" /> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
3.总结
以前写trigger总是没有效果,比如IsMouseOver,现在才了解,其Setter里一般要制定特定的控件,这也是因为当父级与子级都有的属性时,必须要指定吧相关文章推荐
- CSS3 经典教程系列:CSS3 线性渐变(linear-gradient)
- 在CSS中,BOX的Padding属性的数值赋予顺序为
- CSS中id和class的区别
- wpf Combobox没有黑三角,鼠标移上去改变样式
- Web前端从入门到精通-5 css简介——css概述和选择器
- CSS word-spacing 属性
- css3选择器
- css3-制作渐变
- css3-变形transforms
- css3-过渡transtition
- css自定义字体(图标)-有些图标不要在P图了
- css3实现网页平滑过渡效果
- 纯CSS绘制mac代码
- css3使用transform属性制作js弹性运动
- 纯CSS打造银色MacBook Air(完整版)
- magento 手机自适应 瀑布流 混合样式
- css3 webkit-box的用法
- css杂记
- 【猪猪-前端】收集了30个div+css后台模板,方便大家日常开发使用,简洁易用一贯原则。
- Dialog样式的Activity