• WPF StyleControlTemplate 使用


    1、序言

      在WPF中,设置外观样式我们有很多种方式,比如通过设置控件的属性来控制控件的外观样式;或者通过在每一个控件中分别设置Style;或者通过在整个Window.Resource中设置Style,又或者在App.xaml的Application.Resource设置Style。总之样式概念使开发人员能够更好的设置控件的外观,下面就上面的几种情形进行说明。

    2、通过在控件中设置Style来控制控件的外观

      

    <Window x:Class="WpfApplication5.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Window1" Height="300" Width="300">
        <Grid>
            <Button Click="Button_Click">
                <Button.Style>
                    <Style TargetType="Button">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Rectangle Width="100" Fill="Red" ></Rectangle>
                                </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </Button.Style>
            </Button>
        </Grid>
    </Window>
    

    显示效果:

    分析:我们把样式直接作用于当前Button控件,样式在这里用于设置控件模板,使Button显示矩形框形状。

    3、通过在Window.Resource中设置Style来控制控件的外观

      1)在Style中添加X:Key属性

    <Window x:Class="WpfApplication5.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Window1" Height="300" Width="300">
        <Window.Resources>
            <Style TargetType="Button" x:Key="ButtonStyle">
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Rectangle  Fill="Red"></Rectangle>
                                    <Label>我是在Resources中设计的样式</Label>
                            </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
        </Window.Resources>
        <Canvas>
            <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="0" Style="{StaticResource ButtonStyle} ">
            </Button>
            <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="80">
            </Button>
        </Canvas>
    </Window>
    

    效果图如下:

    分析:虽然Style的TargetType="Button",但是由于没有为第二个Button指定Style,所以Style没有作用于第二个Button。

    2)

    <Window x:Class="WpfApplication5.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Window1" Height="300" Width="300">
        <Window.Resources>
            <Style TargetType="Button" >
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Rectangle  Fill="Red"></Rectangle>
                                    <Label>我是在Resources中设计的样式</Label>
                            </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
        </Window.Resources>
        <Canvas>
            <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="0">
            </Button>
            <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="80">
            </Button>
        </Canvas>
    </Window>
    

    效果图如下:

    分析:由于没有为Style设置Key,而且也没有为Button设置特定的Style,所以Style作用于整个Window的所有Button(没有两外为Button指定Style)。

    3、通过在App.xaml中的Application.Resource中设置Style来控制控件的外观

    <Application x:Class="WpfApplication5.App"
                 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                 StartupUri="Window1.xaml">
        <Application.Resources>
            <Style TargetType="Button" >
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Button">
                            <Grid>
                                <Rectangle  Fill="Red"></Rectangle>
                                <Label>我是在Resources中设计的样式</Label>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Application.Resources>
    </Application>
    
    <Window x:Class="WpfApplication5.Window1"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            Title="Window1" Height="300" Width="300">
        <Window.Resources>
            <Style TargetType="Button" x:Key="WindowStyle" >
                        <Setter Property="Template">
                            <Setter.Value>
                                <ControlTemplate TargetType="Button">
                                <Grid>
                                    <Rectangle  Fill="Blue"></Rectangle>
                                    <Label>我是在Resources中设计的样式</Label>
                            </Grid>
                                </ControlTemplate>
                            </Setter.Value>
                        </Setter>
                    </Style>
        </Window.Resources>
        <Canvas>
            <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="0" Style="{StaticResource WindowStyle}">
            </Button>
            <Button Width="200" Height="50" Canvas.Left="0" Canvas.Top="80">
            </Button>
        </Canvas>
    </Window>
    

    效果图如下:

    分析:由于第一个Button指定了Style,所以key=WindowStyle的样式作用于它。第二个Button没有指定,所以在App资源中定义的Style作用于第二个Button.

    以上是比较简单的Demo,但是能够说明Style的用途了,记录下来以备以后用到。

  • 相关阅读:
    视图组件之开关按钮
    单选框与复选框的实现
    String、StringBuffer 、StringBuilder 的区别(转)
    布局管理器之相对布局(二)
    布局管理器之相对布局(一)
    帧布局 FrameLayout
    表格布局TableLayout
    布局管理器中的线性布局
    36选7
    冒泡
  • 原文地址:https://www.cnblogs.com/smallstone/p/2455450.html
Copyright © 2020-2023  润新知