您的位置: 首页  >  技术问答  >  WPF ScrollViewer将控件推出窗外

WPF ScrollViewer将控件推出窗外

分类: 技术问答 • 2022-04-28 19:03:07

WPF ScrollViewer将控件推出窗外

问题描述：

我有一个DockPanel，它包含一些控件，包括一个ScrollViewer。WPF ScrollViewer将控件推出窗外

我想要发生的事情是让ScrollViewer允许网格滚动，而不必将其他控件从表单底部推开。

相反，ScrollViewer扩展到窗口的高度，而不是Button的顶部，推Button关闭的形式的底部。为什么是这样？我如何解决它？

<Window x:Class="Class1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:Class1" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="800" Width="600" 
    WindowStartupLocation="CenterScreen"> 
<DockPanel LastChildFill="False"> 
    <Menu DockPanel.Dock="Top"> 
     <MenuItem Header="File"> 
      <MenuItem Name="miQuit" Header="Quit" Click="miQuit_Click" /> 
     </MenuItem> 
    </Menu> 
    <ToolBarTray DockPanel.Dock="Top" IsLocked="True"> 
     <ToolBar> 
      <Button Name="btnQuit" ToolBar.OverflowMode="Never" Click="btnQuit_Click"> 
       Quit 
      </Button> 
     </ToolBar> 
    </ToolBarTray> 
    <ScrollViewer VerticalScrollBarVisibility="Auto" DockPanel.Dock="Top" VerticalAlignment="Stretch"> 
     <Grid Name="gMainGrid" ScrollViewer.CanContentScroll="True"> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="Auto"/> 
      </Grid.ColumnDefinitions> 
      <Grid.RowDefinitions> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
       <RowDefinition /> 
      </Grid.RowDefinitions> 
      <TextBox Grid.Column="0" Grid.Row="0" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="1" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="2" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="3" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="4" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="5" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="6" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="7" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="8" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="9" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="10" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="11" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="12" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="13" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="14" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="15" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="16" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="17" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="18" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="19" Width="100" Margin="10,10,10,10"/> 
      <TextBox Grid.Column="0" Grid.Row="20" Width="100" Margin="10,10,10,10"/> 
     </Grid> 
    </ScrollViewer> 
    <Button Name="btnButton1" DockPanel.Dock="Bottom" Click="btnButton1_Click" >ButtonText</Button> 
</DockPanel>

我想在屏幕顶部的菜单栏，在屏幕底部的按钮，并在中间的ScrollViewer电网。我究竟做错了什么？

答

问题是ScrollViewer不知道应该得到多少高度。 ScrollViewer是一种试图获得与孩子需要的尺寸一样多的控件。 DockPanel也给出了与ScrollViewer需要相同的尺寸，因此也是您的问题。您可以使用像素固定ScrollViewer的高度（即Height=100）使其成为固定高度。我不知道你的用例，所以这可能是有用的，如果你正在显示一个图像传送带例如。

在更一般的布局的意见，我可以说，你最好使用网格，而不是DockPanel中：

<Grid> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="auto" /> 
     <RowDefinition Height="auto" /> 
     <RowDefinition Height="auto" /> 
     <!-- Next one is for middle part of the page --> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="auto" /> 
    </Grid.RowDefinitions> 
    <!-- your controls here --> 
</Grid>

答

我发现我能有一个动态的高度与DockPanel如果我坚持整件事在网格中。这似乎工作，因为我现在可以有一个动态的高度为ScrollViewer。

<Window x:Class="Class1.MainWindow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:local="clr-namespace:Class1" 
    mc:Ignorable="d" 
    Title="MainWindow" Height="800" Width="600" 
    WindowStartupLocation="CenterScreen"> 
    <Grid> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition /> 
     </Grid.ColumnDefinitions> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="*" /> 
      <RowDefinition Height="Auto" /> 
     </Grid.RowDefinitions> 
     <DockPanel Grid.Column="0" Grid.Row="0" LastChildFill="False">

一切都是那么正常只是我提出我的按钮DockPanel中之外，进入电网的第二行：

 </DockPanel> 
    <Button Grid.Column="0" Grid.Row="1" Name="btnButton1" DockPanel.Dock="Bottom" Click="btnButton1_Click" >ButtonText</Button> 
</Grid>

该行以“自动”一个Height会大小来适应他们的内容。带有星号（*）的Height的行的大小将在Autos大小计算完成后填充剩余空间。因此，所有东西的大小都正确和很好。

另外，在这一点上我可以做外卖与DockPanel完全和有Menu，ToolBarTray，ScrollViewer和Button在自己单独的网格行，像伊马德表明在他们的答案（虽然我不知道是什么额外的行是在他们的例子）。

<Grid.ColumnDefinitions> 
     <ColumnDefinition /> 
    </Grid.ColumnDefinitions> 
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="Auto" /> 
     <RowDefinition Height="*" /> 
     <RowDefinition Height="Auto" /> 
    </Grid.RowDefinitions>

我最终决定去这种做法，所以我要把它标记为答案，但我把所有这一切在这里为完整的解释，为了完整（如果人有这样的事情想保持其DockPanel）。

相关推荐