[Windows Phone] 清單項目使用項目樣板（ItemTemplate）下

2014-01-01

672
0
Windows Phone
2014-01-20

本篇文章與前篇清單項目使用項目樣板（ItemTemplate）上一樣，只是多加一個功能，能將自己所選擇的資料更詳細的顯示在下面。

前言

本篇文章與前篇清單項目使用項目樣板（ItemTemplate）上一樣，只是多加一個功能，能將自己所選擇的資料更詳細的顯示在下面。

示範

Step1、建立一個新專案

Step2、畫面設計

以 XAML 建立項目控制項，如下圖：

產生的 XAML 程式碼如下：

<StackPanel x:Name="ContentPanel" Grid.Row="1" Orientation="Vertical" Margin="12,0,12,0">
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="學號" FontSize="20" Margin="5,10" />
                <TextBlock Text="姓名" FontSize="20" Margin="30,10" />
                <TextBlock Text="生日" FontSize="20" Margin="44,10" />
            </StackPanel>
            <ListBox x:Name="ListBox1" 
                       Width="450" Height="200" HorizontalAlignment="Left"
                       ItemsSource="{Binding}" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="{Binding StuNo}"  FontSize="20" Margin="5,10" />
                            <TextBlock Text="{Binding StuNa}"  FontSize="20" Margin="20,10" />
                            <TextBlock Text="{Binding BirDate}"  FontSize="20" Margin="30,10" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

            <StackPanel x:Name="detailCusRec">
                <TextBlock Text="{Binding ElementName=ListBox1, Path=SelectedItem.StuNo}" FontWeight="Bold" />
                <TextBlock Text="{Binding ElementName=ListBox1, Path=SelectedItem.StuNa}" FontStyle="Italic"/>
                <TextBlock Text="{Binding ElementName=ListBox1, Path=SelectedItem.BirDate}"  />
            </StackPanel>
</StackPanel>

Step3、在 MainPage.cs 程式碼中撰寫事件處理函式：

public partial class MainPage : PhoneApplicationPage
    {
        public ObservableCollection<StuRec> stuRec = new ObservableCollection<StuRec>();
        public MainPage()
        {
            InitializeComponent();
            stuRec.Add(new StuRec("10014501", "張小美", new DateTime(1995, 11, 22)));
            stuRec.Add(new StuRec("10014502", "劉阿貓", new DateTime(1996, 1, 5)));
            stuRec.Add(new StuRec("10014503", "王小明", new DateTime(1984, 10, 19)));
            // Set the data context for the list box.
            ListBox1.DataContext = stuRec;
        }
        public class StuRec
        {
            public StuRec() { }
            public StuRec(string stuNo, string stuNa, DateTime birDate)
            {
                StuNo = stuNo;
                StuNa = stuNa;
                BirDate = birDate;
            }
            public string StuNo { get; set; }
            public string StuNa { get; set; }
            public DateTime BirDate { get; set; }

            // 改寫ToString 方法
            public override string ToString()
            {
                return "學號:  " + StuNo + " 姓名:  " + StuNa + " 的學生，" + "\n" +
                            "生日為 " + BirDate.ToShortDateString();
            }
        }
}

結果

執行時，會出現你所打的資料

點擊一筆資料，下方會顯示

回首頁