《15天玩转WPF》—— Data / Control 模板的使用（一）

数据模板就是将数据显示的样子进行一个改变
同理，控件模板也是将控件的样子进行改变，下面我们来探索一下这些知识 . . .

---

DataTemplate

DataTemplate 常用的地方有 3 处，分别是：

ContentControl 的 ContentTemplate属性	给 ContentControl 的内容穿衣服
ItemsControl 的 ItemTemplate属性	给 ItemsControl 的数据条目穿衣服
GridViewColumn 的 CellTemplate属性	给GridViewColumn 单元格里的数据穿衣服

此文章将使用其中的 ItemTemplate进行测试 . . .

我们需要做的事情是将一组数据以柱状图的形式显示出来，这组数据有：
年份、某年谈了多少个女朋友

效果样式类似于这种：

好了，接下来让我们开始吧：

上面的这张图上面有两个数据，分别是 年份 与 个数
它的整体样式是我们需要引用我们的主题 —— DataTemplate 来实现
其中我们也使用的 Binding来连接 ListBox中的 Item

1. 创建DataTemplate ：

<Window.Resources>
        <DataTemplate x:Key="girlNum">
            <Grid>
		<StackPanel Orientation="Horizontal">
                    <Grid>
                        <Rectangle Stroke="Yellow" Fill="Orange" Width="{Binding Num}"/>
                        <TextBlock Text="{Binding Year}"/>            
            	    </Grid>
                    <TextBlock Text="{Binding Num}" Margin="5,0"/>
                </StackPanel>
            </Grid>	
        </DataTemplate>
</Window.Resources>

其中发现我们需要的布局 —— 一个矩形，两个 TextBlock . . . 之所以把这个 DataTemplate放在 资源中是为方便使用，增加程序的可读性.
并且，我们使用Binding来完成 数据驱动UI的理念

2. 使用 ListBox接收数据，并引用 DataTemplate：

<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
        <ListBox x:Name="listBoxKind" ItemTemplate="{StaticResource girlNum}"/>
</Grid>

我们发现引用DataTemplate的时候，引用了一个属性叫 ItemTemplate，开头的时候讲过 . . .

3. 定义一个类，用包含一些属性：

数量、年份

class GirlAndNum
{
        public int Num { get; set; }
	public string Year { get; set; }
}

4. 定义一些数据，并且将这些数据赋值给 ListBox的 ItemsSource属性：

List<GirlAndNum> list = new List<GirlAndNum>()
{
	new GirlAndNum(){Num = 100, Year = "2016年"},
	new GirlAndNum(){Num = 120, Year = "2017年"},
	new GirlAndNum(){Num = 140, Year = "2018年"},
	new GirlAndNum(){Num = 160, Year = "2019年"},
	new GirlAndNum(){Num = 200, Year = "2020年"},
};

this.listBoxKind.ItemsSource = list;	// itemsContorl 的属性

5. 效果图如下：
   

6. 总结：

我们可以看出来，DataTemplate其实并不是太难，为数据穿上衣服而已，合理的使用 DataTemplate 会使程序变的更加漂亮 . . .

---

ControlTemplate

我们可以通过改变 Control的外观来进行更加人性化的界面，比如下面：

如果我们觉得这个 TextBox的样子是圆角矩形比较好看，那我们怎么来实现呢？TextBox的属性也没有用来设计圆角矩形的 . . .

这个时候我们的 ControlTemplate就派上用处了，下面我们就来实现一下吧
我们需要的工具是 VS Blend，这个工具类似于 PS，带有XAML的设计工具

下面让我们来实现一下吧

1. 打开 Blend，并设计我们需要的未改变之前的样子：

2. 右击控件，点出下面的编辑模块副本：
   
   为什么不是创建空白的呢？ 因为为我们是在原有的样子上进行的修改 . . .

3. 自定义名称，用于引用：

4. 观察已经解剖开的 TextBox控件：

我们发现，这个模块是由两个部分组成的：

• border
• border 嵌套的 PART_ContentHost

border 的类型为 Border, PART_ContentHost 的类型为 ScrollViewer.

5. 添加圆角矩形的特性：

6. 引用刚刚定义的 Style：
   

为什么这里是 Style，而不是Resources呢，因为模板的本质就是改变一些风格而已 . . .

7. 效果界面：

现在这个圆角的样子是不是更加可爱了呢 ？

我们怎么样才能把这个设计好的界面使用到 VS2017上面呢？ 其实我需要把这个XAML 文件加入项目之中就可以了

8. 加入到VS2017中：

找到包含 App.xaml 文件并且把它放到项目之中，可以替换项目本身的 App.xaml（最好不要，这种为了方便就算了）. . .

9. 引用模块，效果如图：

10. 总结：

DataTemplate 与 ControlTemplate都是为了让我们看起来更加的舒适而设计，使用好了之后，我们就可以无情的装逼了 . . . 哈哈哈哈 ~~~

---

作者：浪子花梦