Question

I have been searching high and low for help regarding binding html content to a richtext block inside my flip view on my item details page and cannot find out any information on how to do what I am after.

I am building a simple news reader app, that gets html content from a feed which I want to display in my flipview.

I created a new default item details page and bind my collection:

this.DefaultViewModel["Group"] = feedItem.Category;
this.DefaultViewModel["Items"] = feedItem.Category.Items;
this.flipView.SelectedItem = feedItem; 

Then inside my DataTemplate of my flipview:

<common:RichTextColumns x:Name="richTextColumns" Margin="117,0,117,47">
    <RichTextBlock x:Name="richTextBlock" Width="560" Style="{StaticResource ItemRichTextStyle}">
        <Paragraph>
            <Run FontWeight="SemiLight" Text="{Binding Content}"/>
        </Paragraph> ...

Content is a string property on my model which I get using HtmlUtilities.ConvertToText(html)

That works perfectly. However, I need images and titles (h1, h2 etc) in the article.

My question is what is the best way to achieve this?

Parsing the html and creating runs, inline ui containers which contain images etc is not a problem. I am using the html agility pack for that, but my question is how can I add these elements to the richtextblocks blocks collection?

I tried having a event on flip view loaded and then getting the current flip view dependency object (this.flipView.ItemContainerGenerator.ContainerFromIndex(flipView.SelectedIndex); and then walking the node tree to find the richtextblock and then setting the blocks property, but it works for the first item and then stops working which I guess has something to do with how the flip view is virtualising the collection.

And to be honest, its getting really confusing for what surely be a simple task!? Surely the xaml team realised that people may want to bind images to the rich text block?

I thought you would be able to bind the content of the rich text block to a property on my model which then returns back the blocks, but rich text block doesn’t seem to have any way to do that, at least from what I can see.

If anyone could help me out, it would be much appreciated. This is driving me crazy.

Answer 1

I basically had the same problem. My solution si to break the HTML to a list of pragraphs and the use the mentioned this.flipView.ItemContainerGenerator.ContainerFromIndex(flipView.SelectedIndex) to find the RichTextBlock, clear its Inlines and add all the paragprahs to the Inlines collection. A call process with the FlipView`s SelectedItemChanged event