欢迎光临
我的个人博客网站

走进WPF之控件模板

WPF不仅支持传统的Windows Forms编程的用户界面和用户体验设计,更支持使用专门的Blend进行专业设计,同时还推出了以模板为核心的新一代设计理念。在WPF中,通过引入模板,将数据和算法的“内容”和“形式”进行解耦。模板主要分为两大类:数据模板【Data Template】和控件模板【Control Template】。本文主要以一些简单的小例子,简述控件模板【Control Template】的的相关内容,仅供学习分享使用,如有不足之处,还请指正。

编辑默认模板

选中控件–右键–编辑模板–编辑副本,打开创建Style资源对话框,如下所示:

走进WPF之控件模板

创建Style资源,输入资源名称,定义位置,默认为此文档【Window】,然后点击【确定】,创建资源。如下所示:

走进WPF之控件模板

创建控件元素的默认资源,如下所示:

 1 <Window x:Class="WpfApp2.TwoWindow"  2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  6         xmlns:local="clr-namespace:WpfApp2"  7         mc:Ignorable="d"  8         Title="TwoWindow" Height="350" Width="800">  9     <Window.Resources> 10         <Style x:Key="FocusVisual"> 11             <Setter Property="Control.Template"> 12                 <Setter.Value> 13                     <ControlTemplate> 14                         <Rectangle Margin="2" SnapsToDevicePixels="true" Stroke="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" StrokeThickness="1" StrokeDashArray="1 2"/> 15                     </ControlTemplate> 16                 </Setter.Value> 17             </Setter> 18         </Style> 19         <SolidColorBrush x:Key="Button.Static.Background" Color="#FFDDDDDD"/> 20         <SolidColorBrush x:Key="Button.Static.Border" Color="#FF707070"/> 21         <SolidColorBrush x:Key="Button.MouseOver.Background" Color="#FFBEE6FD"/> 22         <SolidColorBrush x:Key="Button.MouseOver.Border" Color="#FF3C7FB1"/> 23         <SolidColorBrush x:Key="Button.Pressed.Background" Color="#FFC4E5F6"/> 24         <SolidColorBrush x:Key="Button.Pressed.Border" Color="#FF2C628B"/> 25         <SolidColorBrush x:Key="Button.Disabled.Background" Color="#FFF4F4F4"/> 26         <SolidColorBrush x:Key="Button.Disabled.Border" Color="#FFADB2B5"/> 27         <SolidColorBrush x:Key="Button.Disabled.Foreground" Color="#FF838383"/> 28         <Style x:Key="OneButtonStyle" TargetType="{x:Type Button}"> 29             <Setter Property="FocusVisualStyle" Value="{StaticResource FocusVisual}"/> 30             <Setter Property="Background" Value="{StaticResource Button.Static.Background}"/> 31             <Setter Property="BorderBrush" Value="{StaticResource Button.Static.Border}"/> 32             <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}"/> 33             <Setter Property="BorderThickness" Value="1"/> 34             <Setter Property="HorizontalContentAlignment" Value="Center"/> 35             <Setter Property="VerticalContentAlignment" Value="Center"/> 36             <Setter Property="Padding" Value="1"/> 37             <Setter Property="Template"> 38                 <Setter.Value> 39                     <ControlTemplate TargetType="{x:Type Button}"> 40                         <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" SnapsToDevicePixels="true"> 41                             <ContentPresenter x:Name="contentPresenter" Focusable="False" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/> 42                         </Border> 43                         <ControlTemplate.Triggers> 44                             <Trigger Property="IsDefaulted" Value="true"> 45                                 <Setter Property="BorderBrush" TargetName="border" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/> 46                             </Trigger> 47                             <Trigger Property="IsMouseOver" Value="true"> 48                                 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.MouseOver.Background}"/> 49                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.MouseOver.Border}"/> 50                             </Trigger> 51                             <Trigger Property="IsPressed" Value="true"> 52                                 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Pressed.Background}"/> 53                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Pressed.Border}"/> 54                             </Trigger> 55                             <Trigger Property="IsEnabled" Value="false"> 56                                 <Setter Property="Background" TargetName="border" Value="{StaticResource Button.Disabled.Background}"/> 57                                 <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource Button.Disabled.Border}"/> 58                                 <Setter Property="TextElement.Foreground" TargetName="contentPresenter" Value="{StaticResource Button.Disabled.Foreground}"/> 59                             </Trigger> 60                         </ControlTemplate.Triggers> 61                     </ControlTemplate> 62                 </Setter.Value> 63             </Setter> 64         </Style> 65     </Window.Resources> 66     <Grid> 67         <Button x:Name="one" Content="Hello wpf" Margin="5" Width="100" Height="30" Style="{DynamicResource OneButtonStyle}"></Button> 68     </Grid> 69 </Window>

编辑默认模板,也可以通过【文档大纲】右键–编辑模板–编辑副本,然后打开创建资源对话框,进行操作,如下所示:

走进WPF之控件模板

 

 

修改默认样式

通过默认创建的控件模板Style,可以修改和重定义控件的显示内容,如:设置按钮显示圆角,和鼠标放上去为红色。

 走进WPF之控件模板

要实现以上功能,只需要修改两个地方即可,如下所示:

走进WPF之控件模板

 

 自定义控件模板

通过自定义模板,同样能达到修改控件样式的效果。

控件模板也是资源的一种,每一个控件模板都有一个唯一的key,在控件上通过Template进行绑定,如下所示:

 1 <Window x:Class="WpfApp2.ThreeWindow"  2         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  3         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  4         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  5         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  6         xmlns:local="clr-namespace:WpfApp2"  7         mc:Ignorable="d"  8         Title="自定义控件模板示例" Height="150" Width="300">  9     <Window.Resources> 10         <ControlTemplate x:Key="oneStyle" TargetType="Button"> 11             <Border Background="LightBlue" CornerRadius="5" x:Name="border"> 12                 <StackPanel Orientation="Horizontal" HorizontalAlignment="{TemplateBinding HorizontalAlignment}"> 13                     <TextBlock VerticalAlignment="{TemplateBinding VerticalAlignment}">》》</TextBlock> 14                     <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter> 15                 </StackPanel> 16             </Border> 17             <ControlTemplate.Triggers> 18                 <Trigger Property="IsMouseOver" Value="true"> 19                     <Setter Property="Background" TargetName="border" Value="Red"/> 20                     <Setter Property="BorderBrush" TargetName="border" Value="Blue"/> 21                 </Trigger> 22             </ControlTemplate.Triggers> 23         </ControlTemplate> 24     </Window.Resources> 25     <Grid> 26         <Button x:Name="one" Content="Hello wpf" Margin="5" Width="100" Height="30" VerticalAlignment="Center"  HorizontalAlignment="Center" Template="{StaticResource oneStyle}"></Button> 27     </Grid> 28 </Window>

自定义控件模板,示例如下:

走进WPF之控件模板

 备注

控件模板决定了数据的展示形式和用户体检,在软件UI设计中非常重要,本文旨在抛砖引玉,共同学习,一起进步。

无题·昨夜星辰昨夜风

【作者】李商隐 【朝代】唐

昨夜星辰昨夜风,画楼西畔桂堂东。身无彩凤双飞翼,心有灵犀一点通。

隔座送钩春酒暖,分曹射覆蜡灯红。嗟余听应官去,走马兰台类转蓬。

 走进WPF之控件模板

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 走进WPF之控件模板
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏