Exploring Win8 Metro: The RichEditBox & FilePickers

Win8 provides a number of controls in the XAML toolkit that are easy to use and that provide a great deal of flexibility and power.  I’ll be writing about some of these controls now and then, starting with some simple and easy to use controls that do a lot of work for you.

The RichEdit box allows the user to open and view and edit a Rich Text document. Rich Text refers to all the text attributes you associate with a word processor but not with a text editor (e.g., bold, color, etc.). The RichEditBox control handles all the work of understanding and presenting the rich text.

The XAML that follows is very simple, just a button to open the file picker, and a RichEditBox  to drop the RichText file into…

<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.RowDefinitions>
            <RowDefinition
                Height="50" />
            <RowDefinition />
        </Grid.RowDefinitions>
        <Button
            Content="Open file"
            Click="Button_Click_1" />
        <RichEditBox
            Name="xEditBox"
            Grid.Row="1" />
</Grid>

The only tricky part is opening the RichText file, which we do in the event handler for the button.  We start by creating an instance of FileOpenPicker which we use to pick one of the PickerLocationID enumerated constants, as shown in the figure.

We then use the FileOpenPicker to set the FileTypeFilter so that we see only .rtf and .txt files. With that set up we are ready to call PickSingleFileAsync.  This method actually shows the picker, and since there can be a substantial delay it is marked Async.  We “await” the result and once we have it we call OpenAsync on the file in read mode to read the file contents into a random access stream (again, asynchronously).

Again we await, this time waiting for the stream to be filled, and then we call LoadFromStream on the Document property of our RichEditBox, passing in the enumerated constant FormatRtf and the stream.

Voila! The contents of the rtf are displayed, complete with all the rich text from the file.  Here’s the code, as described,

private async void Button_Click_1( object sender, RoutedEventArgs e )
{
    var open =
        new Windows.Storage.Pickers.FileOpenPicker();
    open.SuggestedStartLocation =
        Windows.Storage.Pickers.PickerLocationId.DocumentsLibrary;
    open.FileTypeFilter.Add( ".rtf" );
    open.FileTypeFilter.Add( ".txt" );

    var file = await open.PickSingleFileAsync();

    Windows.Storage.Streams.IRandomAccessStream randAccStream =
        await file.OpenAsync( Windows.Storage.FileAccessMode.Read );

    
    xEditBox.Document.LoadFromStream(
       Windows.UI.Text.TextSetOptions.FormatRtf, randAccStream );
}

Note: The await keyword deserves its own blogpost, but suffice for now to say that this allows our method to wait for the asynchronous method to complete without causing the UI to “hang.”

Please note that this article was adapted from material for my forthcoming book on XAML for Windows 8.