WPF入门8：模板（Template）

WPF入门8：什么是模板（Template）

什么是模板（Template）？

模板应用在View层，它的主要作用是修改控件的样式、交互、数据展示。
模板主要分为：DataTemplate 和 ControlTemplate。

ControlTemplate它决定了控件“长成什么样子”，并让开发者有机会在控件原有的内部逻辑基础上扩展自己的逻辑。
DataTemplate是数据内容的展示方式，一条数据显示成什么样子，是简单的文本还是直观的图形就由它来决定了。

  <Window.Resources><DataTemplate x:Key="songSheetDataTemplate"><StackPanel Orientation="Horizontal"><ImageWidth="30"Height="30"Source="{Binding Path=Icon}" /><TextBlockHorizontalAlignment="Center"VerticalAlignment="Center"FontSize="14"FontWeight="Bold"Text="{Binding Path=Name}" /></StackPanel></DataTemplate><ControlTemplate x:Key="ButtonTemplate" TargetType="Button"><!--  定义视觉树  --><Grid><EllipseName="faceEllipse"Width="{TemplateBinding Button.Width}"Height="{TemplateBinding Control.Height}"Fill="{TemplateBinding Button.Background}" /><TextBlockName="txtBlock"Margin="{TemplateBinding Button.Padding}"HorizontalAlignment="Center"VerticalAlignment="Center"Text="{TemplateBinding Button.Content}" /></Grid><!--  定义视觉树_end  --><!--  定义触发器  --><ControlTemplate.Triggers><Trigger Property="Button.IsMouseOver" Value="True"><Setter Property="Button.Foreground" Value="Red" /></Trigger></ControlTemplate.Triggers><!--  定义触发器_End  --></ControlTemplate></Window.Resources>

 <Grid><Grid.RowDefinitions><RowDefinition Height="2*" /><RowDefinition Height="6*" /><RowDefinition Height="2*" /></Grid.RowDefinitions><Grid.ColumnDefinitions><ColumnDefinition Width="2*" /><ColumnDefinition Width="8*" /></Grid.ColumnDefinitions><ListBoxx:Name="LstSongSheets"Grid.Row="1"ItemTemplate="{StaticResource songSheetDataTemplate}"ItemsSource="{Binding Path=SongSheets}" /><DataGridGrid.Row="1"Grid.Column="1"AutoGenerateColumns="False"ItemsSource="{Binding ElementName=LstSongSheets, Path=SelectedItem.Songs}"RowHeaderWidth="0"><DataGrid.Columns><DataGridTextColumnWidth="150"Binding="{Binding Path=Name}"Header="歌名" /><DataGridTextColumnWidth="150"Binding="{Binding Path=Singer}"Header="歌手" /><DataGridTextColumnWidth="150"Binding="{Binding Path=AlbumTitle}"Header="专辑" /><DataGridTextColumnWidth="150"Binding="{Binding Path=Lenght}"Header="时长" /></DataGrid.Columns></DataGrid><StackPanelGrid.Row="2"Grid.Column="1"Width="195"Height="40"Orientation="Horizontal"><ButtonWidth="55"Height="25"Margin="5"Content="上一曲"Template="{StaticResource ButtonTemplate}" /><ButtonGrid.Row="2"Width="55"Height="25"Margin="5"Content="播放"Template="{StaticResource ButtonTemplate}" /><ButtonGrid.Row="2"Width="55"Height="25"Margin="5"Content="下一曲"Template="{StaticResource ButtonTemplate}" /></StackPanel></Grid>

amespace Juster.Music.Models
{/// <summary>/// 歌单/// </summary>public class SongSheetModel{/// <summary>/// 歌单名称/// </summary>public string Name { get; set; }/// <summary>/// 歌单图标/// </summary>public string Icon { get; set; }/// <summary>/// 歌单里所包含的歌曲/// </summary>public List<SongModel> Songs { get; set; }public override string ToString(){return Name;}}
}

 /// <summary>/// 歌曲模型/// </summary>public class SongModel{/// <summary>/// 名称/// </summary>public string Name { get; set; }/// <summary>/// 歌曲存放地址/// </summary>public string Url { get; set; }/// <summary>/// 歌手/// </summary>public string Singer { get; set; }/// <summary>/// 歌曲时长（s）/// </summary>public int Lenght { get; set; }/// <summary>/// 专辑名称/// </summary>public string AlbumTitle { get; set; }}

public class DataService{public static List<SongSheetDTO> GetSongSheet() {List<SongSheetDTO> songSheets = new List<SongSheetDTO>();var songSheetJay = new SongSheetDTO();songSheetJay.Name = "周杰伦的歌单";songSheetJay.Icon = "/Juster.Common;component/imgs/music.png";songSheetJay.Songs = new List<SongDTO>() {new SongDTO{ Name = "七里香" , AlbumTitle = "叶惠美" , Lenght = 800 , Singer = "周杰伦" , Url = "七里香.mp3" },new SongDTO{ Name = "外婆" , AlbumTitle = "叶惠美" , Lenght = 800 , Singer = "周杰伦" , Url = "外婆.mp3" },new SongDTO{ Name = "将军" , AlbumTitle = "叶惠美" , Lenght = 800 , Singer = "周杰伦" , Url = "将军.mp3" },new SongDTO{ Name = "搁浅" , AlbumTitle = "叶惠美" , Lenght = 800 , Singer = "周杰伦" , Url = "搁浅.mp3" }};songSheets.Add(songSheetJay);var songSheetJolin = new SongSheetDTO();songSheetJolin.Name = "蔡依林的歌单";songSheetJolin.Icon = "/Juster.Common;component/imgs/music.png";songSheetJolin.Songs = new List<SongDTO>(){new SongDTO{ Name = "倒带" , AlbumTitle = "城堡" , Lenght = 800 , Singer = "蔡依林" , Url = "倒带.mp3" },new SongDTO{ Name = "爱情36计" , AlbumTitle = "城堡" , Lenght = 800 , Singer = "蔡依林" , Url = "爱情36计.mp3" },new SongDTO{ Name = "海盗" , AlbumTitle = "城堡" , Lenght = 800 , Singer = "蔡依林" , Url = "海盗.mp3" },new SongDTO{ Name = "柠檬草的味道" , AlbumTitle = "城堡" , Lenght = 800 , Singer = "蔡依林" , Url = "柠檬草的味道.mp3" }};songSheets.Add(songSheetJolin);return songSheets;}}/// <summary>/// 歌曲模型/// </summary>public class SongDTO{/// <summary>/// 名称/// </summary>public string Name { get; set; }/// <summary>/// 歌曲存放地址/// </summary>public string Url { get; set; }/// <summary>/// 歌手/// </summary>public string Singer { get; set; }/// <summary>/// 歌曲时长（s）/// </summary>public int Lenght { get; set; }/// <summary>/// 专辑名称/// </summary>public string AlbumTitle { get; set; }}/// <summary>/// 歌单/// </summary>public class SongSheetDTO{/// <summary>/// 歌单名称/// </summary>public string Name { get; set; }/// <summary>/// 歌单图标/// </summary>public string Icon { get; set; }/// <summary>/// 歌单里所包含的歌曲/// </summary>public List<SongDTO> Songs { get; set; }}

WPF入门8：模板（Template）相关推荐

WPF入门（六）样式Style
wpf提供了一种类似css的对象- style,但是比css更强大.它支持直接设定属性,更改呈现模板,触发器,事件触发等.MSDN描述如下: MSDN 可以在从 FrameworkElement 或 ...
你知道WPF这三大模板实例运用吗？
1.介绍对于Windows桌面端应用开发来讲,WPF以其界面渲染的特殊性,灵活的界面布局而让人津津乐道,因为它能为用户提供更好的交互体验.如何利用WPF开发出让人赏心悦目的界面与功能呢?这里不仅仅只 ...
WPF入门教程系列(二) 深入剖析WPF Binding的使用方法
同一个对象(特指System.Windows.DependencyObject的子类)的同一种属性(特指DependencyProperty)只能拥有一个binding. 这一点可以通过设置bindi ...
WPF入门0：WPF的基础知识
WPF入门0:WPF的基础知识 WPF 可创建动态的数据驱动的呈现系统. 系统的每一部分均可通过驱动行为的属性集来创建对象. 数据绑定是系统的基础部分,在每一层中均进行了集成. 传统的应用程序创建一个 ...
《深入浅出WPF》笔记——模板篇
原文:<深入浅出WPF>笔记--模板篇我们通常说的模板是用来参照的,同样在WPF中,模板是用来作为制作控件的参照. 一.认识模板 1.1WPF菜鸟看模板前面的记录有提过,控件主要是算法 ...
简述类模板函数模板template （typename T）
相信很多刚入门c++的同学在学数据结构或者查看大佬的代码中,我们都会看到: template <typename T> 类模板; template<typename T> cl ...
WPF入门(三)-几何图形之不规则图形(PathGeometry) (2)
WPF入门(三)->几何图形之不规则图形(PathGeometry) (2) 原文:WPF入门(三)->几何图形之不规则图形(PathGeometry) (2) 上一节我们介绍了PathG ...
WPF入门教程-转载
最近为了做炫酷的UI,了解了WPF,之前一直是使用winform的,界面也是古老的不行. 在园里找到了一个大佬以前写的教程,备注一下.按照系列教程走下来,可以直接上手了. 备忘传送门>>& ...
C++中的模板template
1.Cpp中的模板template 模板是泛型编程的基础,泛型编程即以一种独立于任何特定类型的方式编写代码.模板是创建泛型类或函数的蓝图或公式.库容器,比如迭代器和算法都是泛型编程的例子,它们都使用了 ...

WPF入门8：模板（Template）

WPF入门8：什么是模板（Template）

WPF入门8：模板（Template）相关推荐

最新文章

热门文章