原文:Windows Phone开发(16):样式和控件模板
在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的一种可重用的属性设置列表,这样对于需要设置相同属性值的同类型的多个控件来讲是大大提高效率,我们不必要为每个控件做重复的动作。
下面是一个TextBox的样式示例,我们希望通过引用资源中的样式,使得页面上的所有TextBox控件都具有统一的外观,而且都只能输入数字。
<phone:PhoneApplicationPage.Resources>
<!--不带key的样式,应用于所有TextBlock元素-->
<Style TargetType="TextBlock">
<Setter Property="FontSize" Value="40"/>
<Setter Property="Foreground" Value="Yellow"/>
</Style>
<!--带key的样式,只有引用该资源的元素才应用-->
<Style x:Key="MyTextBoxStyle" TargetType="TextBox">
<Setter Property="FontSize" Value="40"/>
<Setter Property="Foreground" Value="Blue"/>
<Setter Property="InputScope">
<Setter.Value>
<InputScope>
<InputScopeName NameValue="Number"/>
</InputScope>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions> <TextBlock Grid.Row="0" x:Name="PageTitle" Text="样式示例" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,10,12,0">
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="文本一:"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="文本二:"/>
<TextBlock Grid.Column="0" Grid.Row="2" Text="文本三:"/>
<TextBlock Grid.Column="0" Grid.Row="3" Text="文本四:"/>
<TextBlock Grid.Column="0" Grid.Row="4" Text="文本五:"/> <TextBox Grid.Column="1" Grid.Row="0" Style="{StaticResource MyTextBoxStyle}" />
<TextBox Grid.Column="1" Grid.Row="1" Style="{StaticResource MyTextBoxStyle}" />
<TextBox Grid.Column="1" Grid.Row="2" Style="{StaticResource MyTextBoxStyle}" />
<TextBox Grid.Column="1" Grid.Row="3"/>
<TextBox Grid.Column="1" Grid.Row="4"/>
</Grid>
</Grid>
1、带key的样式,不会自动应用到元素/控件上,除非元素的Style属性引用了该资源的键;
2、不带键的样式资源,将自动应用于当前页面(如果资源声明在当前页)中的所有同类型的元素。
而右面的一列TextBox,由于后面两个没有显式设置Style属性,故它们保持默认样式。
要自定义控件模板,首先要了解一下状态。
如果你以前做过WPF开发你会知道,在.NET 3.5的时候,自定义控件模板,针对控件状态的改变所做出的应对策略是通过触发器来完成的,但到了.NET 4,就有了状态的概念,而Silverlight 3也引入这概念,这样使得控件的状态管理更方便也更灵活了。
还有一点就是状态有分组的,每个组里面的状态是互斥的,也就是不能同时发生,每个时刻只允许组内一个状态发生,但不同组之间的状态是不冲突的。
// 摘要:
// 表示按钮控件。
[TemplateVisualState(Name = "Unfocused", GroupName = "FocusStates")]
[TemplateVisualState(Name = "Disabled", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Focused", GroupName = "FocusStates")]
[TemplateVisualState(Name = "Pressed", GroupName = "CommonStates")]
[TemplateVisualState(Name = "Normal", GroupName = "CommonStates")]
[TemplateVisualState(Name = "MouseOver", GroupName = "CommonStates")]
public class Button : ButtonBase
<phone:PhoneApplicationPage.Resources>
<ControlTemplate x:Key="Template1" TargetType="ButtonBase">
<Grid>
<!--状态组-->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="pressed"
Storyboard.TargetProperty="Opacity"
To="1" Duration="0:0:0.5"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="disable"
Storyboard.TargetProperty="Opacity"
To="0.5" Duration="0:0:0.5"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="focussbd"
Storyboard.TargetProperty="Opacity"
To="0.88"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid x:Name="background" Background="{TemplateBinding Background}">
<Rectangle x:Name="pressed" Opacity="0" RadiusX="2" RadiusY="2">
<Rectangle.Fill>
<LinearGradientBrush
StartPoint=".5,0"
EndPoint=".5,1">
<GradientStop Color="SkyBlue" Offset=".1"/>
<GradientStop Color="Blue" Offset=".9"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter x:Name="ContentPresenter"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"/>
<Rectangle x:Name="disable" Opacity="0" Fill="Gray" RadiusX="2" RadiusY="2"/>
<Border x:Name="focussbd" BorderBrush="LightGreen" BorderThickness="2" CornerRadius="2" Opacity="0"/> </Grid>
</Border>
</Grid>
</ControlTemplate>
</phone:PhoneApplicationPage.Resources> <Grid x:Name="ContentPanel" Margin="12,0,12,0">
<Button Content="Button" Height="72" HorizontalAlignment="Left" Margin="135,155,0,0" Name="button1" VerticalAlignment="Top" Width="160" Template="{StaticResource Template1}" />
</Grid>
控件模板有时候很难一两句话讲清楚,别看它好像很多东西,其实很简单,它无非包括两个东西——状态和UI元素,至于怎么个布局法,完全取决于你希望怎么设计了。
Windows Phone开发(16):样式和控件模板的更多相关文章
-
背水一战 Windows 10 (79) - 自定义控件: Layout 系统, 控件模板, 事件处理
[源码下载] 背水一战 Windows 10 (79) - 自定义控件: Layout 系统, 控件模板, 事件处理 作者:webabcd 介绍背水一战 Windows 10 之 控件(自定义控件) ...
-
WPF笔记(1.9 样式和控件模板)——Hello,WPF!
原文:WPF笔记(1.9 样式和控件模板)--Hello,WPF! 资源的另一个用途是样式设置: <Window > <Window.Resources> <St ...
-
WPF 10天修炼 第七天- WPF资源、样式、控件模板
WPF资源 对象资源 WPF允许在XAML标记的任意位置定义资源.比如在特定的控件.窗口或应用程序级别定义资源,WPF资源系统提供的对象资源有如下好处: 1. 高效:使用对象资源可以在一个地方定义而 ...
-
Windows App开发之经常使用控件与应用栏
控件的属性.事件与样式资源 怎样加入控件 加入控件的方式有多种,大家更喜欢以下哪一种呢? 1)使用诸如Blend for Visual Studio或Microsoft Visual Studio X ...
-
WPF教程十一:简单了解并使用控件模板
WPF教程十一:简单了解并使用控件模板 这一章梳理控件模板,每个WPF控件都设计成无外观的,但是行为设计上是不允许改变的,比如使用Button的控件时,按钮提供了能被点击的内容,那么*的改变控件外观 ...
-
Windows常见窗口样式和控件风格
Windows常见窗口样式和控件风格 王佰营 徐丽红 一.窗口样式 WS_POPUP 弹出式窗口(不能与WS_CHILDWINDOW样式同时使用)WS_CHILDWINDOW 子窗口(不能与WS_PO ...
-
与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom
[源码下载] 与众不同 windows phone (52) - 8.1 新增控件: AutoSuggestBox, ListView, GridView, SemanticZoom 作者:webab ...
-
快速构建Windows 8风格应用6-GridView数据控件
原文:快速构建Windows 8风格应用6-GridView数据控件 本篇博文主要介绍什么是GridView数据控件.如何构建常用的GridView数据呈现样式. 什么是GridView数据控件? G ...
-
SNF开发平台WinForm-Grid表格控件大全
我们在开发系统时,会有很多种控件进行展示,甚至有一些为了方便的一些特殊需求. 那么下面就介绍一些我们在表格控件里常用的方便的控件: 1.Grid表格查询条 Grid表格下拉 3.Grid表格弹框选 ...
随机推荐
-
poj1988_Cube Stacking
Cube Stacking Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 24130 Accepted: 8468 Ca ...
-
SNMP简单网络管理协议(转载)
SNMP SNMP 网络管理的历史 美国国防部设计了世界上头几个包交换网之一的ARPANET,在70年代,TCP/IP协议族正式被定为军方通信标准,随着此协议的广泛使用,网络管理成了一件大事.在80年 ...
-
Android定时器,推荐ScheduledThreadPoolExecutor
Android定时器,推荐ScheduledThreadPoolExecutor 官方网址:http://developer.android.com/reference/java/util/Timer ...
-
[Quick-x]cocos2dx下的彩色文本显示--RichLabel
部分关键代码与思路参考 http://www.cocoachina.com/bbs/read.php?tid=218977&page=1 感谢原作者 i7909 代码下载地址:https:// ...
-
c# 之 New新知
本人从事.NET工作已经一段时间,毕业之前一直想着做C++的,后来因为各种原因(跟学校导师相关),走向了.NET之路,从而时不时补一下.net的基础知识,因为自己的.NET知识还不是很扎实.近期每天早 ...
-
iOS开发中文件的上传和下载功能的基本实现-备用
感谢大神分享 这篇文章主要介绍了iOS开发中文件的上传和下载功能的基本实现,并且下载方面讲到了大文件的多线程断点下载,需要的朋友可以参考下 文件的上传 说明:文件上传使用的时POST请求,通常把要上传 ...
-
c# 设置MdiClient窗体的背景图片
在窗体的InitializeComponent();方法后面添加下面的代码. MdiClient MC = new MdiClient(); MC.Name = "MdiClientForm ...
-
Entity Framework对同一张表配置一对多关系
在实际的项目开发中,可能会遇到同一张表同时保存自身和上级(或下级)的信息(一般是通过设置一个上级主键[ParentId]的列与主键[Id]关系) 例如:城市库,有国家.省.市...,省的ParentI ...
-
nginx配置web服务器
一:设置虚拟服务器 1.设置 http { server { listen 127.0.0.1:8080; server_name example.org www.example.org; } } 2 ...
-
查看DNS服务器
电脑右键查看本地连接 查看状态 然后看DNS