Come ottenere i bambini di StackPanel di riempire lo spazio massimo verso il basso?

Question

Voglio semplicemente scorrere il testo a sinistra, e una scatola di aiuto sulla destra.

La casella di aiuto dovrebbe estendere tutta la strada fino in fondo.

Se si prende lo StackPanel esterna sotto funziona benissimo.

Ma per motivi di impaginazione (sto inserendo controlli utente in modo dinamico) ho bisogno di avere lo StackPanel avvolgimento.

Come faccio ad avere il GroupBox di estendere fino al fondo del StackPanel, come si può vedere che ho provato:

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

Risposta:

Grazie Marco, utilizzando DockPanel invece di StackPanel riesce up. In generale, mi trovo con DockPanel sempre di più ora per WPF interfaccia grafica, ecco la XAML fisso:

<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

Sembra che si desidera un StackPanel in cui l'elemento finale utilizza tutto lo spazio rimanente. Ma perché non utilizzare un DockPanel? Decorare gli altri elementi della DockPanel con DockPanel.Dock="Top", e quindi il vostro controllo aiuto può riempire lo spazio rimanente.

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>

Se si è su una piattaforma senza DockPanel disponibili (ad esempio Windows Store), è possibile creare lo stesso effetto con una griglia. Ecco l'esempio precedente realizzato utilizzando griglie invece:

<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

Il motivo per cui questo sta accadendo perché le misure del pannello pila ogni elemento figlio con infinito positivo come vincolo per l'asse che si è impilabile elementi insieme. I controlli figlio devono restituire quanto grande che vogliono essere (infinito positivo non è un ritorno valida dal MeasureOverride in entrambi gli assi) in modo da restituire il più piccolo formato in cui tutto andrà bene. Essi non hanno alcun modo di sapere quanto spazio hanno davvero a riempire.

Se la vista non ha bisogno di avere una funzione di scorrimento e la risposta di cui sopra non soddisfa le tue esigenze, vorrei suggerire implementare il proprio pannello. Probabilmente si può derivare direttamente dalla StackPanel e poi tutto quello che dovete fare è cambiare la metodo ArrangeOverride in modo che divide lo spazio rimanente tra i suoi elementi secondari (dando loro ogni la stessa quantità di spazio in più). Elementi dovrebbero rendere bene se sono dato più spazio di quello che volevano, ma se si dà loro meno si inizierà a vedere difetti.

Se si vuole essere in grado di scorrere l'intera cosa è allora che sono le cose paura sarà un po 'più difficile, perché lo ScrollViewer ti dà una quantità infinita di spazio per lavorare con che vi metterà nella stessa posizione come il elementi figlio erano in origine. In questa situazione si potrebbe desiderare di creare una nuova proprietà sulla vostra nuovo pannello che consente di specificare le dimensioni finestra, si dovrebbe essere in grado di legarsi questo alle dimensioni del ScrollViewer. Idealmente si dovrebbe implementare IScrollInfo , ma che inizia a complicarsi, se avete intenzione di attuare tutte in modo appropriato.

Answer 3

Un metodo alternativo è quello di utilizzare una griglia con una colonna e n righe. Impostare tutte le righe altezze Auto, e il più in basso altezza della riga 1*.

Io preferisco questo metodo perché ho trovato Le griglie hanno una migliore performance di layout di DockPanels, StackPanels, e WrapPanels. Ma a meno che non li sta utilizzando in un ItemTemplate (dove il layout è stato eseguito per un gran numero di elementi), sarà probabilmente mai notato.

Answer 4

È possibile utilizzare versione modificata di 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>

In primo pulsante verrà riempire.

È possibile installarlo tramite Nuget:

Install-Package SpicyTaco.AutoGrid

Raccomando anche dare un'occhiata a WPF-autogrid . E 'molto utile per le forme in WPF, invece di DockPanel, StackPanel e Grid e risolvere il problema con stretching molto facile e con grazia. Basta guardare readme su github.

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

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

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

Answer 5

Un paio di cose che potreste fare:

1: Impostare la Orientation a Verticale :

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

2. Imposta la Height del StackPanel per la stessa di quella della finestra:

E, naturalmente, è possibile combinare gli Proprietà :

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

Non è necessario fare un sacco di lavoro in più con NuGets installazione e quant'altro ....

Modifica

È anche possibile inserire lo StackPanel interno di uno ScrollViewer. Questo vi permetterà di controllare l'altezza del GroupBox senza sacrificare la visibilità dei contenuti.

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