WPF入门8：模板（Template）

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

什么是模板（Template）？

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

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

  <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; }
    }