Diseño de página
En WPF, para poder disponer los elementos de tu aplicación, necesitas colocarlos dentro de unPanel. El panel es un elemento contenedor que controla la disposición de sus elementos hijos. En Angular, para personalizar la disposición de la página y sus elementos hijos, tienes que usar CSS. Vamos a repasar algunos de los paneles más populares en WPF y ver cómo podemos lograr un diseño similar con CSS.
StackPanel
OrganizaStackPanel sus elementos hijos en una sola línea que puede orientarse horizontal o verticalmente. Vamos a añadir varios botones en un StackPanel y ver cómo se ven en WPF:
<StackPanel>
<Button>1</Button>
<Button>2</Button>
<Button>3</Button>
<Button>4</Button>
<Button>5</Button>
</StackPanel>
Si queremos lograr un diseño similar en Angular, podemos usar el diseño CSS Flexbox. El Módulo de Distribución de Cajas Flexibles es un mecanismo potente que permite diseñar una estructura de diseño flexible y responsiva. Para usar el diseño Flexbox, tenemos que definir un contenedor cuyadisplay propiedad esté configurada enflex. Además, para apilar los objetos verticalmente, tenemos que establecer laflex-direction propiedad encolumn.
<div class="flex-container">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
.flex-container {
display: flex;
flex-flow: column;
}
Aquí está el resultado final en el navegador:
El valor por defecto de laflex-direction propiedad esrow, que equivale a un Panel de Pilas con orientación horizontal en WPF. La flexbox también soportarow-reverse direccionescolumn-reverse que apilan los elementos de derecha a izquierda y de abajo a arriba, respectivamente.
WrapPanel
PosicionaWrapPanel los elementos hijos en posición secuencial de izquierda a derecha, rompiendo el contenido a la siguiente línea en el borde de la caja contenedora. El orden posterior ocurre secuencialmente de arriba a abajo o de derecha a izquierda, dependiendo del valor de la propiedad de Orientación. Vamos a añadir varios botones en un Panel de Envolvimiento y ver 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>
Para lograr un resultado similar en Angular, volveremos a utilizar el diseño Flexbox. Como en el caso de StackPanel, tenemos que establecer ladisplay propiedad paraflex, pero también tenemos que establecerflex-wrap la propiedad parawrap.
<div class="flex-container">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
.flex-container {
display: flex;
flex-wrap: wrap;
}
button {
width: 150px;
}
Aquí está el resultado final en el navegador:
Si quieres lograr un resultado similar a un WrapPanel con Orientation="Vertical", tienes que establecer laflex-direction propiedad paracolumn. Laflex-flow propiedad es una propiedad abreviada para establecer tanto las propiedades comoflex-directionflex-wrap.
.flex-container {
display: flex;
flex-flow: row wrap;
}
Flexbox admite algunas propiedades CSS más para alinear los elementos. Puedes aprender más sobre ellos en este tutorial.
Grid
DefineGrid un área de cuadrícula flexible compuesta por columnas y filas. Vamos a añadir varios botones en una cuadrícula y ver 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>
En Angular, podríamos usar el Módulo de Disposición de la Malla 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 cuyadisplay propiedad esté configurada engrid oinline-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>
.grid-container {
display: grid;
}
Note
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 lagrid-template-columns propiedad.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
}
Hemos definido tres columnas con anchoauto, lo que significa que tendrían el mismo ancho. Si quieres distribuir el espacio disponible proporcionalmente a la talla estrella en WPF, podrías usar la unidadfr de talla flexible 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 de espacio disponible:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
}
Ahora añadiremos las filas con una altura de 50px cada una usando lagrid-template-rows propiedad.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: 50px 50px 50px 50px;
}
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 spans de columna y fila a los botones primero y séptimo. Usaremos lasgrid-row propiedades ygrid-column para ese propósito.
.button1 {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.button7 {
grid-column: 1 / span 3;
}
Primero especificamos la fila/columna de inicio, y después del/ símbolo, podríamos especificar la fila/columna final o cuántas filas/columnas debe abarcar el elemento. A diferencia de WPF, la numeración de columnas de cuadrícula CSS no es basada en ceros 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;
}
Elgrid-row ygrid-column Las propiedades son propiedades abreviadas para lagrid-row-start,grid-row-end,grid-column-start ygrid-column-end propiedades. Podrías aprender más sobre el contenedor CSS Grid y las propiedades de los objetos en los tutoriales de la Recursos adicionales sección.
Additional Resources
- Caja flexible CSS
- Introducción a la cuadrícula CSS
- Contenedor de cuadrícula CSS
- Elemento de cuadrícula CSS
GitHub