垂直滚动的HubSection内容(Vertical scrolling for HubSectio

我工作在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台高度，其余应该是一个中心三个部分组成。 该HubSections应该具有可用于VerticalScrolling他们的内容，如果是这种情况。

在我的特殊情况下， AboutHubSection应该有它的内容垂直滚动。 两块板（简短和完整说明）显示/隐藏一次一个模拟“显示更多”链接，扩大与该项目的完整描述最初的简短说明。 不幸的是，显示了完整的描述时，该区域不会成为滚动。 可能包含滚动内容的文本块是

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

在FullDescriptionPanel电网。 我试着用的ScrollViewer来包装，并没有工作，我不确定什么尝试。

有任何想法吗？ 提前致谢。

Answer 1:

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

在你的第一个网格，你应该在第二行设置为高度=“*”，让你的集线器控制将不能indefinitively扩大。 既然你已经使用自动为两行，根据需要适合他们的内容，他们将各自采取尽可能多的空间。 使用第二行星将迫使它不大于剩余空间更大。

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

文章来源: Vertical scrolling for HubSection content