出于测试目的,我在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的行为。我想知道是否有可能获得理想的行为?非常感谢你们给予的任何帮助。
答案 0 :(得分:3)
内部ScrollViewer
并未完全消失,因为您为RichTextBlock
提供了固定Height
1000px
。删除它,问题就会消失。
也可以将Hub
放在SplitView
内,并且也可以垂直滚动内容。
如果您希望包含标题的整个HubSection
可滚动,则需要做两件事:
ScrollViewer
内的DataTemplate
。 Style
及其内部创建一个新的HubSection
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>