Question

I’ve been playing around with Windows 8 code samples – namely the BlogReader app. If you’re not familiar with this, it is comprised of a grid with two columns. On the left is a ListView with titles of feed items. When clicked, it populates a WebView in the right column with the feed Entry.

Rather than display to the right I want to embed the WebView directly below the relevant list item, like Google Reader does (basically an accordion view). This is what I’ve come up with.

      <ListView x:Name="ItemListView"  
            ItemsSource="{Binding Items}"
            Margin="60,0,0,10"
            SelectionChanged="ItemListView_SelectionChanged">

            <ListView.ItemTemplate>
                <DataTemplate>
                    <StackPanel>
                        <TextBlock Text="{Binding Title}"  
                       FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" />
                        <TextBlock Text="{Binding Author}" 
                       FontSize="16" Margin="15,0,0,0"/>
                        <TextBlock Text="{Binding Path=PubDate, Converter={StaticResource dateConverter}}" 
                       FontSize="16" Margin="15,0,0,0"/>
                        <WebView Margin="0,5,20,20"/>
                    </StackPanel>
                </DataTemplate>
            </ListView.ItemTemplate>

        </ListView>

How to I access the WebView within the ListItem? I understand that I can’t access the template after rendering, but there must be a way to get to that WebView within the ListItem? Or is it just never created?

I’ve tried loads of different ways of accessing the selected item of the listView and then looking for children with no success

Answer 1

Instead of inserting a webview, it would be easier to simply set the Visibility of the Webview to Collapsed until you’re ready to use it. On each of the items your ListView is bound to, have two properties: one that is the content of the webview and the other one which is bound to the visibility of the webview. That way you can set the content of the webview by changed the value of the content property and then simply change it’s visibility to Visible.

Something like this:

public class Item
{
    Uri content;
    public Uri Content
    {
        get
        {
            return content;
        }
    }
    public Visibility Visible
    {
        get
        {
            if(content != null)
                return Visibility.Visible;
        }
    }
}

<WebView Content="{Binding Content}" Visibility="{Binding Visible}" Margin="0,5,20,20"/>