393

左側に流れるようなテキスト、右側にヘルプボックスが必要です。

ヘルプボックスは一番下まで伸びているはずです。

下のアウターを取り出すとうまくいきますStackPanel。

ただし、レイアウト上の理由から（UserControlsを動的に挿入しています）、ラッピングが必要StackPanelです。

私が試したことがわかるように、をGroupBox下まで伸ばすにはどうすればよいですか？StackPanel

  • VerticalAlignment="Stretch"
  • VerticalContentAlignment="Stretch"
  • Height="Auto"

XAML：

<Window x:Class="TestDynamic033.Test3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test3" Height="300" Width="600">
    <StackPanel 
        VerticalAlignment="Stretch" 
        Height="Auto">

        <DockPanel 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Height="Auto" 
            Margin="10">

            <GroupBox 
                DockPanel.Dock="Right" 
                Header="Help" 
                Width="100" 
                Background="Beige" 
                VerticalAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Height="Auto">
                <TextBlock Text="This is the help that is available on the news screen." TextWrapping="Wrap" />
            </GroupBox>

            <StackPanel DockPanel.Dock="Left" Margin="10" Width="Auto" HorizontalAlignment="Stretch">
                <TextBlock Text="Here is the news that should wrap around." TextWrapping="Wrap"/>
            </StackPanel>

        </DockPanel>
    </StackPanel>
</Window>

答え：

マークに感謝します。クリアするDockPanel代わりに使用します。StackPanel一般的に、私DockPanelはWPFレイアウトにますます使用していることに気付きました。これが固定XAMLです。

<Window x:Class="TestDynamic033.Test3"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Title="Test3" Height="300" Width="600" MinWidth="500" MinHeight="200">
    <DockPanel 
        VerticalAlignment="Stretch" 
        Height="Auto">

        <DockPanel 
            HorizontalAlignment="Stretch" 
            VerticalAlignment="Stretch" 
            Height="Auto" 
            MinWidth="400"
            Margin="10">

            <GroupBox 
                DockPanel.Dock="Right" 
                Header="Help" 
                Width="100" 
                VerticalAlignment="Stretch" 
                VerticalContentAlignment="Stretch" 
                Height="Auto">
                <Border CornerRadius="3" Background="Beige">
                    <TextBlock Text="This is the help that is available on the news screen." TextWrapping="Wrap" 

                Padding="5"/>
                </Border>
            </GroupBox>

            <StackPanel DockPanel.Dock="Left" Margin="10" Width="Auto" HorizontalAlignment="Stretch">
                <TextBlock Text="Here is the news that should wrap around." TextWrapping="Wrap"/>
            </StackPanel>

        </DockPanel>
    </DockPanel>
</Window>
4

4 に答える 4

375

StackPanel最終要素が残りのスペースをすべて使い果たす場所が必要なようです。しかし、なぜ使用しないのDockPanelですか？の他の要素を で装飾するDockPanelとDockPanel.Dock="Top"、ヘルプ コントロールで残りのスペースを埋めることができます。

XAML:

<DockPanel Width="200" Height="200" Background="PowderBlue">
    <TextBlock DockPanel.Dock="Top">Something</TextBlock>
    <TextBlock DockPanel.Dock="Top">Something else</TextBlock>
    <DockPanel
        HorizontalAlignment="Stretch" 
        VerticalAlignment="Stretch" 
        Height="Auto" 
        Margin="10">

      <GroupBox 
        DockPanel.Dock="Right" 
        Header="Help" 
        Width="100" 
        Background="Beige" 
        VerticalAlignment="Stretch" 
        VerticalContentAlignment="Stretch" 
        Height="Auto">
        <TextBlock Text="This is the help that is available on the news screen." 
                   TextWrapping="Wrap" />
     </GroupBox>

      <StackPanel DockPanel.Dock="Left" Margin="10" 
           Width="Auto" HorizontalAlignment="Stretch">
          <TextBlock Text="Here is the news that should wrap around." 
                     TextWrapping="Wrap"/>
      </StackPanel>
    </DockPanel>
</DockPanel>

利用できないプラットフォームDockPanel(WindowsStore など) を使用している場合は、グリッドを使用して同じ効果を作成できます。代わりにグリッドを使用して達成された上記の例を次に示します。

<Grid Width="200" Height="200" Background="PowderBlue">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <StackPanel Grid.Row="0">
        <TextBlock>Something</TextBlock>
        <TextBlock>Something else</TextBlock>
    </StackPanel>
    <Grid Height="Auto" Grid.Row="1" Margin="10">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="100"/>
        </Grid.ColumnDefinitions>
        <GroupBox
            Width="100"
            Height="Auto"
            Grid.Column="1"
            Background="Beige"
            Header="Help">
            <TextBlock Text="This is the help that is available on the news screen." 
              TextWrapping="Wrap"/>
        </GroupBox>
        <StackPanel Width="Auto" Margin="10" DockPanel.Dock="Left">
            <TextBlock Text="Here is the news that should wrap around." 
              TextWrapping="Wrap"/>
        </StackPanel>
    </Grid>
</Grid>
于 2009-02-20T11:25:07.600 に答える
114

これが発生する理由は、スタック パネルが要素をスタックする軸の制約として正の無限大を持つすべての子要素を測定するためです。子コントロールは、必要な大きさを返す必要があります (正の無限大は、どちらの軸でもMeasureOverrideからの有効な戻り値ではありません)。そのため、すべてが収まる最小のサイズを返します。彼らは、実際にどれだけのスペースを埋める必要があるかを知る方法がありません.

ビューにスクロール機能が必要なく、上記の回答がニーズに合わない場合は、独自のパネルを実装することをお勧めします。おそらく、StackPanel から直接派生させることができます。その後は、ArrangeOverrideメソッドを変更して、残りのスペースを子要素間で分割する (それぞれに同じ量の余分なスペースを与える) だけです。必要以上のスペースが与えられた場合、要素は正常にレンダリングされるはずですが、スペースを少なくすると、不具合が発生し始めます。

すべてをスクロールできるようにしたい場合は、ScrollViewer を使用すると、子要素と同じ位置に配置される無限の作業スペースが得られるため、かなり困難になるのではないかと思います。元は。この状況では、ビューポートのサイズを指定できる新しいプロパティを新しいパネルに作成したい場合があります。これを ScrollViewer のサイズにバインドできるはずです。IScrollInfoを実装するのが理想的ですが、すべてを適切に実装しようとすると複雑になります。

于 2009-02-20T11:44:52.843 に答える
70

別の方法として、1 列n行の Grid を使用する方法があります。すべての行の高さを に設定しAuto、一番下の行の高さを に設定し1*ます。

Grids が DockPanels、StackPanels、および WrapPanels よりも優れたレイアウト パフォーマンスを持っていることがわかったので、私はこの方法を好みます。ただし、ItemTemplate (多数のアイテムに対してレイアウトが実行されている場所) でそれらを使用していない限り、おそらく気付かないでしょう。

于 2009-02-20T17:30:40.937 に答える
23

SpicyTaco.AutoGridを使用できます- の修正版StackPanel:

<st:StackPanel Orientation="Horizontal" MarginBetweenChildren="10" Margin="10">
   <Button Content="Info" HorizontalAlignment="Left" st:StackPanel.Fill="Fill"/>
   <Button Content="Cancel"/>
   <Button Content="Save"/>
</st:StackPanel>

最初のボタンが塗りつぶされます。

NuGet 経由でインストールできます。

Install-Package SpicyTaco.AutoGrid

SpicyTaco.AutoGridをご覧になることをお勧めします。の代わりに WPF のフォームに非常に役立ち、DockPanel非常 に簡単StackPanelかつGrid優雅にストレッチすることで問題を解決します。GitHub の readme を参照してください。

<st:AutoGrid Columns="160,*" ChildMargin="3">
    <Label Content="Name:"/>
    <TextBox/>

    <Label Content="E-Mail:"/>
    <TextBox/>

    <Label Content="Comment:"/>
    <TextBox/>
</st:AutoGrid>
于 2016-03-10T21:16:15.100 に答える