2

特に最小高さの設定に関して、グリッド、スプリッター、およびエキスパンダーの配置を正しく機能させるのに問題があります。ここに投稿された多くの提案 (特にスプリッターとエキスパンダーの結合方法に関して) に従い、基本的なアーキテクチャーは機能していますが、最終的な詳細を正しく機能させることはできません。特にコードビハインドでブルートフォース作業を行う場合は、試行錯誤によって何かが機能すると確信していますが、WPFのサイズ変更がどのように機能するかについての基本的な原則がいくつかあると推測していますここにありません。

次の xaml は、実際の構造を簡略化したもので、わかりやすくするために色と境界線が追加されています。MinHeights を設定する試みを削除しました。(現在、分離コードはありません。)

<Page
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="450"
  Height="600">
  <Grid Background="Yellow">
    <Grid.RowDefinitions>
         <RowDefinition Height="*" />
         <RowDefinition Height="Auto"/>
         <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <TextBox x:Name="Tree" Grid.Row="0" Text="Tree" BorderThickness="2" BorderBrush="Red" />

    <Expander IsExpanded="True" Grid.Row="1" Header="Expand/Collapse Details" ExpandDirection="Down"
          BorderThickness="2" BorderBrush="Black" VerticalAlignment="Bottom">
      <Expander.Content>
        <Grid x:Name="LowerAreaGrid" Margin="4">
         <Grid.RowDefinitions>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
          </Grid.RowDefinitions>

          <GridSplitter HorizontalAlignment="Stretch" Grid.Row="0" Height="8" Background="DarkGray"
                        ResizeDirection="Rows" ResizeBehavior="CurrentAndNext" />

          <Grid x:Name="DetailsPaneAndSubpane" Margin="4" Grid.Row="1">
            <Grid.RowDefinitions>
               <RowDefinition Height="*" MaxHeight="{Binding ActualHeight, ElementName=DetailsPane}"/>
               <RowDefinition Height="Auto" />
               <RowDefinition Height="*"/>
            </Grid.RowDefinitions>

              <ScrollViewer ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="0">

                <TextBox x:Name="DetailsPane" Text="This is the Details Pane. It is 150 pixels high. If the available space is too small, it will grow a scrollbar to see all the content." 
                    TextWrapping="Wrap" BorderThickness="4" BorderBrush="Green" Height="150"/>
              </ScrollViewer>  

              <GridSplitter Grid.Row="1" HorizontalAlignment="Stretch" Height="8" Background="Brown"
                            ResizeDirection="Rows" ResizeBehavior="PreviousAndNext" />

              <Border BorderThickness="4" Grid.Row="2" BorderBrush="Blue">    
                <Grid x:Name="SubpaneAndButtons" Margin="4" Grid.Row="1">
                  <Grid.RowDefinitions>
                     <RowDefinition Height="*" />
                     <RowDefinition Height="Auto"/>
                  </Grid.RowDefinitions>

                  <TextBox Grid.Row="0" Text="This is the Details Subpane. It can grow and shrink."
                             BorderThickness="2" BorderBrush="Blue"/>

                  <Grid x:Name="SubpaneButtons" Grid.Row="1" Background="Blue" Margin="4">
                      <Button Width="200">Do something with subpane</Button>
                  </Grid>
                </Grid>
              </Border>
           </Grid>

        </Grid>
      </Expander.Content>
    </Expander>

    <Grid x:Name="CommandButtons" Grid.Row="2" Background="Pink" Margin="4">
        <Button Width="200">Do something with whole window</Button>
    </Grid>

  </Grid>
</Page>

ご覧のとおり、ウィンドウには 2 つの主要な領域があります。上部ペインにはツリーがあり、ツリー内の項目を選択すると、下部領域 (エキスパンダーに含まれる) に項目の詳細が表示されます。上部領域と下部領域の相対的なサイズを変更できるスプリッターがあります。詳細領域はさらに 2 つの部分に分かれています。最大サイズが固定されている詳細ペインと、拡大および縮小できる下部の詳細サブペインです。2 番目のスプリッターは、詳細ペインと詳細サブペインの相対的なサイズを制御します。

ウィンドウの下部には、ウィンドウ全体に適用されるコマンドであるボタンのセットを表すボタンもあります。詳細サブペインの下部には、詳細サブペインにのみ適用されるコマンドである一連のボタンを表すボタンがあります。

機能しないものは次のとおりです。

  1. 問題: 2 番目 (茶色) のスプリッターは、最初は上に移動できません。(詳細ペインは最大サイズであるため、下に移動できるとは想定されていません。) 灰色のスプリッターを少し移動する必要があります。その後、灰色のスプリッターを元の場所に戻しても、茶色のスプリッターは正常に機能します。だった。

  2. Tree の MinHeight は 75 である必要があります。問題: これをツリーの RowDefinition に配置すると、スライダーを 75 ピクセル マークを超えて上にドラッグすると、残りのコンテンツがウィンドウの端から滑り落ちます。(MinHeight がない場合、スプリッターがウィンドウの上部を越えてドラッグされると、このスライドが発生します。)

  3. 詳細ペインと詳細サブペインの MinHeight は 50 にする必要があります。問題: スプリッターのいずれかを下に移動すると、これらの領域が何もなくなる可能性があります。

  4. どちらのスプリッターも、「サブペインで何かを行う」ボタンの行に影響を与えるべきではありません。エキスパンダーが折りたたまれていない限り、常に完全に表示されている必要があります。問題: 繰り返しますが、いずれかのスプリッターを下に移動すると、この領域が何もなくなる可能性があります。

これが機能するものであり、すべての変更が行われた後も機能し続ける必要があります。

  1. 「Expand/Collapse Details」エキスパンダーが折りたたまれると、「Do something with whole window」ボタン行以外のすべてが折りたたまれます。ツリーは残りのスペースをすべて占有します。

  2. 詳細ペインは固定サイズ (150 ピクセル) です。それよりも大きくすることはできません。それよりも小さいスペースを指定すると、150 ピクセル全体が静止して見えるようにスクロールバーが大きくなります。

これを機能させるには、(xaml またはコード ビハインドで) どのような変更を行う必要がありますか?

4

0 に答える 0