WPF ScrollViewerがコントロールをウィンドウ外に押し出す

Question

私はDockPanelを持っていますが、これには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となりますそれらのコンテンツに合うサイズ。アスタリスク（*）のの行は、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のままにしてください）。