wpf - ¿Cómo forzar a Grid a reducir una fila de tamaño automático que contiene ScrollViewer(cuando es necesario)?

layout

Question

Soy nuevo en WPF. Quiero hacer este diseño simple y simplemente no puedo hacerlo. Déjame dibujarlo por ti:

La idea es mantener el texto azul siempre justo debajo del elemento verde, PERO cuando no hay suficiente espacio, el elemento verde debe colocarse dentro de un contenedor desplazable (con la barra de desplazamiento vertical visible).

He intentado StackPanel y Grid y ambos fallaron. El StackPanel no reduce las filas en absoluto. The Grid hace lo mismo si el alto de RowDefinition está configurado en "auto" (el ScrollViewer inside no muestra su barra de desplazamiento). Si se establece en una estrella, el texto azul se mueve hacia abajo hasta al menos la mitad del espacio (depende de la configuración de altura de la fila inferior). La altura de la fila inferior puede ser una "auto" o una estrella con VerticalAlignment del texto azul establecido en Top PERO la altura de la fila debe mantenerse al menos tan grande como la del texto. Por supuesto, toda el área (caja negra) no puede estirarse por su contenido, sino que está determinada por el tamaño de la ventana.

Si sabes cómo hacerlo funcionar correctamente, por favor ayuda. Publique en XAML si lo desea. ¡Gracias!

Answer 1

<Grid Name="outerGrid">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"></RowDefinition>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <Canvas>
        <Grid MaxWidth="{Binding ElementName=outerGrid, Path=ActualWidth}" MaxHeight="{Binding ElementName=outerGrid, Path=ActualHeight}">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"></RowDefinition>
                <RowDefinition Height="Auto"></RowDefinition>
            </Grid.RowDefinitions>
            <ScrollViewer Width="{Binding ElementName=outerGrid, Path=ActualWidth}">
                <TextBlock TextWrapping="Wrap">In this case the element is too big to fit inside whole space (the black box) with the blue text below. I want the scrollbar to be shown instead of moving the blue text outside of the black box (and clipped)</TextBlock>
            </ScrollViewer>
            <TextBlock TextWrapping="Wrap" Grid.Row="1">Automatically wrapped text of unknown length.</TextBlock>
        </Grid>
    </Canvas>
</Grid>

La altura automática crecerá para coincidir con la altura del contenido de esa fila.

La altura de la estrella permitirá que esa fila crezca en altura para llenar el resto de la altura de la cuadrícula, evitando que ScrollViewer crezca más de lo que está visible.

Editar : si coloca la cuadrícula dentro de otra cuadrícula como la XAML anterior, debe obtener el comportamiento que desea. La segunda fila de la fila externa actúa como un "relleno" para llenar el resto del espacio de la Rejilla exterior.

Edición 2 : pruebe el XAML editado arriba. Puse la Grid interior dentro de un Canvas (para evitar el recorte) y MaxWidth el MaxWidth y MaxHeight de la Grid interna a la ActualWidth y a la ActualWidth ActualHeight de la Grid exterior para mantener la Grid interna del mismo tamaño que la Grid exterior.

Edición 3 : Se agregó un enlace al Width del ScrollViewer para mantenerlo del mismo ancho que el resto.

Answer 2

Inspirado por el enfoque de Eirik de restringir un contenedor codicioso poniéndolo dentro de otro contenedor ajustado, descubrí una manera realmente simple de lograr lo que quería. Solo necesitaba un contenedor que encoge primero a su hijo, luego (cuando el primero desaparece completamente) el segundo. Y hay tal contenedor: el DockPanel. Aquí va:

<DockPanel LastChildFill="False">
    <DockPanel DockPanel.Dock="Top">
        <TextBlock DockPanel.Dock="Bottom" TextWrapping="Wrap" Grid.Row="1">Automatically wrapped text of unknown length.</TextBlock>
        <ScrollViewer>
            <TextBlock TextWrapping="Wrap">In this case the element is too big to fit inside whole space (the black box) with the blue text below. I want the scrollbar to be shown instead of moving the blue text outside of the black box (and clipped)</TextBlock>
        </ScrollViewer>
    </DockPanel>
</DockPanel>

¡Tan sencillo como eso! :) Espero que esto ayude a alguien.