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 个高度单位，其余部分应该是一个包含三个部分的 Hub。如果是这种情况，HubSections 应该有其内容可用于 VerticalScrolling。

在我的特定情况下，AboutHubSection 的内容应该可以垂直滚动。这两个面板（简短描述和完整描述）是 displayed/hidden 一次一个，以模拟 "Show more" link 扩展最初的简短描述，并提供对项目的完整描述。不幸的是，当显示完整描述时，该区域无法滚动。可能包含可滚动内容的文本块是

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

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

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

Answer 1

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

在您的第一个网格中，您应该将第二行设置为 Height="*"，这样您的中心控件将无法无限扩展。由于您对两行使用了自动，因此它们每行都将根据需要占用尽可能多的 space 以适合其内容。在第二行使用 star 将强制它不大于剩余的 space.

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

然后您必须对 "full description" 视图执行相同的操作以限制长文本的 space。

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

HubSection 内容的垂直滚动

Vertical scrolling for HubSection content

xaml

windows-runtime

windows-phone

windows-phone-8.1