Ejemplo: Grid con 3 filas reescalables

Como es un tema sensible y todos sabemos que los GridSplitters son espinosos a veces (cuando los mueves todo puede irse de madre y pegar un “scrolling” infinito que te cagas por las bragas), aquí está un ejemplo que me acabo de hacer a modo de recordatorio. Todas las filas tienen un mínimo de 40 píxeles y se pueden redimensionar libremente.

Juega con ello, ¡se lo merce! Aquí está visualmente lo que te aparecerá. El contenido ya es cosa tuya, chaval Winking smile

image

<Grid Background="Blue" Width="400" Height="400">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition MinHeight="40" Height="*" />
        <RowDefinition Height="5" />
        <RowDefinition MinHeight="40" Height="*" />
        <RowDefinition Height="5" />
        <RowDefinition MinHeight="40" Height="*" />
    </Grid.RowDefinitions>
    <Border
        Grid.RowSpan="3" Grid.Column="1" />
    <ToggleButton Grid.Row="0" Grid.Column="0" />
    <Grid Grid.Row="0" Grid.Column="1">
        <Border Background="LightBlue">
        </Border>
        <ContentPresenter />
    </Grid>
    <ToggleButton Grid.Column="0"
                    Grid.Row="2" />
    <Grid Grid.Row="2" Grid.Column="1">
        <Border Background="Blue">
        </Border>
    </Grid>
    <ToggleButton Grid.Column="0" Grid.Row="4" />
    <Grid Grid.Row="4" Grid.Column="1">
        <Border Background="DarkBlue">
        </Border>
        <ContentPresenter />
    </Grid>
    <GridSplitter Grid.Row="1" Grid.ColumnSpan="2" VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch" Background="Red" />
    <GridSplitter Grid.Row="3" Grid.ColumnSpan="2" VerticalAlignment="Stretch"
                    HorizontalAlignment="Stretch" Background="Red" />
    <Border Grid.Row="0" Grid.RowSpan="3" Grid.Column="1" />
</Grid>

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s