DataTemplate

DataTemplate 常用的地方有 3 處，分別是：

ContentControl 的 ContentTemplate屬性	給 ContentControl 的內容穿衣服
ItemsControl 的 ItemTemplate屬性	給 ItemsControl 的數據條目穿衣服
GridViewColumn 的 CellTemplate屬性	給GridViewColumn 單元格里的數據穿衣服

此文章將使用其中的 ItemTemplate進行測試 . . .

我們需要做的事情是將一組數據以柱狀圖的形式顯示出來，這組數據有：
年份、某年談了多少個女朋友

效果樣式類似於這種：

好了，接下來讓我們開始吧：

上面的這張圖上面有兩個數據，分別是年份與個數
它的整體樣式是我們需要引用我們的主題 —— DataTemplate 來實現
其中我們也使用的 Binding來連接 ListBox中的 Item

創建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的理念

使用 ListBox接收數據，並引用 DataTemplate：

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

我們發現引用DataTemplate的時候，引用了一個屬性叫 ItemTemplate，開頭的時候講過 . . .

定義一個類，用包含一些屬性：

數量、年份

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

定義一些數據，並且將這些數據賦值給 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 的屬性