WPF初探:样式与资源的基本知识
最编程
2024-01-27 19:08:32
...
1. 通过TargetType设置样式
通过控件类型,统一设置样式【如:字体,大小,边距等】,以便于形成统一的风格。如下所示:
通过设置样式的TargetType="Button",则可以使所有的按钮应用同一个样式,统一风格。如下所示:
<Window x:Class="WpfApp1.SevenWindow"
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:WpfApp1"
mc:Ignorable="d"
Title="基础样式示例" Height="250" Width="400">
<Window.Resources>
<Style TargetType="Button" >
<Setter Property="Button.Margin" Value="2,5,2,5"></Setter>
<Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
<Setter Property="Control.FontSize" Value="18"></Setter>
</Style>
</Window.Resources>
<StackPanel>
<Button x:Name="button1" Content="第一个按钮"></Button>
<Button x:Name="button2" Content="第二个按钮" ></Button>
<Button x:Name="button3" Content="第三个按钮"></Button>
<Button x:Name="button4" Content="第四个按钮" ></Button>
</StackPanel>
</Window>
2. 通过Key设置样式
如果需要对每一个控件元素,都设置不同的样式,则可以通过不同的Key加以区分,如下所示:
分别设置不同的样式,每一个样式都有一个唯一的Key,然后分别绑定到各个元素的Style属性上,如下所示:
<Window x:Class="WpfApp1.SevenWindow"
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:WpfApp1"
mc:Ignorable="d"
Title="基础样式示例" Height="250" Width="400">
<Window.Resources>
<Style TargetType="Button" >
<Setter Property="Button.Margin" Value="2,5,2,5"></Setter>
<Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
<Setter Property="Control.FontSize" Value="16"></Setter>
</Style>
<Style x:Key="first">
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.Background" Value="Gray"></Setter>
</Style>
<Style x:Key="second">
<Setter Property="ItemsControl.Foreground" Value="Gold"></Setter>
<Setter Property="ItemsControl.Background" Value="DarkCyan"></Setter>
</Style>
<Style x:Key="third">
<Setter Property="ItemsControl.Foreground" Value="White"></Setter>
<Setter Property="ItemsControl.Background" Value="DarkRed"></Setter>
</Style>
<Style x:Key="four">
<Setter Property="ItemsControl.Foreground" Value="Blue"></Setter>
<Setter Property="ItemsControl.Background" Value="LightCoral"></Setter>
</Style>
</Window.Resources>
<StackPanel>
<Button x:Name="button1" Content="第一个按钮" Style="{StaticResource first}"></Button>
<Button x:Name="button2" Content="第二个按钮" Style="{StaticResource second}"></Button>
<Button x:Name="button3" Content="第三个按钮" Style="{StaticResource third}"></Button>
<Button x:Name="button4" Content="第四个按钮" Style="{StaticResource four}"></Button>
</StackPanel>
</Window>
3. 样式继承
通过仔细观察发现,在设置了单独样式以后,统一的样式失去了作用,说明每一个元素控件,只能绑定一个样式,那怎么办才能让统一样式起作用呢?答案就是面向对象思想中的继承。
在WPF中,通过设置BasedOn来继承父样式,如下所示:
在每一个样式通过BasedOn属性继承父样式,如下所示:
<Window x:Class="WpfApp1.SevenWindow"
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:WpfApp1"
mc:Ignorable="d"
Title="基础样式示例" Height="250" Width="400">
<Window.Resources>
<Style x:Key="base" >
<Setter Property="Control.Margin" Value="2,5,2,5"></Setter>
<Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
<Setter Property="Control.FontSize" Value="18"></Setter>
</Style>
<Style x:Key="first" BasedOn="{StaticResource base}">
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.Background" Value="Gray"></Setter>
</Style>
<Style x:Key="second" BasedOn="{StaticResource base}">
<Setter Property="ItemsControl.Foreground" Value="Gold"></Setter>
<Setter Property="ItemsControl.Background" Value="DarkCyan"></Setter>
</Style>
<Style x:Key="third" BasedOn="{StaticResource base}">
<Setter Property="ItemsControl.Foreground" Value="White"></Setter>
<Setter Property="ItemsControl.Background" Value="DarkRed"></Setter>
</Style>
<Style x:Key="four" BasedOn="{StaticResource base}">
<Setter Property="ItemsControl.Foreground" Value="Blue"></Setter>
<Setter Property="ItemsControl.Background" Value="LightCoral"></Setter>
</Style>
</Window.Resources>
<StackPanel>
<Button x:Name="button1" Content="第一个按钮" Style="{StaticResource first}"></Button>
<Button x:Name="button2" Content="第二个按钮" Style="{StaticResource second}"></Button>
<Button x:Name="button3" Content="第三个按钮" Style="{StaticResource third}"></Button>
<Button x:Name="button4" Content="第四个按钮" Style="{StaticResource four}"></Button>
</StackPanel>
</Window>
注意:如果样式要被其他样式继承,则最好不要使用TargetType指定。一般情况下,可能为报错【只能根据带有基类型“IFrameworkInputElement”的目标类型的 Style。】
4. 样式中绑定事件
在WPF中的样式中,通过EventSetter进行事件绑定,如下所示:
在样式中,通过EventSetter设置事件,如下所示:
<Window x:Class="WpfApp1.SevenWindow"
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:WpfApp1"
mc:Ignorable="d"
Title="基础样式示例" Height="250" Width="400">
<Window.Resources>
<Style x:Key="base">
<Setter Property="Control.Margin" Value="2,5,2,5"></Setter>
<Setter Property="Control.FontFamily" Value="SimSun-ExtB"></Setter>
<Setter Property="Control.FontSize" Value="18"></Setter>
</Style>
<Style x:Key="first" BasedOn="{StaticResource base}">
<Setter Property="Control.Foreground" Value="Red"></Setter>
<Setter Property="Control.Background" Value="Gray"></Setter>
<EventSetter Event="Button.MouseEnter" Handler="FirstButton_MouseEnter"></EventSetter>
</Style>
</Window.Resources>
<StackPanel>
<Button x:Name="button1" Content="第一个按钮" Style="{StaticResource first}"></Button>
</StackPanel>
</Window>
其中FirstButton_MouseEnter,文后台定义的一个事件函数,如下所示:
private void FirstButton_MouseEnter(object sender,MouseEventArgs e)
{
Button btn = (Button)sender;
MessageBox.Show("鼠标进入了 "+btn.Content.ToString()+" 呀!");
}
推荐阅读