A Text Editor App in Windows Store

• Download demo project - 130.6 KB

Introduction

This is a plain text editor for Windows 8. Even though it is relatively a simple app, I have covered some important concepts of App Development for the Windows 8 Platform. Some of these concepts are as follows:

1. Using file pickers for saving and opening files
2. Saving and restoring application state
3. Writing text data to a file on disk and reading text data from a file on disk

Background

File Pickers are very useful for allowing a user to locate a file on the hard disk. There are two types of file pickers. The FileSavePicker class provides functionality to save a file on the disk by specifying the default location, suggested fie name and types of files to be saved. Similarly the FileOpenPicker class provides functionality to open a file from the disk by specifying the default location and types of files to be saved.

Application Data Container can be used to save the state of an app in the app container. The advantage of application data container is that it can be used to automatically save and restore the application state even when the app is terminated.

The FileIO class can be used to save the contents of a file on disk as well as read the contents of a file from disk. It provides the WriteTextAsync() method to write file contents to disk and the ReadTextAsync() method to read file contents from disk.

Using the code

The editor app consists of a multiline textbox whose contents are to be written and read. The following XAML code is used to create a multiline textbox:

<TextBox Name="txtEditor" Canvas.Left="250" Canvas.Top="200" Width="700" Height="400"
AcceptsReturn="True" TextWrapping="Wrap" FontSize="20" ScrollViewer.VerticalScrollBarVisibility="Auto"    
TextChanged="txtEditor_TextChanged_1"/>

In the above code, the AcceptsReturn attribute is set to "True" to make the TextBox multiline and the TextWrapping attribute is set to "Wrap" to enable text wrapping.

Following is the complete xaml code of the Text Editor app:

The TextChanged event is used to save the TextBox contents to the application container every time the contents of the TextBox change. The following is the code of the TextChanged event handler:

private void txtEditor_TextChanged_1(object sender, TextChangedEventArgs e)
{
    ApplicationDataContainer container = ApplicationData.Current.LocalSettings;
    container.Values["CONTENT"] = txtEditor.Text;
}

The above code saves the contents of the TextBox in the application container using the key "CONTENT".

The following code in the OnNavigatedTo event of the MainPage is used to restore the TextBox contents from the application container:

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    ApplicationDataContainer container = ApplicationData.Current.LocalSettings;
    if (container.Values.ContainsKey("CONTENT"))
    {
        txtEditor.Text = container.Values["CONTENT"] as string;
    }
}

The above code restores the application state and displays it in the TextBox after checking if the key "CONTENT" exists in the application container whenever the app is started again.

The following code in the click event of the Save button is used to save the TextBox contents permanently in the file specified by the user.

private async void btnSave_Click_1(object sender, RoutedEventArgs e)
{
    FileSavePicker picker = new FileSavePicker();
    picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
    picker.SuggestedFileName = "New File";
    picker.FileTypeChoices.Add("Text Files", new List<string>() { ".txt" });
    picker.FileTypeChoices.Add("HTML Files", new List<string>() { ".html" });
    StorageFile file = await picker.PickSaveFileAsync();
    if (file != null)
    {
        await FileIO.WriteTextAsync(file, txtEditor.Text);
    }
}</string></string>

The above code saves the contents of the TextBox in a file whose location, name and type are specified by the user. An object of the FileSavePicker class is used to specify the location, name and type of the file. The PickSaveFileAsync method of the FileSavePicker class returns an instance of the StorageFile class representing the file specified by the user. The WriteTextAsync() method of the FileIO class saves the contents of the TextBox to a file. This method takes two parameters, the first is the Storage file object and the second is the text to be saved.

The following code in the click event of the Open button is used to retrieve the TextBox contents from the file selected by the user.

private async void btnOpen_Click_1(object sender, RoutedEventArgs e)
{
    FileOpenPicker picker = new FileOpenPicker();
    picker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
    picker.FileTypeFilter.Add(".txt");
    picker.FileTypeFilter.Add(".html");
    StorageFile file = await picker.PickSingleFileAsync();
    if (file != null)
    {
        txtEditor.Text = await FileIO.ReadTextAsync(file);
    }
}

The above code reads the contents of the file whose location, name and type are specified by the user and displays the contents in the TextBox. An object of the FileOpenPicker class is used to specify the location and type of the file. The PickSingleFileAsync()method of the FileOpenPicker class returns an instance of the StorageFile class representing the file selected by the user. The ReadTextAsync() method of the FileIO class reads the contents of a file. This method takes one parameter of the type StorageFile and returns the contents of the file in string format.

Points of Interest

I hope this article will be useful in understanding the basic file handling concepts in Windows Store Apps.