WP7 development-Implementation of simple notepad

PS: This article is not an article about the high-tech content of WP. It is just a small example. The article introduces the basic knowledge of WP.

I have recently studied WP7 development and read many articles by strong people in the garden, which has benefited a lot. Of course, you still need to do it on your own, and you have made a small Demo (Notepad application). This application mainly records user input information and can be saved to files, when you enter again, you can see the information recorded previously. This program is very simple, but involves a lot of knowledge that needs to be paid attention to. I hope it will help you!

This application mainly uses the following technologies: isolated storage, ApplicationBar, and some attributes of text controls!

Implementation philosophy: 1. the main interface defines a Textbox Control and a TextBlock control. The two controls are full of Grid, the initial state Textbox Control is hidden, and TextBlock is displayed;

2. Click the Edit button of ApplicationBar. the Textbox is displayed and selected, and the TextBlock is hidden;

3. Enter some text content in TextBox, click Save of ApplicationBar, control status Textbox Control hide, TextBlock display, and assign Textbox value to TextBlock display;

4. Exit the application, or switch the application back to the page to display the previously stored information;

5. Click Delete of ApplicationBar to Delete the file and enter again. The information stored previously is not displayed.

I have never worked as an artist, and I have not designed the interface. The o (cost _ efficiency) o... application interface is as follows:

The following describes the detailed design process and issues that need attention during the design process:

1: first create a WP Project (Windows Phone application );

2: Modify the title of the main interface to give the interface a proper name, mainly the Text attribute of two textblocks. The Code is as follows:

<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
< TextBlock X: name = "applicationtitle" text = "my demo" style = "{staticresource phonetextnormalstyle}" / >
< TextBlock X: name = "PageTitle" text = "Notepad applet" margin = "9, - 7,0,0" style = "{staticresource phonetexttitle1style}" / >
</StackPanel>

3: Add two Textbox and TextBlock controls on the main interface. Note that the two controls are filled with the entire Grid. I used verticalignment = "Stretch" and HorizontalAlignment = "Stretch ", it indicates that the control is directed from four edges to the middle of Margin. In this case, the Margin attribute is not set. The display and hidden properties of the control are set to Visibility = "Visible" and Visibility = "Collapsed", as well as the automatic line feed attribute TextWrapping = "Wrap ", press Enter to wrap the Textbox Control. The Code is as follows:

<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: add three Images to the project so that they can be displayed in ApplicationBar. Right-click the project and choose add folder> Rename to Images> C: \ Program Files \ Microsoft SDKs \ Windows Phone \ v7.1 \ Icons \ dark directory find the desired image and paste it to the Images folder of the project. Note: You must set the property generation operation of the three images as the content. Otherwise, XX is always displayed on the ApplicationBar, rather than the set image.

5: remove the comments of the automatically generated ApplicationBar code from the project and change them to the following code (where the IconUri = "/Images/appbar.save.rest.png" attribute sets the path of the display image of ApplicationBar ):

<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
< shell: applicationbariconbutton iconuri = "/ images / AppBar. Edit. Rest. PNG" text = "Edit" Click = "applicationbaredit? Click" / >
< shell: applicationbariconbutton iconuri = "/ images / AppBar. Save. Rest. PNG" text = "save" Click = "applicationbarisave? Click" / >
< shell: applicationbariconbutton iconuri = "/ images / AppBar. Delete. Rest. PNG" text = "delete" Click = "applicationbardel? Click" / >
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

6: Now the front-end page has been set up. Write the background code below. Considering that the phone memory information needs to be loaded when entering the page, the PhoneApplicationPage_Loaded event is added to Load data. In this case, the page contains three Click events and one Load event. Here I write two auxiliary methods to process the storage and data loading of isolated storage: note that the using (var fileStream = storage) of the SaveData method. openFile (fileName, FileMode. create) statement, to define the FileMode type as Create, because when there is information in notepad, re-Save the data in the previous file to clear, then ensure that the file is recently edited information. This is not a good expression. You can try a non-Create scenario.

 
 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. Add the Edit event. Note that the status of the current page is determined first. If the event is not edited, It will be executed.

  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: Add a Save event:

  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: Add a Delete event:

 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;
            }
        }

At this point, even if the small notepad application is completed, there are still many details not mentioned in it. I hope readers can explore it on their own!