WPF样式
样式是改变控件的基础方法
举例:改变三个Button的外观属性
XAML代码:
<Window x:Class="样式.MainWindow"
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:样式"
mc:Ignorable="d" Loaded="Window_Loaded"
Title="MainWindow" Height="300" Width="300">
<WrapPanel Name="wrapple">
<Button Content="Button1"/>
<Button Content="Button2"/>
<Button Content="Button3"/>
</WrapPanel>
</Window>
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:样式"
mc:Ignorable="d" Loaded="Window_Loaded"
Title="MainWindow" Height="300" Width="300">
<WrapPanel Name="wrapple">
<Button Content="Button1"/>
<Button Content="Button2"/>
<Button Content="Button3"/>
</WrapPanel>
</Window>
改变控件外观的实现方法:
1.通过代码实现
在加载Windows窗体时的Window_Loaded事件中改变控件的旋转角度、颜色、边距和高度
namespace 样式
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
int count = this.wrapple.Children.Count;
for (int i = 0; i < count; i++)
{
Button btn = wrapple.Children[i] as Button;
RotateTransform rotatetransform = new RotateTransform();
rotatetransform.Angle = 45;
btn.RenderTransform = rotatetransform;
btn.Background = new SolidColorBrush(Colors.Gray);
btn.Height=50;
btn.Margin = new Thickness(35,0,0,0);
}
}
}
}
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
int count = this.wrapple.Children.Count;
for (int i = 0; i < count; i++)
{
Button btn = wrapple.Children[i] as Button;
RotateTransform rotatetransform = new RotateTransform();
rotatetransform.Angle = 45;
btn.RenderTransform = rotatetransform;
btn.Background = new SolidColorBrush(Colors.Gray);
btn.Height=50;
btn.Margin = new Thickness(35,0,0,0);
}
}
}
}
2.在XAML中改变
<Window x:Class="样式.MainWindow"
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<WrapPanel Name="wrapple">
<Button Content="Button1" Height="50" Margin="35,0,0,0" Background="Gray">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
</Button>
<Button Content="Button2" Height="50" Margin="35,0,0,0" Background="Gray">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
</Button>
<Button Content="Button3" Height="50" Margin="35,0,0,0" Background="Gray">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
</Button>
</WrapPanel>
</Window>
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<WrapPanel Name="wrapple">
<Button Content="Button1" Height="50" Margin="35,0,0,0" Background="Gray">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
</Button>
<Button Content="Button2" Height="50" Margin="35,0,0,0" Background="Gray">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
</Button>
<Button Content="Button3" Height="50" Margin="35,0,0,0" Background="Gray">
<Button.RenderTransform>
<RotateTransform Angle="45"/>
</Button.RenderTransform>
</Button>
</WrapPanel>
</Window>
存在问题:当Button数量较多时需要不断地复制粘贴。
解决方法:设置Button的样式
其中既可以通过关键字Key或TargetStyle设置控件的样式
(1)TargetType
<Window x:Class="样式.MainWindow"
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="35,0,0,0"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="45"/>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<WrapPanel Name="wrapple">
<Button Content="Button1"/>
<Button Content="Button2"/>
<Button Content="Button3"/>
</WrapPanel>
</Window>
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="35,0,0,0"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="45"/>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<WrapPanel Name="wrapple">
<Button Content="Button1"/>
<Button Content="Button2"/>
<Button Content="Button3"/>
</WrapPanel>
</Window>
(2) Key
<Window x:Class="样式.MainWindow"
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="35,0,0,0"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="45"/>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<WrapPanel Name="wrapple">
<Button Content="Button1" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button2" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button3" Style="{StaticResource ButtonStyle}"/>
</WrapPanel>
</Window>
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="35,0,0,0"/>
<Setter Property="Background" Value="Gray"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="45"/>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<WrapPanel Name="wrapple">
<Button Content="Button1" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button2" Style="{StaticResource ButtonStyle}"/>
<Button Content="Button3" Style="{StaticResource ButtonStyle}"/>
</WrapPanel>
</Window>
样式的继承:
样式的继承通过BaseOn属性实现,将两个控件共同的属性抽象为一个基类的样式,然后两个控件的样式均继承自这个基类样式
举例:
通过基类样式设置Button和RadioButton的样式,其中二者均派生自Control控件
<Window x:Class="样式.MainWindow"
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<Style TargetType="Control">
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="35,0,0,0"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="45"/>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource {x:Type Control}}" TargetType="Button">
<Setter Property="Background" Value="Blue"/>
</Style>
<Style BasedOn="{StaticResource {x:Type Control}}" TargetType="RadioButton">
<Setter Property="Background" Value="Red"/>
</Style>
</Window.Resources>
<WrapPanel Name="wrapple">
<Button Content="Button" />
<RadioButton Content="RadioButton"/>
</WrapPanel>
</Window>
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:样式"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Window.Resources>
<Style TargetType="Control">
<Setter Property="Height" Value="50"/>
<Setter Property="Margin" Value="35,0,0,0"/>
<Setter Property="RenderTransform">
<Setter.Value>
<RotateTransform Angle="45"/>
</Setter.Value>
</Setter>
</Style>
<Style BasedOn="{StaticResource {x:Type Control}}" TargetType="Button">
<Setter Property="Background" Value="Blue"/>
</Style>
<Style BasedOn="{StaticResource {x:Type Control}}" TargetType="RadioButton">
<Setter Property="Background" Value="Red"/>
</Style>
</Window.Resources>
<WrapPanel Name="wrapple">
<Button Content="Button" />
<RadioButton Content="RadioButton"/>
</WrapPanel>
</Window>
触发器WPF的触发器有三种分别为:
(1)属性触发器Trigger:如上所示
(2)数据触发器DataTrigger:可以绑定普通的.NET属性,不仅仅是依赖属性
(3)事件触发器EventTrigger:触发路由事件时会被调用