Exploring Win8 Metro: The RichEditBox & FilePickers

Win8 provides a number of controls in the XAML toolkit that are easy to use RichEdit-File Pickerand 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. PickerLocationID

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.

Share

About Jesse Liberty

Jesse Liberty is an independent consultant and programmer with three decades of experience writing and delivering software projects. He is the author of 2 dozen books and multiple Pluralsight courses, and has been a Senior Technical Evangelist for Microsoft, a Distinguished Software Engineer for AT&T, a VP for Information Services for Citibank and a Software Architect for PBS. He is a Xamarin Certified Mobile Developer and a Xamarin MVP, Microsoft MVP and Telerik MVP.
This entry was posted in Essentials, Mini-Tutorial, Patterns & Skills, Windows 8 and tagged . Bookmark the permalink.

9 Responses to Exploring Win8 Metro: The RichEditBox & FilePickers

  1. Danny Van Neyghem says:

    Is it possible to bind a RichEditBox to a RTF file in the Asset folder through XAML without writing any code behind?

    Thanks

  2. Farhan says:

    Hi Jesse , I have implemented your code, but I can’t open RTF file containing image ? How can I do that ?

  3. Pingback: Windows 8 Developer Links – 2012-07-18Dan Rigby | Dan Rigby

Leave a Reply

Your email address will not be published.