Displaying Large Text Files in Windows Phone Apps

Have you ever needed to provide instructions or help for your Windows Phone app and found yourself creating gobs of XAML and writing it in the Visual Studio designer into a TextBlock control? Not very efficient is it? Here’s a technique you can use that might make things easier.

Ingredients

• 1 Text File (preferable something appropriate to your app)
• 1 Phone Application Page
• 30 Lines of Code

Preparation

Create a new Phone Application Page (or use an existing one). Add a ScrollViewer to it like so:

<!--ContentPanel - place additional content here-->

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

    <ScrollViewer x:Name="ScrollingTexFromHell"/>

</Grid>

You’ll need a text file to display so create one in your project. By default it’s type is set as Content so that’s what we want. Just make sure the file is copied to the project (you can choose to copy always or copy if newer, doesn’t matter). I use Bacon Ipsum to get me some sample text because well, it’s bacon baby.

In the code behind add a method like this:

private static StackPanel TextToXaml(string filename)
{
    var panel = new StackPanel();
    var resourceStream = Application.GetResourceStream(new Uri(filename, UriKind.RelativeOrAbsolute));
    if (resourceStream != null)
    {
        using (var reader = new StreamReader(resourceStream.Stream))
        {
            string line;
            do
            {
                line = reader.ReadLine();
                if (string.IsNullOrEmpty(line))
                {
                    panel.Children.Add(new Rectangle { Height = 20.0 });
                }
                else
                {
                    var textBlock = new TextBlock
                    {
                        TextWrapping = TextWrapping.Wrap,
                        Text = line,
                        Style = (Style)Application.Current.Resources["PhoneTextNormalStyle"],
                        FontSize = 22,
                    };
                    panel.Children.Add(textBlock);
                }
            } while (line != null);
        }
    }
    return panel;
}

Finally add a Loaded Event to your page to execute this when the page loads and assign the value of the method above to your ScrollViewer.

// Constructor
public MainPage()
{
    InitializeComponent();
    Loaded += OnPageLoaded;
}

private void OnPageLoaded(object sender, RoutedEventArgs e)
{
    ScrollingTexFromHell.Content = TextToXaml("mytextfile.txt");
}

The Result

The code is really simple. It just reads in the text file as a stream and reads each line in the text file. A StackPanel is created in our method and whenever the reader hits a blank line it inserts a small rectangle, otherwise it creates a TextBlock control with the content set to the line. You can adjust the height of the space between paragraphs and the font style and size but I picked something that I think looks pretty good when reading long text.

The paragraphs are stacked up in the StackPanel control which is then set as the content to the ScrollViewer we inserted. The user can just scroll through the entire text as they need to.

Enhancements? Of course. You could

• Put this into a Phone Class Library and use it as you see fit (you could even create a NuGet package!)
• Add parameters to the TextToXaml method like font size and spacing
• Do extra things with the reader while processing the text. For example you could recognize a new line and make each new line bold or larger so the first line in each paragraph would be a heading.

Have fun with it. It’s simple and I find it’s better than entering the text into the XAML page directly.