UWP Hub 需要垂直滚动

Question

出于测试目的，我在 UWP 中有一个 Hub 控件，如下所示：

            <Hub x:Name="hubTest1">
                <HubSection Margin="10,0,0,0" Width="200" Background="CadetBlue" ScrollViewer.VerticalScrollMode="Enabled" HorizontalContentAlignment="Stretch" Header="#" VerticalAlignment="Stretch">
                    <HubSection.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Foreground="White">This is some Test</TextBlock>
                        </DataTemplate>
                    </HubSection.HeaderTemplate>
                    <DataTemplate>
                        <ScrollViewer HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" Margin="0,0,0,0">
                            <RichTextBlock Height="1000" Foreground="White" TextWrapping="Wrap" HorizontalAlignment="Stretch">
                                <Paragraph>
                                    This is a test.
                                    <LineBreak></LineBreak>
                                    This is a test.
                                    <LineBreak></LineBreak>
                                    This is a test.
                                    <LineBreak></LineBreak>
                                    ... Repeated many times ...
                                </Paragraph>
                            </RichTextBlock>
                        </ScrollViewer>
                    </DataTemplate>
                </HubSection>
                <HubSection Margin="10,0,0,0" Background="BlueViolet" Width="300" Foreground="White" HorizontalContentAlignment="Stretch" Header="#">
                    <HubSection.HeaderTemplate>
                        <DataTemplate>
                            <TextBlock Foreground="White">This is some Test</TextBlock>
                        </DataTemplate>
                    </HubSection.HeaderTemplate>
                    <DataTemplate>
                        <TextBlock>This is a test 2</TextBlock>
                    </DataTemplate>
                </HubSection>
            </Hub>

我遇到的问题是，当填充的内容多于屏幕时，我希望第一个 HubSection 可以垂直滚动到页面外。不过，它只会走到边缘。内部的 ScrollViewer 确实垂直向下滚动文本，但它位于 DataTemplate 的内部容器内，并没有给出必要的结果。此外，集线器位于 SplitView.Content 容器内，我不确定这是否会影响集线器的行为。我想知道是否有可能获得所需的行为？非常感谢你们提供的任何帮助。

Answer 1

内部ScrollViewer 不会一直向下，因为您给了RichTextBlock 一个固定的Height 或1000px。删除它，问题就会消失。

也可以将Hub 放在SplitView 中，并且也可以垂直滚动内容。

更新

如果您希望整个 HubSection（包括标题）可滚动，您需要做两件事：

1. 删除DataTemplate 中的ScrollViewer。
2. 为您的HubSection 创建一个新的Style 并在其内部 ControlTemplate，插入一个新的ScrollViewer 作为其顶层 容器。像这样 -

---

<Style x:Key="HubSectionStyle1"
        TargetType="HubSection">
    <Setter Property="HorizontalAlignment"
            Value="Stretch" />
    <Setter Property="VerticalAlignment"
            Value="Stretch" />
    <Setter Property="HorizontalContentAlignment"
            Value="Left" />
    <Setter Property="VerticalContentAlignment"
            Value="Top" />
    <Setter Property="Padding"
            Value="12,10,12,0" />
    <Setter Property="IsTabStop"
            Value="False" />
    <Setter Property="UseSystemFocusVisuals"
            Value="True" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HubSection">
                <ScrollViewer VerticalScrollBarVisibility="Auto">
                    <Border BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}"
                            Background="{TemplateBinding Background}">
                        <Border.Resources>
                            <ControlTemplate x:Key="HeaderButtonTemplate"
                                                TargetType="Button">
                                <Grid x:Name="ButtonRoot"
                                        Background="Transparent">
                                    <VisualStateManager.VisualStateGroups>
                                        <VisualStateGroup x:Name="CommonStates">
                                            <VisualState x:Name="Normal">
                                                <Storyboard>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="PointerOver">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{ThemeResource HubSectionHeaderButtonForegroundPointerOver}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <PointerUpThemeAnimation Storyboard.TargetName="ButtonRoot" />
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{ThemeResource HubSectionHeaderButtonForegroundPressed}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                    <PointerDownThemeAnimation Storyboard.TargetName="ButtonRoot" />
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{ThemeResource HubSectionHeaderButtonForegroundDisabled}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                            <VisualState x:Name="ImitatedTextBlock">
                                                <Storyboard>
                                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground"
                                                                                    Storyboard.TargetName="ContentPresenter">
                                                        <DiscreteObjectKeyFrame KeyTime="0"
                                                                                Value="{ThemeResource HubSectionHeaderForeground}" />
                                                    </ObjectAnimationUsingKeyFrames>
                                                </Storyboard>
                                            </VisualState>
                                        </VisualStateGroup>
                                    </VisualStateManager.VisualStateGroups>
                                    <ContentPresenter x:Name="ContentPresenter"
                                                        ContentTemplate="{TemplateBinding ContentTemplate}"
                                                        Content="{TemplateBinding Content}"
                                                        OpticalMarginAlignment="TrimSideBearings"
                                                        VerticalAlignment="Center" />
                                </Grid>
                            </ControlTemplate>
                        </Border.Resources>
                        <Grid HorizontalAlignment="Stretch"
                                Margin="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <Rectangle x:Name="HubHeaderPlaceholder"
                                        Grid.Row="0" />
                            <Grid Grid.Row="1">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*" />
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>
                                <Button x:Name="HeaderButton"
                                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                                        Content="{TemplateBinding Header}"
                                        Grid.Column="0"
                                        Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
                                        FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
                                        FontSize="{ThemeResource HubSectionHeaderThemeFontSize}"
                                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                        IsHitTestVisible="False"
                                        IsTabStop="False"
                                        Margin="{ThemeResource HubSectionHeaderThemeMargin}"
                                        Grid.Row="1"
                                        Template="{StaticResource HeaderButtonTemplate}"
                                        UseSystemFocusVisuals="True"
                                        VerticalAlignment="Bottom" />
                                <Button x:Name="SeeMoreButton"
                                        Grid.Column="1"
                                        Foreground="{ThemeResource HubSectionHeaderButtonForeground}"
                                        FontWeight="{ThemeResource HubSectionHeaderThemeFontWeight}"
                                        FontSize="{ThemeResource HubSectionHeaderSeeMoreThemeFontSize}"
                                        HorizontalAlignment="Right"
                                        Margin="{ThemeResource HubSectionHeaderSeeMoreThemeMargin}"
                                        Grid.Row="1"
                                        Template="{StaticResource HeaderButtonTemplate}"
                                        UseSystemFocusVisuals="True"
                                        Visibility="Collapsed"
                                        VerticalAlignment="Bottom" />
                            </Grid>
                            <ContentPresenter x:Name="ContentPresenter"
                                                ContentTemplate="{TemplateBinding ContentTemplate}"
                                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                Grid.Row="2"
                                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        </Grid>
                    </Border>
                </ScrollViewer>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>