> 文章列表 > WPF控件样式设置

WPF控件样式设置

WPF控件样式设置

1、直接在代码中设置

<Button Content="测试" Width="100" Height="30" BorderBrush="LightBlue"><Button.Template><ControlTemplate TargetType="{x:Type Button}"><Border x:Name="border1" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="8,8,8,8"><ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="border1" Property="Background" Value="#F0FAFF"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="border1" Property="Background" Value="#0191EA"/></Trigger></ControlTemplate.Triggers></ControlTemplate></Button.Template></Button>

2、通过ControlTemplate设置(ControlTemplate放入资源或字典中)
设置样式

 <Window.Resources><ResourceDictionary><ControlTemplate x:Key="btnTemplate" TargetType="{x:Type Button}"><Border x:Name="border2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" CornerRadius="8,8,8,8"><ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter></Border><ControlTemplate.Triggers><Trigger Property="IsMouseOver" Value="True"><Setter TargetName="border2" Property="Background" Value="#F0FAFF"/></Trigger><Trigger Property="IsPressed" Value="True"><Setter TargetName="border2" Property="Background" Value="#0191EA"/></Trigger></ControlTemplate.Triggers></ControlTemplate></ResourceDictionary></Window.Resources>

页面引用

<Button Content="测试" Width="100" Height="30" BorderBrush="LightBlue" Template="{StaticResource btnTemplate}"/>

3、通过Style设置(Style放入资源或字典中)
创建字典

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

页面调用

<Button Content="测试" Width="100" Height="30" BorderBrush="LightBlue" Style="{StaticResource btnStyle}"/>

4、样式事件触发

<Border Width="200" Height="100" 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="Orange"/></Trigger><Trigger Property="IsMouseOver" Value="False"><Setter Property="Background" Value="Yellow"/></Trigger></Style.Triggers></Style></Border.Style><Border.Effect><DropShadowEffect Color="Green" ShadowDepth="1" BlurRadius="5"/></Border.Effect></Border>