To play along, you can create a new project, set a reference to the ElPasoHighSchool library, and in the XAML file add an XML namespace declaration for that library and instantiate the StudentBodyPresenter class in the Resources collection as in the previous program. Here’s an ItemsControl in a ScrollViewer that fills up the whole content Grid:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"
DataContext="{Binding Source={StaticResource studentBodyPresenter},
Path=StudentBody}">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Students}"
DisplayMemberPath="FullName" />
</ScrollViewer>
</Grid>
The ScrollViewer allows the contents to be scroll:
Replace the DisplayMemberPath with a DataTemplate to provide more extensive information, nicely formatted:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding Students}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderBrush="{StaticResource PhoneAccentBrush}"
BorderThickness="1"
CornerRadius="12"
Margin="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2"
Source="{Binding PhotoFilename}"
Height="120"
Width="90"
Margin="6" />
<StackPanel Grid.Row="0" Grid.Column="1"
Orientation="Horizontal"
VerticalAlignment="Center">
<TextBlock Text="{Binding LastName}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding FirstName}" />
<TextBlock Text=", " />
<TextBlock Text="{Binding MiddleName}" />
</StackPanel>
<StackPanel Grid.Row="1" Grid.Column="1"
Orientation="Horizontal"
VerticalAlignment="Center">
<TextBlock Text="Grade Point Average = " />
<TextBlock Text="{Binding GradePointAverage}" />
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
In this template, the height of the individual items is governed by the explicit Height setting on the Image element. To prevent the text from moving to the right as the photos are being loaded, an explicit Width setting is also provided. Here’s the result:
