UWP ScrollViewer 不滚动
UWP ScrollViewer not scrolling
我正在尝试复制 MS Word 的基本界面。我已经创建了文档,它周围有一个边框以产生投影效果,并且这两个都包含在 ScrollViewer 中。问题是 ScrollViewer 不允许滚动。我让它滚动的唯一方法是在 ScrollViewer 上设置 ZoomMode="Enabled"
,然后放大,在这种情况下,滚动条会出现并按预期滚动。但是当 ZoomMode="Disabled"
,或者当它缩小时,没有滚动,没有滚动条,什么都没有。就好像ScrollViewer不存在一样。
我预感这是由 ScrollViewer 子级的布局控件引起的,但我不知道是什么原因。我试过更改 ScrollViewer 中文档的高度以强制它滚动,但这也没有效果。
有人可以看看这里的 XAML 看看他们是否能找到错误所在吗?
主页XAML
<Page
x:Class="Bartleby.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Bartleby"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Loaded="Page_Loaded"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView IsPaneOpen="True" DisplayMode="Inline" Background="Gray">
<SplitView.Pane>
<StackPanel>
<TextBlock Text="Book Title" FontSize="24" FontWeight="Bold" />
<ListView>
<ListViewItem Content="Chapter 1" />
<ListViewItem Content="Chapter 2" />
<ListViewItem Content="Chapter 3" />
<ListViewItem Content="Chapter 4" />
<ListViewItem Content="Chapter 5" />
<ListViewItem Content="Chapter 6" />
<Button x:Name="addChapter" Tapped="AddChapter_Tapped"/>
</ListView>
</StackPanel>
</SplitView.Pane>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="916" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1152" />
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="AppBarButton">
<Setter Property="IsCompact" Value="True" />
</Style>
</Grid.Resources>
<!--File Handling-->
<AppBarButton x:Name="openFileButton" Grid.Column="0" Icon="OpenFile" ToolTipService.ToolTip="Open file" />
<AppBarButton x:Name="saveFileButton" Grid.Column="1" Icon="Save" ToolTipService.ToolTip="Save file" RelativePanel.RightOf="openFileButton" />
<AppBarSeparator RelativePanel.RightOf="saveFileButton" Grid.Column="2" />
<!--Font Style-->
<AppBarButton x:Name="boldFileButton" Grid.Column="3" Icon="Bold" ToolTipService.ToolTip="Bold" RelativePanel.LeftOf="italicFileButton" />
<AppBarButton x:Name="italicFileButton" Grid.Column="4" Icon="Italic" ToolTipService.ToolTip="Italic" RelativePanel.LeftOf="underlineFileButton" />
<AppBarButton x:Name="underlineFileButton" Grid.Column="5" Icon="Underline" ToolTipService.ToolTip="Underline" RelativePanel.AlignRightWithPanel="True" />
<!--Alignment-->
<AppBarButton x:Name="alignLeftButton" Grid.Column="6" Icon="AlignLeft" ToolTipService.ToolTip="Align left" RelativePanel.RightOf="saveFileButton" />
<AppBarButton x:Name="alignCenterButton" Grid.Column="7" Icon="AlignCenter" ToolTipService.ToolTip="Align center" RelativePanel.RightOf="alignLeftButton" />
<AppBarButton x:Name="alignRightButton" Grid.Column="8" Icon="AlignRight" ToolTipService.ToolTip="Align right" RelativePanel.RightOf="alignCenterButton" />
</Grid>
<ScrollViewer Grid.Row="1" Grid.Column="0" VerticalScrollBarVisibility="Visible" ZoomMode="Disabled" BringIntoViewOnFocusChange="False" Height="600" VerticalAlignment="Top">
<Border Margin="40" HorizontalAlignment="Stretch" >
<local:DocumentView x:Name="editor" DocumentHeight="1056" DocumentWidth="816" PlaceholderText="Text Goes In Here" BorderBrush="Black" />
</Border>
</ScrollViewer>
</Grid>
</SplitView>
</Page>
试试这个。这应该可以完美地工作。
<ScrollViewer Grid.Row="1"
Grid.Column="0"
Height="600"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Auto"
VerticalAlignment="Top">
<!--If the elements don't exceed the size of the box, the scrollbar won't be visible-->
<!--Use your BG color-->
<Border Background="White"
HorizontalAlignment="Stretch" >
<!--Use SPanel or grid or RPanel to include more than one element-->
<StackPanel Margin="10">
<TextBlock x:Name="editor"
TextWrapping="Wrap"
Text="Custom Text more that the screen or the box size"/>
</StackPanel>
</Border>
</ScrollViewer>
我正在尝试复制 MS Word 的基本界面。我已经创建了文档,它周围有一个边框以产生投影效果,并且这两个都包含在 ScrollViewer 中。问题是 ScrollViewer 不允许滚动。我让它滚动的唯一方法是在 ScrollViewer 上设置 ZoomMode="Enabled"
,然后放大,在这种情况下,滚动条会出现并按预期滚动。但是当 ZoomMode="Disabled"
,或者当它缩小时,没有滚动,没有滚动条,什么都没有。就好像ScrollViewer不存在一样。
我预感这是由 ScrollViewer 子级的布局控件引起的,但我不知道是什么原因。我试过更改 ScrollViewer 中文档的高度以强制它滚动,但这也没有效果。
有人可以看看这里的 XAML 看看他们是否能找到错误所在吗?
主页XAML
<Page
x:Class="Bartleby.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Bartleby"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Loaded="Page_Loaded"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<SplitView IsPaneOpen="True" DisplayMode="Inline" Background="Gray">
<SplitView.Pane>
<StackPanel>
<TextBlock Text="Book Title" FontSize="24" FontWeight="Bold" />
<ListView>
<ListViewItem Content="Chapter 1" />
<ListViewItem Content="Chapter 2" />
<ListViewItem Content="Chapter 3" />
<ListViewItem Content="Chapter 4" />
<ListViewItem Content="Chapter 5" />
<ListViewItem Content="Chapter 6" />
<Button x:Name="addChapter" Tapped="AddChapter_Tapped"/>
</ListView>
</StackPanel>
</SplitView.Pane>
<Grid HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="916" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="1152" />
</Grid.RowDefinitions>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.Resources>
<Style TargetType="AppBarButton">
<Setter Property="IsCompact" Value="True" />
</Style>
</Grid.Resources>
<!--File Handling-->
<AppBarButton x:Name="openFileButton" Grid.Column="0" Icon="OpenFile" ToolTipService.ToolTip="Open file" />
<AppBarButton x:Name="saveFileButton" Grid.Column="1" Icon="Save" ToolTipService.ToolTip="Save file" RelativePanel.RightOf="openFileButton" />
<AppBarSeparator RelativePanel.RightOf="saveFileButton" Grid.Column="2" />
<!--Font Style-->
<AppBarButton x:Name="boldFileButton" Grid.Column="3" Icon="Bold" ToolTipService.ToolTip="Bold" RelativePanel.LeftOf="italicFileButton" />
<AppBarButton x:Name="italicFileButton" Grid.Column="4" Icon="Italic" ToolTipService.ToolTip="Italic" RelativePanel.LeftOf="underlineFileButton" />
<AppBarButton x:Name="underlineFileButton" Grid.Column="5" Icon="Underline" ToolTipService.ToolTip="Underline" RelativePanel.AlignRightWithPanel="True" />
<!--Alignment-->
<AppBarButton x:Name="alignLeftButton" Grid.Column="6" Icon="AlignLeft" ToolTipService.ToolTip="Align left" RelativePanel.RightOf="saveFileButton" />
<AppBarButton x:Name="alignCenterButton" Grid.Column="7" Icon="AlignCenter" ToolTipService.ToolTip="Align center" RelativePanel.RightOf="alignLeftButton" />
<AppBarButton x:Name="alignRightButton" Grid.Column="8" Icon="AlignRight" ToolTipService.ToolTip="Align right" RelativePanel.RightOf="alignCenterButton" />
</Grid>
<ScrollViewer Grid.Row="1" Grid.Column="0" VerticalScrollBarVisibility="Visible" ZoomMode="Disabled" BringIntoViewOnFocusChange="False" Height="600" VerticalAlignment="Top">
<Border Margin="40" HorizontalAlignment="Stretch" >
<local:DocumentView x:Name="editor" DocumentHeight="1056" DocumentWidth="816" PlaceholderText="Text Goes In Here" BorderBrush="Black" />
</Border>
</ScrollViewer>
</Grid>
</SplitView>
</Page>
试试这个。这应该可以完美地工作。
<ScrollViewer Grid.Row="1"
Grid.Column="0"
Height="600"
HorizontalScrollMode="Disabled"
VerticalScrollBarVisibility="Auto"
VerticalAlignment="Top">
<!--If the elements don't exceed the size of the box, the scrollbar won't be visible-->
<!--Use your BG color-->
<Border Background="White"
HorizontalAlignment="Stretch" >
<!--Use SPanel or grid or RPanel to include more than one element-->
<StackPanel Margin="10">
<TextBlock x:Name="editor"
TextWrapping="Wrap"
Text="Custom Text more that the screen or the box size"/>
</StackPanel>
</Border>
</ScrollViewer>