C# UWP集线器需要垂直滚动

C# UWP集线器需要垂直滚动,c#,uwp,C#,Uwp,出于测试目的,我在UWP中有一个集线器控件,如下所示: <Hub x:Name="hubTest1"> <HubSection Margin="10,0,0,0" Width="200" Background="CadetBlue" ScrollViewer.VerticalScrollMode="Enabled" HorizontalContentAlignment="Stretch" Header="#" Vertic

出于测试目的,我在UWP中有一个集线器控件,如下所示:

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

这是一个测试
这是一个测试。
这是一个测试。
这是一个测试。
... 重复了很多次。。。
这是一个测试
这是一个测试2

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

内部的
ScrollViewer
不会一直向下,因为您给
RichTextBlock
一个固定的
高度
1000px
。拆下它,问题就会消失

也可以将
集线器
放在
拆分视图
中,并具有垂直滚动的内容

更新 如果希望整个
HubSection
包括标题都可以滚动,需要做两件事:

  • 删除
    DataTemplate
    中的
    ScrollViewer
  • 轮毂部分
    及其内部创建新的
    样式
    ControlTemplate
    ,插入一个新的
    ScrollViewer
    作为其顶层 容器。像这样的-

  • 
    
    谢谢贾斯汀,但它看起来仍然没有达到我想要的效果。这是一个屏幕截图,我以1920x1080的速度运行,175%的缩放比例:有没有办法让整个HubSection滚动?滚动条在滚动时挡住了文本。我可以将右边距改为-10左右,这样就可以解决问题,但我不确定在其他分辨率或方向上会是什么样子,或者在这种情况下使用边距是否是一种糟糕的设计。下面是链接,我的互联网连接有问题:我只是想澄清一下,你想要整个
    HubSection
    包括大屏幕“这是一些测试”要滚动吗?因为看屏幕截图,内容似乎已经可以滚动了?是的
    <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>