Cómo: Usar una cuadrícula para el diseño automático

Actualización: noviembre 2007

En este ejemplo se describe cómo utilizar una cuadrícula en el enfoque de diseño automático de la creación de una aplicación localizable.

La localización de una interfaz de usuario (UI) puede ser un proceso que exija mucho tiempo. A menudo los localizadores se ven obligados a ajustar el tamaño y la posición de los elementos, además de traducir el texto. En el pasado, era preciso ajustar cada idioma al que se adaptaba una interfaz de usuario. Ahora, gracias a las funciones de Windows Presentation Foundation (WPF), es posible diseñar elementos que reducen la necesidad de ajuste. El enfoque de escribir aplicaciones cuyo tamaño y posición se ajusta con mayor facilidad se denomina auto layout.

En el ejemplo de Lenguaje de marcado de aplicaciones extensible (XAML) siguiente se muestra cómo utilizar una cuadrícula para colocar algunos botones y texto. Observe que el alto y ancho de las celdas están establecidos en Auto; por consiguiente, la celda que contiene el botón con una imagen se ajusta a la imagen. Dado que el elemento Grid se puede ajustar a su contenido, puede resultar útil para aplicar el enfoque de diseño automático al diseño de aplicaciones localizables.

Ejemplo

En el ejemplo anterior se muestra cómo utilizar una cuadrícula.

<Grid Name="grid" ShowGridLines ="false">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>

<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="0" FontSize="24">Grid
</TextBlock>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="1" FontSize="12"  
    Grid.ColumnSpan="2">The following buttons and text are positioned using a Grid.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="2" Background="Pink" 
    BorderBrush="Black" BorderThickness="10">Button 1
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="2" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the background 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="3" Foreground="Red">
   Button 2
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="3" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Sets the foreground 
   color.
</TextBlock>  
<Button Margin="10, 10, 5, 5" Grid.Column="0" Grid.Row="4">
   <Image Source="data\flower.jpg"></Image>
</Button>
<TextBlock Margin="10, 10, 5, 5" Grid.Column="1" Grid.Row="4" FontSize="12" 
   VerticalAlignment="Center" TextWrapping="WrapWithOverflow">Adds an image as 
   the button's content.
</TextBlock>
</Grid>

En el gráfico siguiente se muestra el resultado del ejemplo de código.

Cuadrícula

Nota

Para obtener el ejemplo de código completo del que se ha extraído el ejemplo anterior, consulte: Ejemplo Grid for Localizable Applications.

Vea también

Tareas

Cómo: Usar el diseño automático para crear un botón

Conceptos

Información general sobre el uso del diseño automático