Diseño de página

    En WPF, para diseñar los elementos de la aplicación, debe colocarlos dentro de un Panel. El panel es un elemento contenedor que controla la disposición de sus elementos secundarios. En Angular, para personalizar el diseño de la página y sus elementos secundarios, debe usar CSS. Repasemos algunos de los paneles más populares de WPF y veamos cómo podemos lograr un diseño similar con CSS.

    StackPanel

    ​StackPanel organiza sus elementos secundarios en una sola línea que puede orientarse horizontal o verticalmente. Agreguemos varios botones en un StackPanel y veamos cómo se ven en WPF:

    <StackPanel>
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
    <Button>4</Button>
    <Button>5</Button>
</StackPanel>
xml

    Si queremos lograr un diseño similar en Angular, podemos usar el diseño CSS Flexbox. El Módulo de Diseño de Caja Flexible es un poderoso mecanismo que permite diseñar una estructura de diseño flexible y receptiva. Para usar el diseño de Flexbox, tenemos que definir un contenedor que tenga su display propiedad establecida en flex. Además, para apilar los elementos verticalmente, tenemos que establecer la flex-direction propiedad en column.

    <div class="flex-container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>
html
    .flex-container {
    display: flex;
    flex-flow: column;
}
css

    Aquí está el resultado final en el navegador:

    El valor predeterminado de la propiedad flex-direction es row, que equivale a un StackPanel con orientación horizontal en WPF. Flexbox también admite direcciones row-reverse y column-reverse que apilan los elementos de derecha a izquierda y de abajo hacia arriba, respectivamente.

    WrapPanel

    ​WrapPanel coloca los elementos secundarios en posición secuencial de izquierda a derecha, dividiendo el contenido en la siguiente línea en el borde del cuadro contenedor. El orden posterior se realiza secuencialmente de arriba a abajo o de derecha a izquierda, según el valor de la propiedad Orientación. Agreguemos varios botones en un WrapPanel y veamos cómo se ven en WPF:

    <WrapPanel>
    <WrapPanel.Resources>
        <Style TargetType="Button">
            <Setter Property="Width" Value="150"></Setter>
        </Style>
    </WrapPanel.Resources>
    <Button>1</Button>
    <Button>2</Button>
    <Button>3</Button>
    <Button>4</Button>
    <Button>5</Button>
</WrapPanel>
xml

    Para lograr un resultado similar en Angular, volveremos a utilizar el diseño Flexbox. Al igual que en el caso de StackPanel, tenemos que establecer la display propiedad en flex, pero también tenemos que establecer la flex-wrap propiedad en wrap.

    <div class="flex-container">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
</div>
html
    .flex-container {
    display: flex;
    flex-wrap: wrap;
}

button {
    width: 150px;
}
css

    Aquí está el resultado final en el navegador:

    Si desea lograr un resultado similar a un WrapPanel con Orientation="Vertical", debe establecer la propiedad flex-direction en column. La propiedad flex-flow es una propiedad abreviada para configurar las propiedades flex-direction y flex-wrap.

    .flex-container {
    display: flex;
    flex-flow: row wrap;
}
css

    Flexbox admite algunas propiedades CSS más para alinear los elementos. Puedes aprender más sobre ellos en este tutorial.

    Grid

    La Grid define un área de cuadrícula flexible que consta de columnas y filas. Agreguemos varios botones en una cuadrícula y veamos cómo se ven en WPF:

    <Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Button Grid.RowSpan="2" Grid.ColumnSpan="2">1</Button>
    <Button Grid.Column="2">2</Button>
    <Button Grid.Row="1" Grid.Column="2">3</Button>
    <Button Grid.Row="2">4</Button>
    <Button Grid.Row="2" Grid.Column="1">5</Button>
    <Button Grid.Row="2" Grid.Column="2">6</Button>
    <Button Grid.Row="3" Grid.ColumnSpan="3">7</Button>
</Grid>
xml

    En Angular, podríamos usar el módulo de diseño de cuadrícula CSS, que ofrece un sistema de diseño basado en cuadrícula, con filas y columnas. Para usar el diseño de cuadrícula, tenemos que definir un contenedor que tenga su display propiedad establecida en grid or inline-grid.

    <div class="grid-container">
    <button class="button1">1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button class="button7">7</button>
</div>
html
    .grid-container {
    display: grid;
}
css

    El diseño de cuadrícula CSS no es compatible con navegadores más antiguos como Internet Explorer 11.

    Ahora definamos las columnas de la cuadrícula usando la propiedad grid-template-columns.

    .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
}
css

    Hemos definido tres columnas con ancho auto, lo que significa que tendrían el mismo ancho. Si desea distribuir el espacio disponible proporcionalmente de manera similar al tamaño de estrella en WPF, puede usar la unidad de tamaño flexible fr en CSS. El siguiente fragmento de código define dos columnas, la primera recibiría una vez el espacio disponible, mientras que la segunda recibiría el doble del espacio disponible:

    .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
}
css

    Ahora agregaremos las filas con una altura de 50 px cada una usando la propiedad grid-template-rows.

    .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 50px 50px 50px 50px;
}
css

    Si abrimos la aplicación ahora queda así:

    Podrías ver una diferencia importante entre las grillas WPF y CSS. En WPF, el valor predeterminado de Grid.Row y Grid.Column es 0, mientras que el diseño de cuadrícula CSS asigna automáticamente la siguiente fila y columna disponibles a sus hijos.

    Ahora apliquemos los intervalos de columnas y filas al primer y séptimo botones. Usaremos las propiedades grid-row y grid-column para ese propósito.

    .button1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.button7 {
    grid-column: 1 / span 3;
}
css

    Primero especificamos la fila/columna inicial, luego, después del símbolo /, podemos especificar la fila/columna final o cuántas filas/columnas debe abarcar el elemento. A diferencia de WPF, la numeración de las columnas de la cuadrícula CSS no está basada en cero y la primera fila/columna es 1.

    Aquí está el CSS completo y el resultado final en el navegador:

    .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 50px 50px 50px 50px;
}

.button1 {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

.button7 {
    grid-column: 1 / span 3;
}
css

    Las propiedades grid-row y grid-column son propiedades abreviadas de las propiedades grid-row-start, grid-row-end, grid-column-start y grid-column-end. Puede obtener más información sobre el contenedor CSS Grid y las propiedades de los elementos en los tutoriales de la sección Recursos adicionales.

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.