Style样式

最重要的两个元素 ：setter  Trigger

 Style中的Setter

setter是用来设置属性值的

         <Style TargetType="{x:Type TextBox}"> 

            <Setter Property="BorderThickness" Value="1"/>

            <Setter Property="KeyboardNavigation.TabNavigation" Value="None"/>

            <Setter Property="HorizontalContentAlignment" Value="Left"/>

            <Setter Property="FocusVisualStyle" Value="{x:Null}"/>

            <Setter Property="AllowDrop" Value="true"/>

            <Setter Property="ScrollViewer.PanningMode" Value="VerticalFirst"/>

            <Setter Property="Stylus.IsFlicksEnabled" Value="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="false">

                                <Setter Property="Opacity" TargetName="border" Value="0.56"/>

                            </Trigger>

                            <Trigger Property="IsMouseOver" Value="true">

                                <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource TextBox.MouseOver.Border}"/>

                            </Trigger>

                            <Trigger Property="IsKeyboardFocused" Value="true">

                                <Setter Property="BorderBrush" TargetName="border" Value="{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="true">

                    <Trigger.Setters>

                        <Setter Property="FontSize" Value="24"></Setter>

                        <Setter Property="Foreground"  Value="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="true"></Condition>

                        <Condition Property="Content" Value="123"></Condition>

                    </MultiTrigger.Conditions>

                    <MultiTrigger.Setters>

                        <Setter Property="FontSize" Value="24"></Setter>

                        <Setter Property="Foreground"  Value="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="true">

                    <Setter Property="FontSize" Value="24"></Setter>

                    <Setter Property="Foreground" Value="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="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，显式写出来，否则会报异常