Vertical scrolling for HubSection content - xaml

Question

I am working on Windows Phone 8.1 app (Windows Runtime)and I have created a page with the following layout :
<Grid Grid.Row="1" Margin="0, 10, 0, 5" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<maps:MapControl x:Name="LocationMap" Grid.Row="0" Height="220"
MapServiceToken="..."/>
<Hub Grid.Row="1" Margin="0, 25, 0, 0">
<HubSection Header="ABOUT" x:Name="AboutHubSection">
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid x:Name="ShortDescriptionPanel" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" local:TextBlockExtension.FormattedText="{Binding ShortDescription}" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Text="Show more" Visibility="{Binding IsDescriptionTooLong, Converter={StaticResource BoolToVisibilityConverter}}" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowMoreTapped"/>
</Grid>
<Grid x:Name="FullDescriptionPanel" Grid.Row="1"
Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
<TextBlock Grid.Row="1" Text="Show less" Visibility="Visible" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowLessTapped"/>
</Grid>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="RSVP" x:Name="RsvpHubSection" Margin="0, 0, 0, 50">
<DataTemplate>
<ScrollViewer>
<TextBlock FontSize="16" TextWrapping="Wrap"
Text="{Binding RSVP}"/>
</ScrollViewer>
</DataTemplate>
</HubSection>
<HubSection Header="Statistics" x:Name="StatisticsHubSection" Margin="0, 0, 0, 50">
<DataTemplate>
<ScrollViewer>
<TextBlock FontSize="16" TextWrapping="Wrap"
Text="{Binding Stats}"/>
</ScrollViewer>
</DataTemplate>
</HubSection>
</Hub>
</Grid>
</Grid>
So the content of the page consists of a map control which takes 220 units of Height and the rest should be a Hub with three sections. The HubSections should have their content available for VerticalScrolling if it is the case.
In my particular case, the AboutHubSection should have its content vertically scrollable. The two panels (Short and Full Descriptions) are displayed/hidden one at a time to simulate a "Show more" link which expands the initial short description with a full description of the item. Unfortunately, when the full description is shown, the area does not become scrollable. The textblock that might contain scrollable content is
<TextBlock Grid.Row="0" Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
in the FullDescriptionPanel Grid. I've tried to wrap with a scrollviewer and it didn't work and I'm unsure of what else to try.
Any ideas? Thanks in advance.

Answer 1

You need to set a height limit for your rows.
In your first grid, you should set the second row to Height="*" so your hub control will not be able to expand indefinitively. Since you have used Auto for the two rows, they will each take as much space as needed to fit their content. Using star for the second row will force it to no be bigger than the remaining space.
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
You will have then to do the same for your "full description" view to restrict the space for the long text.
<Grid x:Name="FullDescriptionPanel" Grid.Row="1" Visibility="Collapsed">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0">
<TextBlock Text="{Binding FullDescription}" FontSize="16" TextWrapping="Wrap"/>
</ScrollViewer>
<TextBlock Grid.Row="1" Text="Show less" Visibility="Visible" FontSize="16" Foreground="{StaticResource PhoneAccentBrush}" Tapped="OnShowLessTapped"/>
</Grid>