首页 > 代码库 > Style样式
Style样式
最重要的两个元素 ：setter Trigger
Style中的Setter
setter是用来设置属性值的
<Style TargetType="{x:Type TextBox}">
<Setter Property="BorderThickness" Value="http://www.mamicode.com/1"/>
<Setter Property="KeyboardNavigation.TabNavigation" Value="http://www.mamicode.com/None"/>
<Setter Property="HorizontalContentAlignment" Value="http://www.mamicode.com/Left"/>
<Setter Property="FocusVisualStyle" Value="http://www.mamicode.com/{x:Null}"/>
<Setter Property="AllowDrop" Value="http://www.mamicode.com/true"/>
<Setter Property="ScrollViewer.PanningMode" Value="http://www.mamicode.com/VerticalFirst"/>
<Setter Property="Stylus.IsFlicksEnabled" Value="http://www.mamicode.com/False"/>
</Style>
上面的样式是应用 于所有textbox,若某个不想使用，则可以使用
<TextBox x:Name="textBox" Style="{x:Null}"/>
设置ControlTemplate
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TextBox}">
<Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="True">
<ScrollViewer x:Name="PART_ContentHost" Focusable="false" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden"/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="http://www.mamicode.com/false">
<Setter Property="Opacity" TargetName="border" Value="http://www.mamicode.com/0.56"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="http://www.mamicode.com/true">
<Setter Property="BorderBrush" TargetName="border" Value="http://www.mamicode.com/{StaticResource TextBox.MouseOver.Border}"/>
</Trigger>
<Trigger Property="IsKeyboardFocused" Value="http://www.mamicode.com/true">
<Setter Property="BorderBrush" TargetName="border" Value="http://www.mamicode.com/{StaticResource TextBox.Focus.Border}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
Style中的Trigger
当控件的某些属性的值一但符合某些条件就会触发该 触发器。
如当checkbox选中时字体加大和变颜色
<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
<Style.Triggers>
<Trigger Property="IsChecked" Value="http://www.mamicode.com/true">
<Trigger.Setters>
<Setter Property="FontSize" Value="http://www.mamicode.com/24"></Setter>
<Setter Property="Foreground" Value="http://www.mamicode.com/Red"></Setter>
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
当需要多个条件都满足时
<Style x:Key="CheckBoxStyle1" TargetType="{x:Type CheckBox}">
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsChecked" Value="http://www.mamicode.com/true"></Condition>
<Condition Property="Content" Value="http://www.mamicode.com/123"></Condition>
</MultiTrigger.Conditions>
<MultiTrigger.Setters>
<Setter Property="FontSize" Value="http://www.mamicode.com/24"></Setter>
<Setter Property="Foreground" Value="http://www.mamicode.com/Red"></Setter>
</MultiTrigger.Setters>
</MultiTrigger>
</Style.Triggers>
</Style>
由数据触发的DataTrigger.
当自身的输入长度为7时改变大小和颜色
<local:LenConvert x:Key="lc"></local:LenConvert>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Text.Length,Converter={StaticResource lc}}" Value="http://www.mamicode.com/true">
<Setter Property="FontSize" Value="http://www.mamicode.com/24"></Setter>
<Setter Property="Foreground" Value="http://www.mamicode.com/red"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
public class LenConvert : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
var len = (int)value;
return len==7;
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
多个数据条件觖发MultiDataTrigger
<Application.Resources>
<local:LenConvert x:Key="lc"></local:LenConvert>
<local:Student x:Key="st" Name="gc" Age="110"></local:Student>
<Style TargetType="{x:Type TextBox}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition Binding="{Binding Age}" Value="110"></Condition>
<Condition Binding="{Binding Name}" Value="gc"></Condition>
</MultiDataTrigger.Conditions>
<MultiDataTrigger.Setters>
<Setter Property="FontSize" Value="http://www.mamicode.com/24"></Setter>
</MultiDataTrigger.Setters>
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Application.Resources>
<TextBox x:Name="textBox" DataContext="{StaticResource st}" />
由事件触发的EventTrigger
不是由属性或数据变化触发的，被触发后也并非应用一组Setter，而是执行一段动画，UI的动画效果往往与EventTrigger相关。
如下例子鼠标移动到按钮上面就变化，移走就变正常
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<EventTrigger RoutedEvent="MouseEnter">
<!--鼠标在上面事件-->
<BeginStoryboard>
<Storyboard>
<DoubleAnimation To="150" Duration="0:0:0.2" Storyboard.TargetProperty="Width"></DoubleAnimation>
<DoubleAnimation To="50" Duration="0:0:0.2" Storyboard.TargetProperty="Height"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="MouseLeave">
<!--鼠标移走事件-->
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Width"></DoubleAnimation>
<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="Height"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Style.Triggers>
</Style>
<Button x:Name="button" Content="Button" Width="40" Height="60" />
button必须初如width和height，显式写出来，否则会报异常
Style样式