WindowsPhone自定义控件详解(一) - 控件类库分析

简介: ++++++++++++++++++++++++++++++++++++++++++ 本文系本站原创,欢迎转载! 转载请注明出处: http://blog.csdn.net/mr_raptor/article/details/7251948 ++++++++++++++++++++++++++++++++++++++++++   上一节主要分析了控件类库,控件类之间的继承关系,通过继承关系,可以知道一些属性,事件的源头和机制。
  ++++++++++++++++++++++++++++++++++++++++++

本文系本站原创,欢迎转载! 转载请注明出处:

http://blog.csdn.net/mr_raptor/article/details/7251948

++++++++++++++++++++++++++++++++++++++++++

 

上一节主要分析了控件类库,控件类之间的继承关系,通过继承关系,可以知道一些属性,事件的源头和机制。

 

本节开始介绍模板类库,并加实例说明和展示。

基类自定义时都要用到模板,在框架中所有的模板都是FrameworkTemplate的子类,包括:

  1.  ControlTemplate
  2. ItemsPanelTemplate
  3. DataTemplate

通过上节对控件的继承关系的分析,你已经可以理解为什么有上面的三种模板了吧。

无非就是对三种控件分类的,三种模板。即:

 > Control类模板对应ControlTemplate

 > ItemsControl类模板对应ItemsPanelTemplate

 > ContentControl、ItemTemplate类模板对应DataTemplate

 

下面分别来解释三种模板。

 

一、 模板类详解

 

继承关系:

 

 

由上图可知,控件对象模板,项集合模板和数据对象模板都是继承自FrameworkTemplate类,

1. ControlTemplate主要用于自定义控件的操作行为视图结构的外观显示效果。如:当按钮按下时如何显示等,按钮上要不要同时显示图片和文本。

  • 通过设置控件的Template属性(继承自Control)来应用自定义的ControlTemplate

2.  ItemsPanelTemplate主要用于自定义带有列表项的控件中各子控件的布局外观显示效果,如:ListBox中的列表项怎样对布局。

  • 通过设置控件的ItemsPanel属性来应用自定义的ItemsPanelTemplate

3.  DataTemplate主要用于自定义内容控件中的数据视图效果,如:ListBox中每一项显示什么数据。

  •  通过设置控件的ItemTemplate /ContentTemplate属性来应用自定义的DataTemplate,注意:一个控件上可能应用多个自定义模板,如:ListBox设置ListBox的列表项Items为横向排列,设置每个列表项里布局和数据,这样就要设置ListBox的ItemsPanelTemplate和DataTemplate。

 原创地址:http://blog.csdn.net/mr_raptor/article/details/7251948

ControlTemplate类

  定义控件的视图显示模板,从而可以对控件进行自定义。在模板内可以构建自己的控件对象树。

注意:

  • 如果您正在定义一个控件模板来取代一个现有控件类的模板,则您用于定义控件模板内容的 XAML 应与现有的控件匹配。否则,该控件可能无法在用户界面中正常发挥作用。
  • 不能将 ControlTemplate 应用于 UserControl(上一节有说明为什么)。

例如:为 Button 创建一个简单的 ControlTemplate。控件模板包含一个Grid 并指定以下行为:

·         当用户将鼠标悬停在Button 上方时,Grid 在半秒之后从绿色变为红色。

·         当用户将鼠标移离按钮时,Grid 立即变回到绿色。

 

  1. <ControlTemplate TargetType="Button">  
  2.   <Grid >  
  3.     <VisualStateManager.VisualStateGroups>  
  4.       <VisualStateGroup x:Name="CommonStates">  
  5.         <VisualStateGroup.Transitions>  
  6.           <!--Take one half second to trasition to the MouseOver state.-->  
  7.           <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5"/>  
  8.         </VisualStateGroup.Transitions>  
  9.         <VisualState x:Name="Normal" />  
  10.         <!--Change the SolidColorBrush, ButtonBrush, to red when the  
  11.             mouse is over the button.-->  
  12.         <VisualState x:Name="MouseOver">  
  13.           <Storyboard>  
  14.             <ColorAnimation Storyboard.TargetName="ButtonBrush"   
  15.         Storyboard.TargetProperty="Color" To="Red" />  
  16.           </Storyboard>  
  17.         </VisualState>  
  18.       </VisualStateGroup>  
  19.     </VisualStateManager.VisualStateGroups>  
  20.     <Grid.Background>  
  21.       <SolidColorBrush x:Name="ButtonBrush" Color="Green"/>  
  22.     </Grid.Background>  
  23.   </Grid>  
  24. </ControlTemplate>  
<ControlTemplate TargetType="Button"> <Grid > <VisualStateManager.VisualStateGroups> <VisualStateGroup x:Name="CommonStates"> <VisualStateGroup.Transitions> <!--Take one half second to trasition to the MouseOver state.--> <VisualTransition To="MouseOver" GeneratedDuration="0:0:0.5"/> </VisualStateGroup.Transitions> <VisualState x:Name="Normal" /> <!--Change the SolidColorBrush, ButtonBrush, to red when the mouse is over the button.--> <VisualState x:Name="MouseOver"> <Storyboard> <ColorAnimation Storyboard.TargetName="ButtonBrush" Storyboard.TargetProperty="Color" To="Red" /> </Storyboard> </VisualState> </VisualStateGroup> </VisualStateManager.VisualStateGroups> <Grid.Background> <SolidColorBrush x:Name="ButtonBrush" Color="Green"/> </Grid.Background> </Grid> </ControlTemplate>


 

ItemsPanelTemplate 类

ItemsPanelTemplate定义ItemsControl中的Item项布局的模板。ItemsControl 的默认值是一个指定StackPanel的ItemsPanelTemplate。例如:ListBox是一个ItemsControl子控件,它的Item项布局模板ItemsPanelTemplate为默认的StackPanel,而StackPanel默认布局是垂直布局,因此,默认的ListBox的Item项垂直布局的,当我们向ListBox里添加Item时,都是垂直列表形式,如果你想要自定义你的ListBox风格为水平显示,那么将要自定义ItemsPanelTemplate里StackPanel为水平方向。

如下例,将ListBox的风格改为水平子项显示方式。

 

模板XAML:

  1. <Grid>  
  2.   <Grid.Resources>  
  3.     <Style x:Key="horizontalListBoxStyle" TargetType="ListBox">  
  4.       <Setter Property="ItemsPanel">  
  5.         <Setter.Value>  
  6.           <ItemsPanelTemplate>  
  7.             <StackPanel Orientation="Horizontal"  
  8.               VerticalAlignment="Center"  
  9.               HorizontalAlignment="Center"/>  
  10.           </ItemsPanelTemplate>  
  11.         </Setter.Value>  
  12.       </Setter>  
  13.     </Style>  
  14. <src:Items x:Key="items"/>  
  15.   </Grid.Resources>  
  16.   <ListBox ItemsSource="{StaticResource items}"   
  17.            Style="{StaticResource horizontalListBoxStyle}"/>  
  18. </Grid>  
<Grid> <Grid.Resources> <Style x:Key="horizontalListBoxStyle" TargetType="ListBox"> <Setter Property="ItemsPanel"> <Setter.Value> <ItemsPanelTemplate> <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center"/> </ItemsPanelTemplate> </Setter.Value> </Setter> </Style> <src:Items x:Key="items"/> </Grid.Resources> <ListBox ItemsSource="{StaticResource items}" Style="{StaticResource horizontalListBoxStyle}"/> </Grid>

 

C#代码:

[csharp] view plain copy print ?
  1. public class Items :   
  2.     System.Collections.ObjectModel.ObservableCollection<string>  
  3. {  
  4.     public Items()  
  5.     {  
  6.         Add("Item 1");  
  7.         Add("Item 2");  
  8.         Add("Item 3");  
  9.         Add("Item 4");  
  10.         Add("Item 5");  
  11.     }  
  12. }  
public class Items : System.Collections.ObjectModel.ObservableCollection<string> { public Items() { Add("Item 1"); Add("Item 2"); Add("Item 3"); Add("Item 4"); Add("Item 5"); } }

显示效果如下:

 


总结:

ItemsPanelTemplate主要用于带有Item项的控件风格布局模板设置,常见的控件就是ListBox,

 原创地址:http://blog.csdn.net/mr_raptor/article/details/7251948

DataTemplate 类

  用于定义内容控件内数据对象的可视结构模板。虽然内容控件只能包含一个UIElement,但是,它可以包含一个容器控件,从而可以间接的包含多个子控件,而DataContent就是为这些容器控件里的子控件进行布局的模板类。

下面的例子,自定了ListBox中每一项中的UI如何表现。每一个Item中包含四个水平布局的TextBlock控件,每个TextBlock控件都绑定了Customers的属性。

XAML:

  1. <Grid>  
  2.     <Grid.Resources>  
  3.         <src:Customers x:Key="customers"/>  
  4.     </Grid.Resources>  
  5.   
  6.     <ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10">  
  7.         <ListBox.ItemTemplate>  
  8.             <DataTemplate>  
  9.                 <StackPanel Orientation="Horizontal">  
  10.                     <TextBlock Padding="5,0,5,0"  
  11.                        Text="{Binding FirstName}" />  
  12.                     <TextBlock Text="{Binding LastName}" />  
  13.                     <TextBlock Text=", " />  
  14.                     <TextBlock Text="{Binding Address}" />  
  15.                 </StackPanel>  
  16.             </DataTemplate>  
  17.         </ListBox.ItemTemplate>  
  18.     </ListBox>  
  19. </Grid>  
<Grid> <Grid.Resources> <src:Customers x:Key="customers"/> </Grid.Resources> <ListBox ItemsSource="{StaticResource customers}" Width="350" Margin="0,5,0,10"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Padding="5,0,5,0" Text="{Binding FirstName}" /> <TextBlock Text="{Binding LastName}" /> <TextBlock Text=", " /> <TextBlock Text="{Binding Address}" /> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid>


C#:

[csharp] view plain copy print ?
  1. public class Customer  
  2. {  
  3.     public String FirstName { getset; }  
  4.     public String LastName { getset; }  
  5.     public String Address { getset; }  
  6.   
  7.     public Customer(String firstName, String lastName, String address)  
  8.     {  
  9.         this.FirstName = firstName;  
  10.         this.LastName = lastName;  
  11.         this.Address = address;  
  12.     }  
  13. }  
  14.   
  15. public class Customers : ObservableCollection<Customer>  
  16. {  
  17.     public Customers()  
  18.     {  
  19.         Add(new Customer("Michael""Anderberg",  
  20.                 "12 North Third Street, Apartment 45"));  
  21.         Add(new Customer("Chris""Ashton",  
  22.                 "34 West Fifth Street, Apartment 67"));  
  23.         Add(new Customer("Cassie""Hicks",  
  24.                 "56 East Seventh Street, Apartment 89"));  
  25.         Add(new Customer("Guido""Pica",  
  26.                 "78 South Ninth Street, Apartment 10"));  
  27.     }  
  28. }  
public class Customer { public String FirstName { get; set; } public String LastName { get; set; } public String Address { get; set; } public Customer(String firstName, String lastName, String address) { this.FirstName = firstName; this.LastName = lastName; this.Address = address; } } public class Customers : ObservableCollection<Customer> { public Customers() { Add(new Customer("Michael", "Anderberg", "12 North Third Street, Apartment 45")); Add(new Customer("Chris", "Ashton", "34 West Fifth Street, Apartment 67")); Add(new Customer("Cassie", "Hicks", "56 East Seventh Street, Apartment 89")); Add(new Customer("Guido", "Pica", "78 South Ninth Street, Apartment 10")); } }


 

二、其它

原创地址:http://blog.csdn.net/mr_raptor/article/details/7251948

DataContext类

 

 

  DataContext是FrameworkElement的属性,是Object类型,用于获取或设置 FrameworkElement 参与数据绑定时的数据上下文。也就是说它是被数据绑定的对象。

DataContext也就是第四代控件祖宗的属性(说实话,控件从第三代祖宗UIElement开始才有了外观,有了点人样),

如果你给它绑定了数据源,CLR就会从数据源里拿出对应数据用于显示,DataContext有传递性,如果外部包含控件设置了DataContext,被包含控件没有设置该属性,则被包含控件也可以使用外部包含控件的DataContext。

比如:

 XAML:

  1. <phone:PhoneApplicationPage.Resources>  
  2.             <local:WeiBoData x:Key="MyWeiBoData"/>  
  3. </phone:PhoneApplicationPage.Resources>  
  4.   
  5. <Grid x:Name="LayoutRoot" Background="Transparent"  DataContext="{StaticResource MyWeiBoData}">  
  6.         <StackPanel Grid.Row="0" Margin="12,17,0,28">  
  7.             <TextBlock x:Name="DateTextBlock" Text="{Binding WeiBoDate}" >  
  8.             <TextBlock x:Name="TitleTextBlock" Text="{Binding WeiBoTitle}" />  
  9.         </StackPanel>  
  10. </Grid>  
<phone:PhoneApplicationPage.Resources> <local:WeiBoData x:Key="MyWeiBoData"/> </phone:PhoneApplicationPage.Resources> <Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{StaticResource MyWeiBoData}"> <StackPanel Grid.Row="0" Margin="12,17,0,28"> <TextBlock x:Name="DateTextBlock" Text="{Binding WeiBoDate}" > <TextBlock x:Name="TitleTextBlock" Text="{Binding WeiBoTitle}" /> </StackPanel> </Grid>


WeiBoData类中包含有WeiBoDate属性和WeiBoTitle属性,虽然没有指定两个TextBlock的绑定对象,但是它有Grid控件的DataContext。

 在后续两节,我们分别以这两节的知识,分享两个例子:

自定义水印密码输入控件下拉刷新控件

注:上述两个控件经常使用,并且方便快捷。

 

++++++++++++++++++++++++++++++++++++++++++

本文系本站原创,欢迎转载! 转载请注明出处:

http://blog.csdn.net/mr_raptor/article/details/http://blog.csdn.net/mr_raptor/article/details/7251948

++++++++++++++++++++++++++++++++++++++++++

上一篇: WindowsPhone自定义控件详解(一) - 控件类库分析
相关文章
|
7月前
|
C# Windows
2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>
2000条你应知的WPF小姿势 基础篇<78-81 Dialog/Location/WPF设备无关性>
55 0
|
5月前
|
数据可视化 图形学 流计算
Unity 操作常用控件(下)
Unity 操作常用控件(下)
Revit 二次开发添加WPF窗口的办法
Revit 二次开发添加WPF窗口的办法
Revit 二次开发添加WPF窗口的办法
基于C#的ArcEngine二次开发31:addin开发时调用ArcMap的进度条
基于C#的ArcEngine二次开发31:addin开发时调用ArcMap的进度条
基于C#的ArcEngine二次开发31:addin开发时调用ArcMap的进度条
|
数据安全/隐私保护
8、QT基础——常用控件
8、QT基础——常用控件
287 0
8、QT基础——常用控件
|
程序员 C语言 索引
Qt编写自定义控件55-手机通讯录
一、前言 前面几篇文章中的控件基本上难度系数接近0,甚至有凑控件数量的嫌疑,这次必须来一个强悍的控件,本控件难度系数在所有控件中排前五,代码量也不少,头文件都550行,实现文件1600行,为什么这么多呢,其实本控件是由好多个子控件组成的,字母高亮背景类、中间字母分隔类、右侧字母导航类、通讯录按钮类、自定义滚动条类,我在写比较复杂的控件的时候,一般都会逐个功能拆分,然后思考是否该功能可以做成独立的类,这样管理起来比较方便,也方便查看代码。
818 0
|
程序员 C语言
Qt编写自定义控件50-迷你仪表盘
一、前言 这个控件取名叫迷你仪表盘,是以为该控件可以缩小到很小很小的区域显示,非常适合小面积区域展示仪表数据使用,还可以手动触摸调节进度,是我个人觉得最漂亮小巧的一个控件。初次看到类似的控件是在一个音乐视频编辑软件中,用来展示左通道右通道音量等,有非常多的类似的迷你仪表盘在整个软件系统中,用户可以直接鼠标滑动调节,以最小的占用区域展示最大的信息,漂亮!本控件还拓展了可以左右等分显示,比如中间的值是0,左侧就是低于0的值区域,右侧就是大于0的值区域,进度不一样展示,支持左右旋转角度设置以及各种颜色的设置。
884 0
|
程序员 开发工具 C语言
Qt编写自定义控件1-汽车仪表盘
一、前言 汽车仪表盘几乎是qt写仪表盘控件中最常见的,一般来说先要求美工做好设计图,然后设计效果图给到程序员,由程序员根据效果来实现,主要靠贴图,这种方法有个好处就是做出来的效果比较逼真,和真实效果图基本上保持一致,而且程序员也不会那么累,基本上入门级别的程序员都可以搞定,效率比较高,缺点是如果用户需要更改某个部件的颜色,比如指针的颜色等,需要重新做效果图贴图才能实现,比较麻烦,还有一点就是如果效果图原图不是很大,则遇到特殊分辨率情况下,可能会有失真的情况,被强制拉伸等。
1172 0
|
开发工具 C语言
Qt编写自定义控件6-指南针仪表盘
一、前言 指南针仪表盘,主要用来指示东南西北四个方位,双向对称两个指针旋转,其实就是360度打转,功能属于简单型,可能指针的绘制稍微难一点,需要计算多个点构成多边形,本系列控件文章将会连续发100+篇,一方面为了锻炼自己的毅力+坚持力,一方面为了宣传自己,如果各位对完整的源码有兴趣可以私聊,也欢迎...
1112 0
|
测试技术
艾伟:WinForm控件开发总结(二)------使用和调试自定义控件
在上一篇文章里我们创建了一个简单的控件FirstControl,现在我来介绍一下怎么使用和调试自己的控件。我希望将过程写的尽可能的详细,让想学习控件开发的朋友容易上手,高手们见谅。       在同一个solution里添加一个Windows Application工程(在Solution Explorer里右键点击CustomControlSample solution选择Add->New Project…),命名为TestControl。
864 0