通知公告
样式资源(MPF实例教程第十课)
日期:2015-12-17  发布人:admin  浏览量:364

   前面课程其实我们一直在接触样式(Style),在第四课简单说了下其用法,这一课我们详细说明样式的写法、构成以及一些遵循的规则,在MPF中样式也是一种资源,只不过样式引用了其它类型的资源。

  这里我们必须明白,控件元素的属性值其实就是某种类型的资源,比如如下的Window的定义:

         <Window Width="281" … >

  其中的属性Width的值是281,是一个Integer(整型)类型,这里只是在控件元素的属性节点简化设置而已,其实,我们也可以先在资源字典(资源字典后面课程再介绍,这里仅仅知道其就是一系列资源的集合而已)中先定义这个资源:

    <Integer x:Key="windowWidth" Value="281" />

    然后我们对其进行引用:

    <Window Width="{StaticResource windowWidth}" … >

  如果属性值需要动态改变最好以资源方式来定义,然后通过静态或动态引用资源,这种方式比较灵活。

    下面我们看看样式(Style)的构成:

    <Style TargetType="Button" >

       属性列表

       <Style.Triggers>

          <Trigger 触发条件>

             属性列表

          </Trigger>

          <MultiTrigger>

             <Condition 触发条件1 />

             <Condition 触发条件2 />

             属性列表

          </MultiTrigger>

       </Style.Triggers>

    </Style>

    上面就是一个标准的样式构成,其中的触发器Trigger或MultiTrigger可以有一个或多个,根据业务进行书写,MultiTrigger叫做多条件触发,就是Condition记录的多个条件同时满足时把控件元素对应的属性值改变为其定义的属性列表值。

    这里要注意,<Style.Triggers>下面的触发器的顺序会影响对控件元素的外观,规则就是从第一个触发器开始,满足条件优先使用其定义的属性列表,后续就算也有满足,如果前面已经有了满足条件的触发器也不会触发。

    上面说明了样式的组成,然后我们继续完善SDemon,在前面课程中,我们加入关闭按钮CloseButton,但是其没有加入任何触发器,因此鼠标进入和压下其外观都没有任何变化,现在我们来为其加入样式触发器,普通状态时其背景为红色,当鼠标进入时其背景变为绿色,鼠标压下时其背景变为浅绿色,下面是修改后的CloseButton的样式:

    <Style TargetType="CloseButton">

            <Setter Property="Background" Value="Red" />

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="CloseButton">

                        <Grid Background="{TemplateBinding Background}">

                            <Path Data="M0 0 L8 8 Z" Stroke="Black" StrokeThickness="2"

                               VerticalAlignment="Center" HorizontalAlignment="Center" />

                            <Path Data="M8 0 L0 8 Z" Stroke="Black" StrokeThickness="2"

                           VerticalAlignment="Center" HorizontalAlignment="Center" />

                        </Grid>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <Style.Triggers>

                <Trigger Property="IsPressed" Value="True">

                    <Setter Property="Background" Value="LightGreen" />

                </Trigger>

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

                    <Setter Property="Background" Value="Green" />

                </Trigger>

            </Style.Triggers>

        </Style>

  保存运行后效果如下:

    zxkc_image_10_01.png

  鼠标进入:

    zxkc_image_10_02.png

    上一课我们提到,一般来说,在资源字典里定义的资源必须有x:Key来指定一个唯一的资源名称,但是对于Style有点例外,那就是,如果没有指定x:Key,那么对于Style这种类型的资源其唯一的资源名称就是TargetType指定的控件元素类型名称,比如上述的CloseButton的样式资源就没有指定x:Key,那么其资源名称就是CloseButton,通过FindRes(_U("CloseButton"))就能找到这个样式资源。

    理解了样式资源后,我们就可以随意地给任何一个控件元素定义其样式资源,比如我们可以直接对控件元素的Style属性进行指定样式资源,对于一个控件元素的样式资源,有三种指定方式:隐式、引用、显式。

    隐式就是什么也不指定,系统默认会用控件元素的类型名称查找支持的样式资源,比如Button,系统会用"Button"去查找是否有这个名称的样式资源。

    引用方式就比较简单,直接在资源字典中定义好资源,然后通过Style="{StaticResource buttonStyle}"来引用,当然也可以动态引用:Style="{DynamicResource buttonStyle}",其中的buttonStyle就是通过类似下面的资源定义的样式:

    <Style x:Key="buttonStyle" TargetType="Button" >

    显式方式就是直接指定控件元素的Style属性:

    <Window name="window1">

       <Grid>

          <Button name="btn" Width="80">

             <Button.Style>

                <Style TargetType="Button">

                   …

                </Style>

             </Button.Style>

          </Button>

       </Grid>

</Window>

除了Style属性外,其它的控件元素的属性有引用显式这两种方式指定其值。