Getting started with WPF 8: What is a template (Template)
What is a template?
The template is applied in the View layer, and its main function is to modify the style, interaction, and data display of the control.
Templates are mainly divided into: DataTemplate and ControlTemplate.
- ControlTemplate determines what the control "looks like" and gives developers the opportunity to expand their own logic based on the original internal logic of the control.
- DataTemplate is the display method of data content. It determines what a piece of data looks like, whether it is simple text or intuitive graphics.
<Window.Resources>
<DataTemplate x:Key="songSheetDataTemplate">
<StackPanel Orientation="Horizontal">
<Image
Width="30"
Height="30"
Source="{Binding Path=Icon}" />
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
FontSize="14"
FontWeight="Bold"
Text="{Binding Path=Name}" />
</StackPanel>
</DataTemplate>
<ControlTemplate x:Key="ButtonTemplate" TargetType="Button">
<!-- 定义视觉树 -->
<Grid>
<Ellipse
Name="faceEllipse"
Width="{TemplateBinding Button.Width}"
Height="{TemplateBinding Control.Height}"
Fill="{TemplateBinding Button.Background}" />
<TextBlock
Name="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>
<ListBox
x:Name="LstSongSheets"
Grid.Row="1"
ItemTemplate="{StaticResource songSheetDataTemplate}"
ItemsSource="{Binding Path=SongSheets}" />
<DataGrid
Grid.Row="1"
Grid.Column="1"
AutoGenerateColumns="False"
ItemsSource="{Binding ElementName=LstSongSheets, Path=SelectedItem.Songs}"
RowHeaderWidth="0">
<DataGrid.Columns>
<DataGridTextColumn
Width="150"
Binding="{Binding Path=Name}"
Header="歌名" />
<DataGridTextColumn
Width="150"
Binding="{Binding Path=Singer}"
Header="歌手" />
<DataGridTextColumn
Width="150"
Binding="{Binding Path=AlbumTitle}"
Header="专辑" />
<DataGridTextColumn
Width="150"
Binding="{Binding Path=Lenght}"
Header="时长" />
</DataGrid.Columns>
</DataGrid>
<StackPanel
Grid.Row="2"
Grid.Column="1"
Width="195"
Height="40"
Orientation="Horizontal">
<Button
Width="55"
Height="25"
Margin="5"
Content="上一曲"
Template="{StaticResource ButtonTemplate}" />
<Button
Grid.Row="2"
Width="55"
Height="25"
Margin="5"
Content="播放"
Template="{StaticResource ButtonTemplate}" />
<Button
Grid.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; }
}