C# Windows Phone 8 ,使用Binding創建ListBox的子項目,並解決資料更新後UI沒更新的窘境 !!

  • 2674
  • 0
  • C#
  • 2015-06-08

一般我們在開發Windows Phone 8 時,常常會接收網路上的資料來放進UI裡,也就是說我們的資料數目是動態的,這時我們與其自己一項項建立UI,不如將這些不固定長度的資料透過Binding的方式放入ListBox中,如此一來可省去使用者處理資料上的麻煩。

本文章將引導您透過Binding的方式,將資料放進ListBox。

一般我們在開發Windows Phone 8 時,常常會接收網路上的資料來放進UI裡,也就是說我們的資料數目是動態的,這時我們與其自己一項項建立UI,不如將這些不固定長度的資料透過Binding的方式放入ListBox中,如此一來可省去使用者處理資料上的麻煩。

 

本文章將引導您透過Binding的方式,將資料放進ListBox。

 

 

首先假設要建立的是學生的資料,以【姓名】和【座號】為例。

 

步驟一:

在MainPage.xmal中放置一個ListBox的控制向,並命名為【List_Students】

1

 

步驟二:

在MainPage.xmal裡的ListBox的子屬性下建立Template,也就是樣板,假設目前資料數目有5筆,ListBox就會根據Template自動創建五次來放資料的內容。

所以在Template中我們需要兩個TextBlock來放置【姓名】和【座號】,Text的屬性要放置【Binding XXX】,XXX是等會兒實作程式時會用到的,這邊以Name和ID做示範。

<ListBox x:Name="List_Students">
        <ListBox.ItemTemplate>
            <DataTemplate>
                <StackPanel Orientation="Horizontal">
                    <TextBlock Text="{Binding ID}" />
                    <TextBlock Text="{Binding Name}" />
                </StackPanel>
            </DataTemplate>
        </ListBox.ItemTemplate>
</ListBox>

 

步驟三:

建立一個學生資料的Class 並透過【自動屬性】建立該類別叫做【Student_Item】,其中包含【姓名】和【座號】

這邊的屬性名稱要跟剛剛在Xaml上TextBlockk的Text屬性相對應,也就是Name和ID。

class Student_Item
    {
        public string Name { get; set; }//學生的姓名
        public string ID{ get; set; }//學生的座號
    }

 

步驟四:

在主程式MainPage.xaml.cs裡建立Student_Item的陣列來放置學生的資料。

onNavigatedTo頁面巡覽請參閱Windows Phone 8 C# 換頁傳遞參數 兩種方法 Navigation 、PhoneApplicationService

//宣告學生的陣列
private List<Student_Item> Student_Items;
//當該頁面被開啟時
protected override void OnNavigatedTo(NavigationEventArgs e)
{
    base.OnNavigatedTo(e);
    AddStudentData();//建立假資料
}
        
//建立學生的假資料
private void AddStudentData() {
    Student_Items = new List<Student_Item>(); //初始化Student_Items物件
    //開始裝假資料
    Student_Items.Add(new Student_Item(){Name="王小明",ID="1"});
    Student_Items.Add(new Student_Item() { Name = "王一明", ID = "1" });
    Student_Items.Add(new Student_Item() { Name = "王二明", ID = "2" });
    Student_Items.Add(new Student_Item() { Name = "王三明", ID = "3" });
    Student_Items.Add(new Student_Item() { Name = "王四明", ID = "4" });
    Student_Items.Add(new Student_Item() { Name = "王五明", ID = "5" });
    Student_Items.Add(new Student_Item() { Name = "王六明", ID = "6" });
    Student_Items.Add(new Student_Item() { Name = "王七明", ID = "7" });
    //裝完假資料
    List_Students.ItemsSource = Student_Items;//指定ListBox的資料來源為Student_Items的陣列
}

步驟五:

執行看看,完美運行,突然覺得世界很美好!!

2

 

若日後在指定ItemsSource時發現ListBox沒有同步更新,卻還停留在舊資料,可以試試看以下兩種方法

 

方法一:

先指定null再指定回來。

List_Students.ItemsSource = null;
List_Students.ItemsSource = Student_Items;

 

方法二:

方法一+更新UI

List_Students.ItemsSource = null;
List_Students.ItemsSource = Student_Items;
List_Students.UpdateLayout();

 

綜合上述我們已透過Binding的方式,將資料放進ListBox囉!!

文章中的敘述如有觀念不正確錯誤的部分,歡迎告知指正 謝謝
轉載請註明出處

SUKI

HOLIESTAR