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的内容应该可以垂直滚动。两个面板（简短和完整描述）一次显示/隐藏一个以模拟＆＃34;显示更多＆＃34;链接，它扩展了初始简短描述以及项目的完整描述。不幸的是，当显示完整描述时，该区域不会变得可滚动。可能包含可滚动内容的文本块是

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

FullDescriptionPanel网格中的

。我试图用滚动浏览器包装它并没有工作，我不确定还有什么可以尝试。

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

Answer 1

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

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

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

HubSection内容的垂直滚动

1 个答案: