¿Cómo lograr que los niños de StackPanel para llenar el máximo espacio a la baja?

https://stackoverflow.com/questions/569095

05-09-2019
|

Pregunta

Simplemente quiero que fluye texto a la izquierda, y una caja de ayuda a la derecha.

El cuadro de ayuda debe extenderse todo el camino hasta la parte inferior.

Si usted saca el exterior por debajo de StackPanel funciona muy bien.

Sin embargo, por razones de diseño (estoy insertando UserControls dinámicamente) Es necesario disponer de StackPanel envoltura.

¿Cómo llego GroupBox a extenderse hacia abajo hasta la parte inferior de la StackPanel, como se puede ver que he intentado:

VerticalAlignment = "estiramiento"
VerticalContentAlignment = "estiramiento"
Altura = "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>

Respuesta:

Gracias Marcos, utilizando DockPanel en lugar de StackPanel sacó hacia arriba. En general, me encuentro con DockPanel más y más ahora para WPF maquetación, aquí está el XAML fijo:

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

Solución

Parece que usted quiere una StackPanel donde el elemento final usa todo el espacio restante. Pero ¿por qué no usar un DockPanel? Decorar los otros elementos en el DockPanel con DockPanel.Dock="Top", y luego el control de ayuda puede llenar el espacio restante.

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>

Si usted está en una plataforma sin DockPanel disponibles (por ejemplo, Windows Store), se puede crear el mismo efecto con una rejilla. Aquí está el ejemplo anterior logrado usando rejillas en su lugar:

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

Otros consejos

La razón de que esto está sucediendo es porque las medidas del panel pila cada elemento secundario con el infinito positivo como la restricción para el eje que se está apilando elementos a lo largo. Los controles secundarios tienen que devolver lo grandes que quieren ser (infinito positivo no es una respuesta válida desde el MeasureOverride en cualquiera de los ejes) para que regresen el tamaño más pequeño en el que todo encaja. No tienen ninguna manera de saber la cantidad de espacio que realmente tienen que llenar.

Si su vista no necesita tener una función de desplazamiento y la respuesta anterior no satisface sus necesidades, sugeriría poner en práctica su propio panel. Probablemente se puede derivar directamente de StackPanel y entonces todo lo que necesita hacer es cambiar el método ArrangeOverride de modo que divide el espacio que queda entre sus elementos secundarios (que cada uno dando la misma cantidad de espacio adicional). Los elementos deben rendir bien si se les da más espacio de lo que querían, pero si se les da menos se van a empezar a ver problemas técnicos.

Si usted quiere ser capaz de desplazarse todo el asunto, entonces estoy cosas tenga miedo a ser un poco más difícil, ya que el ScrollViewer le da una cantidad infinita de espacio para trabajar con la que le pondrá en la misma posición que la elementos secundarios eran originalmente. En esta situación es posible que desee crear una nueva propiedad en su nuevo panel que le permite especificar el tamaño de la ventana gráfica, usted debería ser capaz de unirse a este al tamaño de la ScrollViewer. Lo ideal sería aplicar IScrollInfo , pero que comienza a complicarse si se va a poner en práctica todos de forma adecuada.

Un método alternativo es utilizar una rejilla con una columna y n filas. Establecer todas las alturas filas a Auto, y la mayor parte de abajo a la altura de fila para 1*.

Yo prefiero este método porque he encontrado rejillas tienen un mejor rendimiento que el diseño DockPanels, StackPanels y WrapPanels. Pero a menos que los está utilizando en un ItemTemplate (donde se realiza el diseño de un gran número de artículos), es probable que nunca se nota.

Puede utilizar versión modificada del 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>

En primer botón se llene.

Se puede instalar a través de Nuget:

Install-Package SpicyTaco.AutoGrid

También recomiendo echar un vistazo a WPF-AutoGrid. Es muy útil para las formas en lugar de WPF DockPanel, StackPanel y rejilla y resolver un problema con el estiramiento muy fácil y con gracia. Basta con mirar a readme en github.

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

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

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

Un par de cosas que podría hacer:

1: Establecer el Orientation a vertical

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

Ajuste el Height del StackPanel a la misma que la de la ventana:

Y, por supuesto, puede combinar los Propiedades

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

No es necesario hacer un montón de trabajo extra con la instalación de nugets y otras cosas ....

Editar

También puede colocar el StackPanel en el interior de un ScrollViewer. Esto le permitirá controlar la altura de la GroupBox sin sacrificar la visibilidad del contenido.

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

Licenciado bajo: CC-BY-SA con atribución

No afiliado a StackOverflow