零元學Expression Blend 4 - Chapter 29 ListBox與Button結合運用的簡單功能

本章所講的是運用ListBox、TextBox與Button,做出簡單的列表新增刪除功能

這種功能常常在很多小地方運用到

 

好久沒發文了,先祝大家新年快樂!

 

本章所講的是運用ListBoxTextBoxButton,做出簡單的列表新增刪除功能

這種功能常常在很多小地方運用到

 

此為本篇範例最後的成果

 

OK~開始吧!

 

01

請在工作區內放入ListBox、TextBox以及兩個Button,位置置於如下圖

(如果對ListBox基本屬性還不瞭解的朋友,請看此篇。)

image

 

02

接著為這四個物件命名

範例內的命名為:

ListBox=ListBox1

TextBox=TextBox1

Button=AddBtn以及DelBtn

image

 

命名完成後,請把:

(1)TextBox內的預設文字刪除

(2)ListBox內置入數個ListBoxItem

(3)Button改成AddDelete

image

 

以上,前製作業大至完成了

 

03

選取已命名為Add的Button,點選Prpperties->Event會出現一長串的事件狀態

找到Click後於輸入欄點兩下->進入MainPage.cs

image

 

把這段

   1: private void AddBtn_Click(object sender, System.Windows.RoutedEventArgs e)
   2:         {
   3:              // TODO: Add event handler implementation here.
   4:         }

 

取代成這段

   1: private void AddBtn_Click(object sender, System.Windows.RoutedEventArgs e)
   2:  
   3: {
   4:  
   5: ListBox1.Items.Add(TextBox1.Text);
   6:  
   7: }

 

命名為Delete的Button也一樣

把這段

   1: private void DelBtn_Click(object sender, System.Windows.RoutedEventArgs e)
   2:  
   3: {
   4:  
   5: // TODO: Add event handler implementation here.
   6:  
   7: }
   8:  

 

改成這段

   1: private void DelBtn_Click(object sender, System.Windows.RoutedEventArgs e)
   2:  
   3: {
   4:  
   5: ListBox1.Items.RemoveAt
   6:  
   7: (ListBox1.Items.IndexOf(ListBox1.SelectedItem));
   8:  
   9: }

 

04

完成後,按下F5看結果

你會發現Add跟Delete可以作用了

image

 

但是,Add過後TextBox裡的文字並不會消失

我們回到MainPage.cs,加一段

把剛剛的AddBtn_Click這段,更改如下

   1: private void AddBtn_Click(object sender, System.Windows.RoutedEventArgs e)
   2:  
   3: {
   4:  
   5: ListBox1.Items.Add(TextBox1.Text);
   6:  
   7: TextBox1.Text = string.Empty;
   8:  
   9: }

 

再按F5預覽一次

image

 

完成!

 

只是個很簡單的分享,希望對你有幫助。

(若是想看更深入的程式教學,請到Ouch@點部落,附有影片教學)

 

 

 

附上本範例的專案

 

 

本篇的教學就到此。

 

 

(若有任何錯誤的地方,請各位前輩或同好能不吝指教,小女子都會虛心接受;若是你喜歡我的教學,請給我點鼓勵,謝謝。)

一步一步邁向HIE之路

 

喜歡我文章請推我一下或給我個回應,你的鼓勵會給我無限的動力喔!

若是您有其他問題或是特別需要,請在文章回應處留言,我會盡快回覆您