Button改变样式

原创 2015年07月09日 14:57:48

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里一般要制定特定的控件,这也是因为当父级与子级都有的属性时,必须要指定吧


   

相关文章推荐

微信小程序中多个button/view组件中进行切换时改变样式

微信小程序中多个button/view组件中进行切换时改变样式开发具体教程:

小程序的button样式改变及点击态样式

小程序的button改变与其type属性有关,其默认的是哪个三个属性是:default’, ‘primary’, ‘warn’,其中default’是可修改颜色的属性,而primary是写死的蓝色,w...

50个CSS超炫丽button样式代码下载

  • 2013年01月30日 16:48
  • 240KB
  • 下载

FLEX中自定义button样式

相册     广场     登录     注册 关注此空间 起跑线 与你齐飞... 2010-08-09 13:20 FLEX中自定义button样式 首先我们要知...
  • wxljmy
  • wxljmy
  • 2013年04月27日 16:42
  • 1038

自定义button样式,圆角按钮

  • 2015年10月22日 10:21
  • 1.78MB
  • 下载

重定义extjs中button被点击后的样式

1. var btn = new Ext.Button({text:'ddd'}); btn.on('',function(b){     b.addClass('newCSS'); }); ...
  • zhx624
  • zhx624
  • 2012年06月27日 11:22
  • 6356

漂亮的button样式

  • 2010年12月27日 15:44
  • 246KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Button改变样式
举报原因:
原因补充:

(最多只允许输入30个字)