mvvm框架搭建之---View中资源字典和控件关联的常见方式

一、说明

1）本文讲述wpf中控件的Style属性资源的自定义

2) wpf中的Style作用是为了设计多种外观形式和动作行为。构成Style的最重要的两种元素是setter和trigger。Setter类帮助我们设置控件的静态外观风格，Trigger类则帮助我们设置控件的行为风格。

3）控件的Style属性资源一般有属性、方法、事件类

4）定义好控件的Style属性资源后,在窗体资源字典中声明,然后可以绑定到Xaml中具体的控件

二、使用方法

1）方式1:Style中Setter的使用:首先在Windows的资源字典中放置一个针对某类控件(比如TextBlock)的Style,Style中再用若干Setter来设置TextBlock的一些属性,这样程序中的TextBlock就会拥有统一的风格，除非在某个TextBlock控件中用{x:null}清空它的style样式。
a)设置资源 :   (x:代表当前文件类。 设置textBlock文本的字体)

       <Style x:Key="txtBlockStyle" TargetType="TextBlock">
            <Style.Setters>
                <Setter Property="FontSize" Value="18"></Setter>
                <Setter Property="FontWeight" Value="Bold"></Setter>
            </Style.Setters>
        </Style>

      <Style x:Key="txtBlockStyle" TargetType="{x：Type TextBox}">
            <Style.Setters>
                <Setter Property="FontSize" Value="18"></Setter>
                <Setter Property="FontWeight" Value="Bold"></Setter>
            </Style.Setters>
        </Style>

b)设置控件Style：默认为资源字典中的风格。

 <TextBlock Text="悄悄的我走了" x:Name="txtBlock1" Width="150" Height="25" TextAlignment="Left" Canvas.Left="20" Canvas.Top="10" Style="{DynamicResource txtBlockStyle}"></TextBlock>
 <TextBlock Text="正如我悄悄的来" x:Name="txtBlock2" Width="150" Height="25" TextAlignment="Center" Canvas.Left="160" Canvas.Top="10" Style="{x：null}" ></TextBlock>

c) Setter设置器,Setter类的Property属性用来指明为目标的哪个属性赋值,Setter类的Value属性则是提供的属性值

2)Style中的Trigger:当满足条件会触发一个行为,比较像事件,一般是由用户操作触发的。触发器有事件型的触发器EventTrigger、数据变化触发型的Trigger/DataTrigger、多条件触发型的MultiTrigger/MultiDataTrigger等。Style中Trigger触发器的使用:首先在Windows的资源字典(Windows.Resources)中放置一个针对某类控件(比如checkbox)的style,运用Style.Trigger类中的Property、Value、Setter属性,在控件的某些属性值满足条件时,设置其他的属性行为值,这样程序中的这类控件就拥有统一的行为风格。

a) Trigger类也有Property和Value两个属性,Property是关注的的属性名称,Value是触发条件。Trigger类还有一个Setters属性,此属性值是一组Setter,触发条件满足时,这组Setter的"属性--值"就会被应用。

b）鼠标移动到Label控件和离开Label控件,触发字体变化事件

  <Style TargetType="Label" x:Key="labelStyle">
            <Style.Triggers>
                <EventTrigger RoutedEvent="MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="FontSize" To="18"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>

                <EventTrigger RoutedEvent="MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Duration="0:0:0.2" Storyboard.TargetProperty="FontSize" To="13"></DoubleAnimation>
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>

c) CheckBox控件选中和鼠标移动到对应内容上后,触发事件字体颜色改变

    <Style TargetType="CheckBox" x:Key="checkboxStyle">
            <Style.Triggers>
                <Trigger Property="IsChecked" Value="True">
                    <Setter Property="FontSize"  Value="20"></Setter>
                    <Setter Property="Foreground" Value="OrangeRed"></Setter>
                </Trigger>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="FontSize" Value="20"></Setter>
                    <Setter Property="Foreground" Value="Green"></Setter>
                </Trigger>
            </Style.Triggers>
        </Style>

d) MultiTigger必须多个条件同时成立时才会被触发。MultiTrigger比Trigger多了个Conditions属性,需要同时成立的条件就存储在这个集合中。当鼠标停留在该控件上,且光标处于focus状态时触发事件。

 <Style TargetType="TextBox" x:Key="txtBoxMultiTriggerStyle">
            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="true"></Condition>
                        <Condition Property="IsFocused" Value="true"></Condition>
                    </MultiTrigger.Conditions>
                    <Setter Property="Background" Value="GreenYellow"></Setter>
                    <Setter Property="BorderThickness"  Value="2"></Setter>
                </MultiTrigger>
            </Style.Triggers>
        </Style>

e) DataTrigger数据触发。DataTrigger对象的Binding属性会把数据传送过来,值与属性一致时,DataTrigger即被触发。首先在View引用转换函数Converter的命名空间,然后在DataTrigger中绑定对象的相关属性,转换器绑定到本地定义的转换函数，value属性值设置为当转换函数返回值一致时期望触发的值。最后Setter类设置触发后相关属性的值得改变。

  *ConvertViewModel.cs 转换方法代码:

    public class ConverterViewModel : IValueConverter, INotifyPropertyChanged, System.Collections.Specialized.INotifyCollectionChanged
    {
        //
        // 摘要:
        //     转换值。
        //
        // 参数:
        //   value:
        //     绑定源生成的值。
        //
        //   targetType:
        //     绑定目标属性的类型。
        //
        //   parameter:
        //     要使用的转换器参数。
        //
        //   culture:
        //     要用在转换器中的区域性。
        //
        // 返回结果:
        //     转换后的值。 如果该方法返回 null，则使用有效的 null 值。

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
        {
            int length = (int)value.ToString().Length;
            return length > 6 ? true : false;
        }
}

 *View的UI代码:textBlock控件中输入字符串的长度小于6则控件边框变粗,为红色

    <local1:ConverterViewModel x:Key="L2Bconver"></local1:ConverterViewModel>

        <Style TargetType="{x:Type TextBox}" x:Key="txtBoxStyle">
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={x:Static RelativeSource.Self},Path=Text,Converter={StaticResource L2Bconver}}" Value="false">
                    <Setter Property="BorderBrush" Value="Red"></Setter>
                    <Setter Property="BorderThickness" Value="3"></Setter>
                </DataTrigger>
            </Style.Triggers>
        </Style>

三 总结

     WPF控件的Style属性可以设计控件的静态(外观)和动态(动作方法)属性,通过设定的属性值满足条件来改变其它属性,控件属性设计方便,只需编辑View中的代码。