C# UWP集线器需要垂直滚动
出于测试目的,我在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
<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>