Converting Windows Phone to Windows 8: Listing 2

MainPage, with a ListBox added.

• By Nick Randolph
• 04/16/2012

<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                            xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
                            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                            xmlns:local="clr-namespace:FlickrImages"
                            x:Class="FlickrImages.MainPage"
                            mc:Ignorable="d"
                            d:DesignWidth="480"
                            d:DesignHeight="696"
                            SupportedOrientations="Portrait">
    <phone:PhoneApplicationPage.Resources>
        <local:MainPageViewModel x:Key="ViewModel" />
    </phone:PhoneApplicationPage.Resources>
    <phone:PhoneApplicationPage.DataContext>
        <StaticResource ResourceKey="ViewModel" />
    </phone:PhoneApplicationPage.DataContext>
    <Grid x:Name="LayoutRoot"
          Background="Transparent"
          d:DataContext="{Binding Source={StaticResource FlickrSampleData}}">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Text="FLICKR"
                   Style="{StaticResource PhoneTextLargeStyle}"
                   Margin="{StaticResource PhoneMargin}" />

        <ListBox Grid.Row="1"
                 ItemsSource="{Binding FlickrImages}">
            <ListBox.Resources>
                <DataTemplate x:Key="FlickrImagesItemTemplate">
                    <Grid Margin="0,0,0,24">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition />
                        </Grid.ColumnDefinitions>

                        <Image HorizontalAlignment="Left"
                               Width="64"
                               VerticalAlignment="Top"
                               Margin="{StaticResource PhoneHorizontalMargin}"
                               Source="{Binding ImageUrl}" />
                        <TextBlock Text="{Binding Title}"
                                   TextWrapping="Wrap"
                                   VerticalAlignment="Top"
                                   Grid.Column="1"
                                   Style="{StaticResource PhoneTextNormalStyle}" />
                    </Grid>
                </DataTemplate>
            </ListBox.Resources>
            <ListBox.ItemTemplate>
                <StaticResource ResourceKey="FlickrImagesItemTemplate" />
            </ListBox.ItemTemplate>
        </ListBox>
    </Grid>
</phone:PhoneApplicationPage>