HubSection 内容的垂直滚动

Question

我正在开发 Windows Phone 8.1 应用程序（Windows 运行时），并且我创建了一个具有以下布局的页面：

<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>

所以页面的内容由一个地图控件组成，它需要 220 个单位的高度，其余的应该是一个包含三个部分的集线器。如果是这种情况，HubSection 的内容应该可用于 VerticalScrolling。

在我的特殊情况下，AboutHubSection 的内容应该可以垂直滚动。两个面板（简短描述和完整描述）一次显示/隐藏一个，以模拟“显示更多”链接，该链接使用项目的完整描述扩展初始简短描述。不幸的是，当显示完整描述时，该区域无法滚动。可能包含可滚动内容的文本块是

<TextBlock Grid.Row="0" Text="{Binding FullDescription}" FontSize="16"  TextWrapping="Wrap"/>

在FullDescriptionPanel 网格中。我尝试使用滚动查看器进行包装，但没有成功，我不确定还能尝试什么。

有什么想法吗？提前致谢。

Answer 1

您需要为行设置高度限制。

在您的第一个网格中，您应该将第二行设置为 Height="*"，这样您的集线器控件将无法无限扩展。由于您已将 Auto 用于两行，因此它们将根据需要占用尽可能多的空间以适应其内容。对第二行使用 star 将强制它不大于剩余空间。

<Grid.RowDefinitions>
    <RowDefinition Height="Auto"/>
    <RowDefinition Height="*"/>
</Grid.RowDefinitions>

然后，您必须对“完整描述”视图执行相同操作，以限制长文本的空间。

<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>