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背景样式

一个Panl里循环出N个Button,然后选中其中一个Button,它的样式就改变,其他都是默认样式。Button是有事件的,是重新跳转到本页面并传一个参数的。幹嘛不直接在客戶端用JS來做呢我是会重新...
  • djn547
  • djn547
  • 2010年11月15日 22:23
  • 663

设置Button样式

- (void)changeButtonGrayStyle:(UIButton *)button {     button.layer.borderColor = [UIColor lightGra...
  • cola_wh
  • cola_wh
  • 2016年07月06日 13:25
  • 410

Javascript动态改变按钮样式

 主要用到button的onmouseover, onmouseout ,onclick事件,鼠标移到按钮上,按钮的透明度发生改变,移出按钮透明度恢复。点击按钮,被点击按钮背景色改变,点击下一按钮该按...
  • ecren
  • ecren
  • 2007年04月07日 10:44
  • 2992

CSS实现鼠标滑过按钮更改按钮样式

CSS实现鼠标滑过按钮更改按钮样式,方便简单: .btn {     cursor:pointer;     border:1px solid #2b87c8;     border-rad...
  • john320
  • john320
  • 2015年12月16日 14:12
  • 2889

<小程序>修改button组件的样式

适用场景: 1.使用button的loading作为无限加载控件 2.将页内的分享按钮做成图片按钮 其实button在小程序中有不少好的样式,完全可以转换成我们想用的适用场景按钮,只需要修改cs...
  • xcookies
  • xcookies
  • 2017年07月22日 11:04
  • 1260

用css改变button的样式-几款漂亮的样式

button的样子也可以优化优化滴,使其更加漂亮起来。.btn {   BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP:...
  • ancky_zhang
  • ancky_zhang
  • 2010年05月26日 16:19
  • 11696

[前端] js点击按钮改变样式

有时候我们希望实现点击按钮并切换样式的效果,一个简单的方法是链接到另一个页面,但是,在有些情况下,我们不希望这么做,因为我们改变的只是页面的很小一部分,我们没有必要为了这一小部分而刷新整个界面。另外,...
  • ZJU_fish1996
  • ZJU_fish1996
  • 2016年07月20日 17:20
  • 14368

dojo之Button篇

1、设计关键 (1)设置Button背景图片 (2)设计Button点击事件 2、设计步骤 (1)设置Button背景图片       A、样式设置 .btnIcon{ w...
  • you23hai45
  • you23hai45
  • 2014年01月04日 22:55
  • 1497

用css样式修改input控件和button控件

input中的text submit button等和单独button控件可以用css修改外观 eg: .item_submit { background-color:re...
  • kbx8916
  • kbx8916
  • 2017年01月22日 15:43
  • 286

修改安卓默认的系统button样式,以及其它系统控件的默认样式

先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下:public Button(Context context, Attribute...
  • Liuqz2009
  • Liuqz2009
  • 2017年05月10日 15:33
  • 1418
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Button改变样式
举报原因:
原因补充:

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