UWP Hub需要垂直滚动

时间:2017-03-17 06:10:42

标签: c# uwp

出于测试目的,我在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的内部容器内,并没有提供必要的结果。 Hub也在SplitView.Content容器中,我不确定它是否会影响Hub的行为。我想知道是否有可能获得理想的行为?非常感谢你们给予的任何帮助。

1 个答案:

答案 0 :(得分:3)

内部ScrollViewer并未完全消失,因为您为RichTextBlock提供了固定Height 1000px。删除它,问题就会消失。

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

更新

如果您希望包含标题的整个HubSection可滚动,则需要做两件事:

  1. 移除ScrollViewer内的DataTemplate
  2. 为您的Style及其内部创建一个新的HubSection ControlTemplate,插入新的ScrollViewer作为其最高级别 容器。像这样的东西 -
  3. <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>