【24】C# 自定义控件样式
2018-04-25 本文已影响112人
业余玩家
目前接触到的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>
2018-04-24_233932.png
2018-04-24_234005.png
使用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>
2018-04-25_001559.png
如何让它作用于其中一个呢？需要在样式上提供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>
2018-04-25_001803.png
使用模板
关于模板，我们比较常用的就是控件模板（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>
2018-04-25_004952.png
根据控件状态改变样式
这里介绍两种方式，一种是通过触发器（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>
2018-04-25_012121.png
//鼠标移动上去改变边框颜色
<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>
2018-04-25_110647.png
