Wie können StackPanels Kinder den maximalen Speicherplatz nach unten füllen?

Möchte ich einfach nur Fließtext auf der linken Seite, und ein Hilfe-Feld auf der rechten Seite.

Hilfe-box sollte den ganzen Weg erstreckt sich auf der Unterseite.

Wenn Sie nehmen Sie die äußere StackPanel unten, es funktioniert Super.

Aber aus Gründen der layout - (ich bin einfügen Benutzersteuerelemente dynamisch) brauche ich, um das wickeln StackPanel.

Wie bekomme ich die GroupBox zu verlängern, nach unten zum Rand des StackPanel, wie Sie sehen können, dass ich versucht habe:

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>

Antwort:

Dank Mark, mit DockPanel statt StackPanel es gelöscht. Im Allgemeinen finde ich, dass ich mit DockPanel nun mehr und mehr für WPF-Layout, 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>

InformationsquelleAutor der Frage Edward Tanguay | 2009-02-20

285

Es klingt wie Sie wollen ein StackPanel wo das Letzte element verwendet, bis alle verbleibenden Speicherplatz. Aber warum nicht ein DockPanel? Dekorieren Sie die anderen Elemente in der DockPanel mit DockPanel.Dock="Top"und dann Ihre Hilfe Steuern können, füllen Sie den verbleibenden Platz.

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 erhältlich (z.B. WindowsStore), können Sie den gleichen Effekt mit einem raster. Hier ist das obige Beispiel durchgeführt mit Gitter 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>

InformationsquelleAutor der Antwort Mark Heath

99

Dem Grund, dass dies passiert ist, weil das stack-panel misst jedes Kind-element mit positiven Unendlichkeit wie die Einschränkung für die Achse, dass es stacking-Elemente zusammen. Die untergeordneten Steuerelemente haben, um zurückzukehren, wie groß Sie werden wollen (positive Unendlichkeit ist nicht ein gültiges Rückkehr aus dem MeasureOverride in beiden Achsen) so kehren Sie die kleinste Größe, wo alles passt. Sie haben keine Möglichkeit zu wissen, wie viel Platz Sie wirklich haben, zu füllen.

Wenn Ihre Ansicht nicht brauchen, um eine Scroll-Funktion und die Antwort oben nicht Ihren Anforderungen entsprechen, würde ich vorschlagen, implementieren Sie Ihre eigenen Bedienfeld. Kann man wohl ableiten, gerade aus StackPanel und dann alles, was Sie tun müssen ist, ändern Sie die ArrangeOverride - Methode so, dass Sie teilt die verbleibenden Raum zwischen den Kind-Elementen (geben Sie jeweils die gleiche Menge an extra-Raum). Elemente Rendern sollten fein sein, wenn Sie mehr Platz, als Sie wollte, aber wenn man Ihnen noch weniger werden Sie beginnen zu sehen, Pannen.

Wenn Sie wollen, um zu scrollen, das ganze dann fürchte ich, werden die Dinge ein bißchen schwieriger, weil das ScrollViewer-Element gibt Ihnen eine unendliche Menge an Speicherplatz, mit zu arbeiten, die Sie in der gleichen position wie die untergeordneten Elemente wurden ursprünglich. In dieser situation möchten Sie möglicherweise erstellen Sie eine neue Eigenschaft auf dem neuen panel, das ermöglicht die Angabe der viewport-Größe, sollten Sie in der Lage sein, binden diese an das ScrollViewer-Größe. Im Idealfall würde Sie implementieren IScrollInfoaber kompliziert wird es, wenn Sie implementieren alle es richtig zu stellen.

InformationsquelleAutor der Antwort Caleb Vear
54

Alternative Methode ist die Verwendung von einem Raster mit einer Spalte und n Zeilen. Alle Zeilen, die Höhen zu Autound die Unterste Zeile Höhe zu 1*.

Ich bevorzuge diese Methode, weil ich gefunden habe, die Gitter haben besseres layout Leistung als DockPanels, StackPanels, und WrapPanels. Aber es sei denn, Sie sind mit Ihnen in ein ItemTemplate (wo das layout durchgeführt wird, für eine große Anzahl von Elementen), wirst du wohl nie bemerken.

InformationsquelleAutor der Antwort rcabr

Können Sie modifizierte version des 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 Schaltfläche füllen.

Können Sie die Installation über Nuget:

Install-Package SpicyTaco.AutoGrid

Ich empfehle auch einen Blick auf wpf-autogrid. Es ist sehr nützlich für Formulare, die in WPF statt DockPanel, StackPanel und Grid und zu lösen problem mit dehnen sehr einfach und anmutig. Schauen Sie nur auf die readme-Datei auf github.

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

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

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

InformationsquelleAutor der Antwort Dvor_nik

-1

Paar Dinge, die Sie tun könnten:

1: Orientation zu Vertikale:
```
<StackPanel Orientation="Vertical"></StackPanel>
```
1. Legen Sie die Height des StackPanel um die gleiche wie die der Fenster:
Und, natürlich, können Sie kombinieren diese Eigenschaften:
```
<StackPanel Orientation="Vertical" Height="600"></StackPanel>
```
Brauchen Sie nicht zu tun eine ganze Menge zusätzliche Arbeit bei der Installation NuGets und so weiter....

BEARBEITEN

Können Sie auch das StackPanel-Steuerelement innerhalb eines ScrollViewer-Element. Dies ermöglicht es Ihnen zu Steuern, die Höhe der GroupBox ohne Einbußen bei der Sichtbarkeit des Inhalts.
```
<GroupBox>
    <ScrollViewer>
        <StackPanel Orientation="Vertical>
              
        <StackPanel>
    <ScrollViewer>
<GroupBox>
```
InformationsquelleAutor der Antwort Uchiha Itachi

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.