HubSection 内容的垂直滚动 [英] Vertical scrolling for HubSection content

问题描述

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

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>

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

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.

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

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

在 FullDescriptionPanel 网格中.我尝试使用滚动查看器进行包装，但它不起作用，我不确定还可以尝试什么.

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.

推荐答案

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

You need to set a height limit for your rows.

在您的第一个网格中，您应该将第二行设置为 Height="*"，这样您的中心控件将无法无限扩展.由于您已将 Auto 用于两行，因此它们每行都将占用适合其内容所需的空间.使用 star 作为第二行将强制它不大于剩余空间.

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>

这篇关于HubSection 内容的垂直滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！