WPF---數據模板（一）

一、場景模擬

假設我們現在有如下需求：

我們需要在ListBox中的每個Item中顯示某個成員的姓名、年齡以及喜歡的顏色，點擊Item的時候，會在右邊顯示詳細信息，同時也想讓ListBox的樣式變得好看一些，比如帶有綠色邊框等。

為了實現以上需求，我們可以使用控件模板來修改ListBox的默認樣式，使之變得生動有趣，使用數據模板來改變ListBoxItem的數據呈現形式。

二、Demo

為了改變ListBoxItem的外觀，我們在資源里定義一個名字為listBoxItemTemplate的數據模板，模板中使用Binding將數據進行關聯，然后為ListBox的ItemTemplate屬性進行賦值。

當我們點擊左面ListBoxItem的時候，為了能在右面顯示詳細信息，我們定義四個Label，綁定左側選中的ListBoxItem。

為了綁定方便，我們為四個Label加個父容器StackPanel，並將它的DataContext屬性綁定到選中的ListBoxItem上（四個Label的DataContext就會繼承StackPanel的DataContext屬性）。

具體代碼以及運行截圖參見以下：

using System.Collections.ObjectModel;
using System.Windows;

namespace DataTemplateDemo1
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>

    public partial class MainWindow : Window
    {
        private ObservableCollection<Student> observableCollection = new ObservableCollection<Student>();
        public  ObservableCollection<Student> ObservableCollection
        {
            get { return observableCollection; }
            set { observableCollection = value; }
        }
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this;
            observableCollection.Add(new Student() {Name = "Tom", Age= 16, FavorColor="Red",Hobby="Swim" });
            observableCollection.Add(new Student() { Name = "Maty", Age = 18, FavorColor = "Green" ,Hobby="Football"});
            observableCollection.Add(new Student() { Name = "Alice", Age = 19, FavorColor = "Yellow" ,Hobby="Running"});
        }
    }

    public class Student
    {
        public int Age { get; set; }
        public string Name { get; set; }
        public string FavorColor { get; set; }
        public string Hobby { get; set; }
    }

}

 

<Window x:Class="DataTemplateDemo1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:DataTemplateDemo1"
        mc:Ignorable="d"
        Title="DataTemplateDemo" Height="350" Width="525">
    <Window.Resources>

        <ControlTemplate x:Key="ListBoxControlTemplate" TargetType="ListBox">
            <Grid>
                <Border BorderBrush="Green" BorderThickness="1" CornerRadius="5" >
                    <Grid>
                        <ItemsPresenter TextBlock.Foreground="Green"></ItemsPresenter>
                    </Grid>
                </Border>
            </Grid>
        </ControlTemplate>

        <DataTemplate x:Key="listBoxItemTemplate">
            <Grid Height="50">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <Grid.RowDefinitions>
                    <RowDefinition/>
                    <RowDefinition/>
                </Grid.RowDefinitions>
                <TextBlock  Name="textbox1" Text="{Binding Name}" Grid.Row="0" Margin="5"/>
                <TextBlock  Name="textbox2" Text="{Binding Age}" Grid.Row="1" Margin="5"/>
                <Rectangle Fill="{Binding FavorColor}" Grid.Column="1" Grid.Row="0" Grid.RowSpan="2" Margin="3"></Rectangle>

            </Grid>
        </DataTemplate>
    </Window.Resources>
    <Grid>
        <StackPanel Orientation="Horizontal">

            <ListBox Margin="5" Name="stuList"
                 Template="{StaticResource ListBoxControlTemplate}" 
                 ItemsSource="{Binding ObservableCollection}" 
                 ItemTemplate="{StaticResource listBoxItemTemplate}">
            </ListBox>
            <StackPanel DataContext="{Binding Path=SelectedItem,ElementName=stuList}">
                <Label Content="{Binding Name}"></Label>
                <Label Content="{Binding Age}"></Label>
                <Label Content="{Binding FavorColor}"></Label>
                <Label Content="{Binding Hobby}"></Label>
            </StackPanel>
        </StackPanel>

    </Grid>
</Window>