Wie zu bekommen Kinder Stackpanel ist nach unten maximalen Raum zu füllen?

Question

ich will einfach fließenden Text auf der linken Seite, und eine Hilfe-Box auf dem rechten Seite.

Die Hilfe Box sollte den ganzen Weg nach unten erstrecken.

Wenn Sie die äußere Stackpanel nehmen darunter große Werke.

Aber aus Gründen des Layouts (Ich bin Einfügen Benutzersteuerelemente dynamisch) Ich brauche die Verpackung Stackpanel haben.

Wie erhalte ich die GroupBox an die Unterseite des Stackpanel nach unten erstrecken, wie man sehen kann Ich habe versucht:

• Vertical = "Stretch"
• Vertical = "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>

Antwort:

Danke Mark, mit DockPanel statt Stackpanel klären auf. Im Allgemeinen finde ich mich DockPanel mehr und mehr jetzt WPF Layouten mit, hier ist die feste 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>

Answer 1

Es klingt wie Sie eine StackPanel wollen, wo das letzte Element all den verbleibenden Platz verbraucht. Aber warum nicht ein DockPanel benutzen? Dekorieren Sie die anderen Elemente in der DockPanel mit DockPanel.Dock="Top", und dann helfen, die Kontrolle kann den verbleibenden Raum füllen.

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>

Wenn Sie auf einer Plattform ohne DockPanel stehen zur Verfügung (z Windows Store) können Sie den gleichen Effekt mit einem Raster erstellen. Hier ist das obige Beispiel unter Verwendung von Gittern erreicht statt:

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

Answer 2

Der Grund, dass dies geschieht, weil die Stapelplatte Maßnahmen jedes Kind Element mit positiver Unendlichkeit als die Beschränkung für die Achse, die es Elemente entlang stapeln. Die untergeordneten Steuerelemente müssen zurückkehren, wie groß sie (positive Unendlichkeit sein wollen ist keine gültige Rückkehr aus der IScrollInfo , aber das beginnt kompliziert zu bekommen, wenn Sie gehen richtig alle, sie umzusetzen.

Answer 3

Ein alternatives Verfahren ist ein Gitter mit einer Spalte zu verwenden und n Reihen. Legen Sie alle Zeilen Höhen Auto, und die unterste Zeile Höhe 1*.

Ich ziehe diese Methode, weil ich Grids haben eine bessere Leistung als Layout DockPanels, StackPanels und WrapPanels gefunden habe. Aber, wenn Sie sie in einer ItemTemplate verwenden (wo das Layout für eine große Anzahl von Elementen durchgeführt wird), werden Sie wahrscheinlich nie bemerkt.

Answer 4

Sie können mit modifizierte Version von 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>

Erste-Taste wird füllen.

Sie können es über Nuget installieren:

Install-Package SpicyTaco.AutoGrid

Ich empfehle auch einen Blick auf wpf-autogrid . Es ist sehr nützlich für Formulare in WPF anstelle von DockPanel, Stackpanel und Grid und löst Problem mit Strecken sehr einfach und elegant. Schauen Sie sich nur readme auf Github.

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

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

    <Label Content="Comment:"/>
    <TextBox/>
</st:AutoGrid>

Answer 5

Ein paar Dinge, die Sie tun können:

1: Stellen Sie die Orientation auf Vertikal :

<StackPanel Orientation="Vertical"></StackPanel>

2. Stellen Sie die Height des StackPanel auf das gleiche wie die des Fensters:

Und natürlich können Sie diejenigen kombinieren Eigenschaften :

<StackPanel Orientation="Vertical" Height="600"></StackPanel>

Sie brauchen nicht eine ganze Reihe von Mehrarbeit bei der Installation von nugets und so weiter ....

zu tun

Bearbeiten

Sie können auch die Stackpanel platzieren innerhalb eines Scroll. Dies ermöglicht es Ihnen, die Höhe des GroupBox zu steuern, ohne Inhalt Sichtbarkeit zu opfern.

<GroupBox>
    <ScrollViewer>
        <StackPanel Orientation="Vertical>
              <!-- Place Children Objects here-->
        <StackPanel>
    <ScrollViewer>
<GroupBox>