WP7開發—簡單記事本的實現

PS：本文不是介紹WP高技術含量的文章，只是通過一個小例子，捎帶介紹下WP的基礎知識，大神和WP高手請繞行。

　　最近自己在學習WP7開發，看過園子裡好多強人的文章，受益匪淺。當然，學習嘛還是要自己動手，自己就做了一個小小的Demo(記事本應用)，該應用主要實現記錄使用者輸入的資訊，可以儲存到檔案中，再次進入時可以看到之前記錄的資訊，該程式很簡單，但是涉及到很多需要注意的知識，希望對你有所協助！

　　該應用用到的技術主要有：隔離儲存、ApplicationBar、文本控制項的一些屬性等！

　　實現思想：1、主介面定義一個Textbox控制項和一個TextBlock控制項，2個控制項充滿Grid，初始狀態Textbox控制項隱藏，TextBlock顯示；

　　　　　　　2、單擊ApplicationBar的Edit按鈕，Textbox顯示並處於選中狀態，TextBlock隱藏；

　　　　　　　3、在TextBox輸入一些常值內容，點擊ApplicationBar的Save，控制項狀態Textbox控制項隱藏，TextBlock顯示，並將Textbox值賦給TextBlock顯示；

　　　　　　　4、退出應用程式，或者切換應用程式重新回到該頁面，顯示之前儲存的資訊；

　　　　　　   5、單擊ApplicationBar的Delete刪除檔案，再次進入該不會顯示之前儲存的資訊。

　　沒做過美工，介面沒怎麼設計，o(∩_∩)o...應用介面如下：

　　下面給出詳細的設計過程，以及設計過程中需要注意的問題：

　　1：首先建立一個WP項目(Windows Phone應用程式)；

　　2：修改主介面標題，以便給介面起個合適的名字，主要是2個TextBlock的Text屬性，代碼如下：

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">            <TextBlock x:Name="ApplicationTitle" Text="我的Demo" Style="{StaticResource PhoneTextNormalStyle}"/>            <TextBlock x:Name="PageTitle" Text="記事本小程式" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/></StackPanel>

　　3：在主介面添加2個控制項Textbox和TextBlock，注意使2個控制項填充整個Grid的方式，我用的是設定 VerticalAlignment="Stretch"和HorizontalAlignment="Stretch"，表示控制項是從四個邊緣向中間Margin的，此時不設定Margin屬性即可。 同時設定控制項顯示和隱藏的屬性是Visibility="Visible"和Visibility="Collapsed"，還有設定Textbox輸入文本自動換行屬性TextWrapping="Wrap"，Textbox控制項按斷行符號(Enter)鍵換行的屬性AcceptsReturn="True"，代碼如下：

              <TextBox Name="myTextBox"                     VerticalAlignment="Stretch"                     HorizontalAlignment="Stretch"                     Visibility="Collapsed"                     Text=""                     TextWrapping="Wrap"                     AcceptsReturn="True" />            <TextBlock Name="myTextBlock"                       VerticalAlignment="Stretch"                       HorizontalAlignment="Stretch"                       Visibility="Visible"                       Text=""                       TextWrapping="Wrap"                       />

　　4：添加3個圖片到項目中，以便在ApplicationBar顯示，右鍵項目--->添加檔案夾--->重新命名為Images--->到C:\Program Files\Microsoft SDKs\Windows Phone\v7.1\Icons\dark目錄下找到需要的圖片粘貼到項目的Images檔案夾下。注意：要設定3個圖片的屬性產生操作為內容，否則在ApplicationBar一直顯示的是XX，而不是設定的圖片。

　　5：把項目自動產生的ApplicationBar代碼的注釋去掉，修改為如下代碼(其中IconUri="/Images/appbar.save.rest.png"屬性設定ApplicationBar的顯示映像的路徑)：

    <phone:PhoneApplicationPage.ApplicationBar>        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">            <shell:ApplicationBarIconButton IconUri="/Images/appbar.edit.rest.png" Text="編輯" Click="ApplicationBarEdit_Click"/>            <shell:ApplicationBarIconButton IconUri="/Images/appbar.save.rest.png" Text="儲存" Click="ApplicationBarSave_Click"/>            <shell:ApplicationBarIconButton IconUri="/Images/appbar.delete.rest.png" Text="刪除" Click="ApplicationBarDel_Click"/>        </shell:ApplicationBar>    </phone:PhoneApplicationPage.ApplicationBar>

　　6：到現在前台頁面已設定完畢，下面開始寫後台代碼。考慮到進入該頁面時需要載入手機記憶體的資訊，故添加PhoneApplicationPage_Loaded事件載入資料，此時整體考慮該頁面，有3個Click事件和一個Load事件。在這裡我寫2個輔助方法來處理隔離儲存的儲存和載入資料：注意SaveData方法的using (var fileStream = storage.OpenFile(fileName, FileMode.Create))句，要定義FileMode類型為Create，因為在記事本有資訊時，重新儲存需要把之前檔案裡的資料清除，這時才保證檔案是最近編輯的資訊。這裡不太好表達，你可以試試非Create的情況。

          private string fileName = "myFile.txt";　　　　  private void SaveData()        {            IsolatedStorageFile storage = IsolatedStorageFile.GetUserStoreForApplication();            using (var fileStream = storage.OpenFile(fileName, FileMode.Create))            {                using (var sr = new StreamWriter(fileStream))                {                    sr.WriteLine(myTextBox.Text);                }            }        }        private void LoadData()        {            IsolatedStorageFile appstorage = IsolatedStorageFile.GetUserStoreForApplication();            using (var fileStream = appstorage.OpenFile(fileName, FileMode.OpenOrCreate))            {                using (var sr = new StreamReader(fileStream))                {                    myTextBlock.Text = sr.ReadToEnd();                }            }        }

　　7：添加Edit事件：注意這裡先判斷了當前頁面的狀態，如果處於非編輯狀態才會執行

        private void ApplicationBarEdit_Click(object sender, EventArgs e)        {            if (myTextBlock.Visibility == Visibility.Visible)            {                myTextBox.Text = myTextBlock.Text;                myTextBox.Visibility = Visibility.Visible;                myTextBlock.Visibility = Visibility.Collapsed;                myTextBox.Focus();            }        }

　　8：添加Save事件：

        private void ApplicationBarSave_Click(object sender, EventArgs e)        {            if (myTextBox.Visibility == Visibility.Visible)            {                SaveData();                myTextBlock.Text = myTextBox.Text;                myTextBlock.Visibility = Visibility.Visible;                myTextBox.Visibility = Visibility.Collapsed;            }        }

　　9：添加Delete事件：

        private void ApplicationBarDel_Click(object sender, EventArgs e)        {            if (myTextBlock.Visibility == Visibility.Visible)            {                myTextBox.Text = "";                SaveData();                myTextBlock.Text = "";                myTextBlock.Visibility = Visibility.Visible;                myTextBox.Visibility = Visibility.Collapsed;            }        }

至此，該記事本小應用就算完成，裡面還有很多細節沒有提到，望讀者自己挖掘！