Adding RichTextBlockOverflow to FlipView

Question

I have a book application that I am using the FlipView control to flip between pages of any selected chapter in the book the user is currently reading.

I am dynamically creating the pages in and adding them as items in the FlipView control with the following code:

    private void CreateNewFlipPage(RichTextBlockOverflow columnContent, int page)
    {
        var fvItem = new FlipViewItem();
        var grid = GetOverflowGrid();   // Pre-formatted grid with 4 columns (index 0, 2, 4, and 6) and three 30 pixel spacer columns in between (index 1, 3, and 5)

        var overFlow1 = new RichTextBlockOverflow();
        var overFlow2 = new RichTextBlockOverflow();
        var overFlow3 = new RichTextBlockOverflow();
        var overFlow4 = new RichTextBlockOverflow();
        var pageText = new TextBlock
        {
            VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Bottom,
            Opacity = 0.5,
            FontSize = 18.667,
            Margin = new Thickness(40, 0, 0, 0),
            Foreground = Application.Current.Resources["ApplicationPageTextOppositeBackgroundThemeBrush"] as SolidColorBrush,
            FontFamily = new FontFamily("Global User Interface"),
            Text = "Page " + page
        };

        overFlow4.Margin = new Thickness(0, 0, 0, 40);

        Grid.SetColumn(overFlow1, 0);
        Grid.SetColumn(overFlow2, 2);
        Grid.SetColumn(overFlow3, 4);
        Grid.SetColumn(overFlow4, 6);
        Grid.SetColumn(pageText, 6);

        grid.Children.Add(overFlow1);
        grid.Children.Add(overFlow2);
        grid.Children.Add(overFlow3);
        grid.Children.Add(overFlow4);
        grid.Children.Add(pageText);

        fvItem.Content = grid;
        FlipView.Items.Add(fvItem);

        overFlow1.OverflowContentTarget = columnContent;
        overFlow2.OverflowContentTarget = overFlow1;
        overFlow3.OverflowContentTarget = overFlow2;
        overFlow4.OverflowContentTarget = overFlow3;

        overFlow1.Measure(new Size(grid.ColumnDefinitions[0].ActualWidth, grid.ActualHeight));
        overFlow2.Measure(new Size(grid.ColumnDefinitions[0].ActualWidth, grid.ActualHeight));
        overFlow3.Measure(new Size(grid.ColumnDefinitions[0].ActualWidth, grid.ActualHeight));
        overFlow4.Measure(new Size(grid.ColumnDefinitions[0].ActualWidth, grid.ActualHeight));

        grid.UpdateLayout();

        if (overFlow4.HasOverflowContent)
        {
            CreateNewFlipPage(overFlow4, page++);
        }
    }

And I call this code in my Initial UI method here once the UI has been updated:

...
if (column4Content.HasOverflowContent)
{
    CreateNewFlipPage(column4Content, 2);  // column4Content is a RTBO object
}
...

If I don't call the last part, I get the first full page and nothing else.
If I do call the last part, I get the first 3 columns on the first page and an item is added to FlipView, but no text is shown on the second page and the 4th column disappears

What am I not doing to make all of the RTBO objects to show?

Answer 1

I think you should have Update your FlipView Layout too. In this way the HasOverflowContent property knows that it has any overflow contents or not and returns it's true value (whether true or false).

grid.UpdateLayout();

FlipView.UpdateLayout(); // Add this Line Here

if (column4Content.HasOverflowContent)
{
    CreateNewFlipPage(column4Content, 2);
}

But I have doubts about the performance. Read the UpdateLayout() document here:
http://msdn.microsoft.com/en-US/library/windows/apps/windows.ui.xaml.uielement.updatelayout

... Layout updates can be forced by app code rather than relying on the built-in layout system behavior by using the UpdateLayout method. However, that is not generally recommended. It is usually unnecessary and can cause poor performance if overused. ...