StackPanel의 자녀가 최대 공간을 아래로 채우도록 하려면 어떻게 해야 합니까?

StackPanel의 자녀가 최대 공간을 아래로 채우도록 하려면 어떻게 해야 합니까?

왼쪽에는 텍스트가 흐르고 오른쪽에는 도움말 상자가 필요합니다.

도움말 상자가 아래까지 확장되어야 합니다.

아우터를 빼면StackPanel그 아래는 잘 작동합니다.

그러나 레이아웃(User Controls를 동적으로 삽입)을 위해 포장이 필요합니다.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>

답변:

고마워 Mark, 사용DockPanel대신StackPanel정리했어요.일반적으로, 저는 제 자신이DockPanelWPF 레이아웃에 대해서는, 다음의 고정 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>

당신이 원하는 것처럼 들리네요.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사용 가능(예: Windows Store), 그리드를 사용하여 동일한 효과를 만들 수 있습니다.다음은 그리드를 사용하여 달성한 위의 예입니다.

<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>

이 문제가 발생하는 이유는 스택 패널이 요소를 스택하고 있는 축의 제약 조건으로 양의 무한대를 갖는 모든 하위 요소를 측정하기 때문입니다.자녀 컨트롤은 원하는 크기를 반환해야 합니다(양수 무한대는 어느 축의 MeasureOverride에서 유효한 반환값이 아님). 따라서 모든 것이 맞는 가장 작은 크기를 반환합니다.그들은 실제로 얼마나 많은 공간을 채워야 하는지 알 길이 없다.

뷰에 스크롤 기능이 필요 없고 위의 답변이 고객님의 요구에 맞지 않는 경우 고객님의 패널을 구현할 것을 권장합니다.StackPanel에서 직접 추출할 수 있습니다.그 후 필요한 것은 나머지 공간을 자 요소 간에 분할하도록 ArrayOverride 메서드를 변경하는 것입니다(각자에게 동일한 여유 공간을 부여합니다).요소에는 필요한 공간보다 더 많은 공간이 주어지면 올바르게 렌더링되지만, 더 적은 공간을 주면 결함이 생기기 시작합니다.

전체 스크롤을 하고 싶은 경우 ScrollViewer를 사용하면 작업 공간이 무한대로 넓어지기 때문에 좀 더 어려워질 수 있습니다.이것에 의해, 원래의 자 요소와 같은 위치에 놓일 수 있습니다.이 경우 뷰포트 크기를 지정할 수 있는 새 속성을 새 패널에 만들 수 있습니다. 이 속성을 ScrollViewer 크기에 바인딩할 수 있습니다.IScrollInfo를 구현하는 것이 이상적이지만 모든 것을 올바르게 구현하려면 이 문제가 복잡해지기 시작합니다.

또는 하나의 열과 n개의 행이 있는 그리드를 사용하는 방법도 있습니다.모든 행 높이 설정Auto 맨 의 높이로, " " " 입니다.1*.

DockPanels, StackPanels, WrapPanels보다 Grids의 레이아웃 성능이 우수하기 때문에 이 방법을 선호합니다.그러나 ItemTemplate(대부분의 항목에 대해 레이아웃이 수행되고 있는 경우)에서 사용하지 않는 한 아마 알아차리지 못할 것입니다.

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를 한 번 볼 것을 권합니다.자동 그리드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>

언급URL : https://stackoverflow.com/questions/569095/how-to-get-stackpanels-children-to-fill-maximum-space-downward