目前接触到的C#应用程序,基本上采用了WPF进行界面设计,WPF是啥?是微软推出的基于Windows 的用户界面框架,利用它能够将界面设计和逻辑代码完全分离,而且能够实现很炫的画面效果,当然前提是你对它的使用较为熟悉,笔者目前也是在学习关于界面样式这方面的内容。
标签内样式
首先,我们新建一个WPF应用程序,建成之后我们可以看到主窗口的设计界面,然后我们根据自己想要的界面,进行制作,这里就使用button进行测试了。添加button按钮,点击鼠标右键,选择属性,或者按F4呼出属性界面设置窗口。对属性熟悉的可以直接修改xaml文件即可。我们设置了按钮的大小,以及颜色,这应该难不倒你,接着继续换一种方式。
<Window x:Class="teststyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85" Background="#FFE99A9A" />
</Grid>
</Window>
使用Style
利用Style对元素进行样式设置,它就类似css可以设置html标签的样式。假如你想把按钮设置成相同的样式,你使用Style就能轻松的实现,当然,如果你想其中一个不一样也是可以的,下面用代码介绍它的使用。
这里放置了3个按钮,并用Style设置了他们的背景色,边框,透明度三个属性。
TargetType=”Button” 这样样式就会作用于所有的button了。
<Window x:Class="teststyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="red"></Setter>
<Setter Property="BorderBrush" Value="black"></Setter>
<Setter Property="Opacity" Value="0.5"></Setter>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85" />
<Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="211,27,0,0" Name="button2" VerticalAlignment="Top" Width="85" />
<Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="384,27,0,0" Name="button3" VerticalAlignment="Top" Width="85" />
</Grid>
</Window>
如何让它作用于其中一个呢?需要在样式上提供x:key,然后,将样式应用到标签上Style=”{StaticResource 你的key值}” ,这样你就能单独设置其样式了,是不是跟css通过id和class进行设置一样。
<Window x:Class="teststyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="Button">
<Setter Property="Background" Value="red"></Setter>
<Setter Property="BorderBrush" Value="black"></Setter>
<Setter Property="Opacity" Value="0.5"></Setter>
</Style>
<Style x:Key="btnone" TargetType="Button">
<Setter Property="Background" Value="yellow"></Setter>
<Setter Property="Content" Value="btnone"></Setter>
<Setter Property="Opacity" Value="1"></Setter>
</Style>
</Window.Resources>
<Grid>
<Button Style="{StaticResource btnone}" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85" />
<Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="211,27,0,0" Name="button2" VerticalAlignment="Top" Width="85" />
<Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="384,27,0,0" Name="button3" VerticalAlignment="Top" Width="85" />
</Grid>
</Window>
使用模板
关于模板,我们比较常用的就是控件模板(ControlTemplate)和数据模板(DataTemplate)了。通过模板你可以改变控件的结构和外观。单独使用ControlTemplate必须制定key值,你可以使用style加模板的方式,就不是必要了。
<Window x:Class="teststyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="btnone" TargetType="Button">
<Border Background="red" BorderThickness="1">
<Grid Margin="1" Background="AliceBlue">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="4,5,4,4" />
</Grid>
</Border>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Template="{StaticResource btnone}" Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85" />
</Grid>
</Window>
根据控件状态改变样式
这里介绍两种方式,一种是通过触发器(Triggers)来进行改变,另一种使用visualstate对象改变控件的样式,.net4.0开始引入VisualStateManager,主要为了控制控件的状态转换,和其间涉及的外观行为。,所要要使用这个必须将项目换成.net4.0框架。
//鼠标移动上去,改变字体大小
<Window x:Class="teststyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Trigger.Setters>
<Setter Property="FontSize" Value="22" />
</Trigger.Setters>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Button Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85" />
</Grid>
</Window>
//鼠标移动上去改变边框颜色
<Window x:Class="teststyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<ControlTemplate x:Key="btnone" TargetType="Button">
<Border>
<Border.Background>
<SolidColorBrush x:Name="BorderBrush" Color="Black"/>
</Border.Background>
<Grid Background="{TemplateBinding Background}" Margin="4">
<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="2" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BorderBrush" Storyboard.TargetProperty="Color" To="Red" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Window.Resources>
<Grid>
<Button Template="{StaticResource btnone}" Content="Button" Height="37" HorizontalAlignment="Left" Margin="34,26,0,0" Name="button1" VerticalAlignment="Top" Width="85" />
</Grid>
</Window>
参考资料
样式设置和模板化
https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/controls/styling-and-templating