您的位置:首页 > Web前端 > CSS

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里一般要制定特定的控件,这也是因为当父级与子级都有的属性时,必须要指定吧
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: