得鹿梦鱼 得鹿梦鱼

WPF样式与模板

WPF样式

类似于Web应用程序中的CSS,在WPF中可以为控件定义统一的样式(Style)。样式属于资源的一种

<Window.Resources>    <Style TargetType="Button">        <Setter Property="Background" Value="Yellow" />        <Setter Property="Margin" Value="5" />        <Setter Property="FontFamily" Value="Comic Sans MS"/>        <Setter Property="FontSize" Value="14"/>    </Style></Window.Resources><StackPanel>    <Button>Button A</Button>    <Button Foreground="Red" Background="White">Button B</Button></StackPanel>
<Window.Resources>    <Style TargetType="Button">        <Setter Property="Background" Value="Yellow" />        <Setter Property="Margin" Value="5" />        <Setter Property="FontFamily" Value="Comic Sans MS"/>        <Setter Property="FontSize" Value="14"/>    </Style>    <Style         TargetType="Button"        x:Key="ButtonStyleA"        BasedOn="{StaticResource {x:Type Button}}">        <Setter Property="Background" Value="Green" />        <Setter Property="Foreground" Value="Yellow" />        <Setter Property="FontSize" Value="28"/>    </Style></Window.Resources><StackPanel>    <Button>Button A</Button>    <Button Foreground="Red" Background="White">Button B</Button>    <Button Style="{StaticResource ButtonStyleA}">Button C</Button>    <Button Style="{StaticResource ButtonStyleA}" Content="Button D">        <Button.Foreground>            <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">                <LinearGradientBrush.GradientStops>                    <GradientStop Offset="0.0" Color="#FFFFFF" />                    <GradientStop Offset="1.0" Color="#0000FF" />                </LinearGradientBrush.GradientStops>            </LinearGradientBrush>        </Button.Foreground>    </Button></StackPanel>

WPF控件模板

当使用一个控件时,如果控件的属性、方法、事件满足程序的需求,但控件的外观不满足要求的时候,除了自定义控件这种方法外,我们还可以通过使用“控件模板”的方式更改控件的外观。

<Window.Resources>    <Style TargetType="Button" x:Key="ButtonStyle">    <!--设置按钮的默认的样式-->        <Setter Property="FontFamily" Value="Comic Sans MS"/>        <Setter Property="FontSize" Value="14"/>        <Setter Property="Foreground" Value="Black" />        <Setter Property="Background">            <Setter.Value>                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">                    <LinearGradientBrush.GradientStops>                        <GradientStop Offset="0.0" Color="#fff" />                        <GradientStop Offset="1.0" Color="#009" />                    </LinearGradientBrush.GradientStops>                </LinearGradientBrush>            </Setter.Value>        </Setter>        <!--设置按钮的模板-->        <Setter Property="Template">            <Setter.Value>                <ControlTemplate TargetType="Button">                    <Grid>                        <Ellipse Fill="{TemplateBinding Background}"/>                            <ContentPresenter                                Margin="5"                                HorizontalAlignment="Center"                                VerticalAlignment="Center"/>                    </Grid>                </ControlTemplate>            </Setter.Value>        </Setter>    </Style></Window.Resources> <StackPanel>    <Button Margin="5" Style="{StaticResource ButtonStyle}" Width="100" Height="100" Content="My Button"></Button>    <Button Margin="5" Width="200">Common Button</Button></StackPanel>

触发器

值得注意的是,这个时候,对于此按钮,无论是否获得焦点、鼠标是处于其上方,显示的外观均是相同的,如果要定义以上的一些效果,可以使用触发器来实现。
Style、ControlTemplate 和 DataTemplate 都具有 Triggers 属性,该属性可以包含一组触发器。某个属性值更改时,或某个事件引发时,触发器会相应地设置属性或启动操作(如动画操作)
在ControlTemplate中(即上段代码ControlTemplate中插入以下代码)

<ControlTemplate.Triggers>    <Trigger Property="IsMouseOver" Value="True">        <!--鼠标在上移动时-->        <Setter Property="Foreground" Value="Yellow" />    </Trigger>    <Trigger Property="IsKeyboardFocused" Value="True">        <!--控件获得键盘焦点时-->        <Setter Property="Foreground" Value="White" />    </Trigger></ControlTemplate.Triggers>