WPF 控件样式及样式事件设置

实例下载:WPF控件样式及样式事件设置-C#文档类资源-CSDN下载

封装用户控件实例:图片选择Checkbox(用户控件)-C#文档类资源-CSDN下载

1.直接在代码中设置控件样式(例:设置按键圆角及鼠标停留于按下样式)

    <!--设置按钮圆角-->
    <Button  Content="取消" Width="100" Height="30" BorderBrush="LightBlue">
        <Button.Template >
            <ControlTemplate TargetType="{x:Type Button}" >
                <Border x:Name="back" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
                    <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="back" Property="Background" Value="#F0FAFF"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="back" Property="Background" Value="#0191EA"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Button.Template>
    </Button>

2.将ControlTemplate放入资源或字典中，控件设置Template,通过key调用(例:在资源中调用ControlTemplate).

<Window x:Class="Test.样式"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test"
        mc:Ignorable="d"
        Title="样式" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary>
            <ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}" >
                <Border x:Name="back" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
                    <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                </Border>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter TargetName="back" Property="Background" Value="#F0FAFF"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="back" Property="Background" Value="#0191EA"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </ResourceDictionary>
    </Window.Resources>
    <Grid>
        <!--设置按钮圆角-->
        <Button  Content="取消" Width="100" Height="30" BorderBrush="LightBlue" Template="{StaticResource btnTemplate}">
        </Button>
    </Grid>
</Window>

3.将Style放入资源或字典中，控件设置Style,通过key调用(例:在字典中调用Style,注意如果在Style设置了key，ControlTemplate就不能设置key,如果在Style中没有设置Key，那么在它的作用域内的同类型控件样式都会改变，如果某个控件不能设置Style,可设置Style="x:Null").

<!--字典-->
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:local="clr-namespace:Test">
    <Style TargetType="Button" x:Key="btnStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type Button}" >
                    <Border x:Name="back" BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
                        <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter TargetName="back" Property="Background" Value="#F0FAFF"/>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="back" Property="Background" Value="#0191EA"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

<!--调用-->
<Window x:Class="Test.样式"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:Test"      
        mc:Ignorable="d"
        Title="样式" Height="450" Width="800">
    <Window.Resources>
        <ResourceDictionary Source="./SourceDictionary.xaml"/>
    </Window.Resources>
    <Grid>
        <!--设置按钮圆角-->
        <Button  Content="取消" Width="100" Height="30" BorderBrush="LightBlue" Style="{StaticResource btnStyle}">
        </Button>
    </Grid>
</Window>

4.样式事件Triggers及在样式中启动动画

    <Border Width="200" Height="80" VerticalAlignment="Top" Margin="10" CornerRadius="10">
        <Border.Style>
            <Style TargetType="{x:Type Border}">
                <Style.Triggers>
                    <!--设置路由事件样式-->
                    <EventTrigger RoutedEvent="MouseEnter">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.ShadowDepth)" BeginTime="00:00:00" From="0" To="5" Duration="00:00:0.2" />
                                <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.BlurRadius)" BeginTime="00:00:00" From="0" To="20" Duration="00:00:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <EventTrigger RoutedEvent="MouseLeave">
                        <BeginStoryboard>
                            <Storyboard>
                                <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.ShadowDepth)" BeginTime="00:00:00" From="5" To="0" Duration="00:00:0.2" />
                                <DoubleAnimation Storyboard.TargetProperty="(FrameworkElement.Effect).(DropShadowEffect.BlurRadius)" BeginTime="00:00:00" From="20" To="0" Duration="00:00:0.2" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger>
                    <!--设置样式事件-->
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#F0FAFF"/>
                    </Trigger>
                    <Trigger Property="IsMouseOver" Value="False">
                        <Setter Property="Background" Value="White"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Border.Style>
        <Border.Effect>
            <DropShadowEffect Color="#EEEEEE" ShadowDepth="1" BlurRadius="4" />
        </Border.Effect>
    </Border>