WPF ScrollViewer нажатие управления из окна

Question

У меня есть DockPanel, который содержит некоторые элементы управления, включая 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 в середине. Что я делаю не так?

Answer 1

Проблема в том, что 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> 

Answer 2

я обнаружил, что я мог бы иметь динамическую высоту с 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 звездочки (*) будут иметь размер, чтобы заполнить оставшееся пространство после того, как был рассчитан размер Авто. Таким образом, все размеры правильны и красивы.

С другой стороны, в этот момент я могу сделать одноразовую с 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).