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

Artículo
10/07/2008

Actualización: noviembre 2007

En este tema se introducen instrucciones para los programadores sobre cómo escribir aplicaciones de Windows Presentation Foundation (WPF) con interfaces de usuario (UIs) localizables. En el pasado, la localización de una interfaz de usuario era un proceso largo. Se necesitaba un ajuste píxel a píxel para cada idioma al que se adaptaba la interfaz de usuario. En la actualidad, con un diseño correcto y siguiendo las normas de codificación apropiadas, se puede construir la UIs de modo que los localizadores tengan que realizar menos cambios de tamaño y posición. El enfoque al escribir aplicaciones cuyo tamaño y posición pueda cambiarse con mayor facilidad se denomina diseño automático y se puede lograr utilizando el diseño de aplicaciones de WPF.

Este tema contiene las secciones siguientes.

Ventajas de utilizar el diseño automático
Diseño automático y controles
Diseño automático y normas de codificación
Diseño automático y cuadrículas
Diseño automático y cuadrículas mediante la propiedad IsSharedSizeScope
Temas relacionados

Ventajas de utilizar el diseño automático

Dado que el sistema de presentación de WPF es eficaz y flexible, proporciona la capacidad de diseñar elementos en una aplicación que se puedan ajustar para adaptarlos a los requisitos de los distintos idiomas. En la lista siguiente se señalan algunas de las ventajas del diseño automático.

La interfaz de usuario se muestra correctamente en todos los idiomas.
Se reduce la necesidad de reajustar la posición y el tamaño de los controles una vez traducido el texto.
Se reduce la necesidad de reajustar el tamaño de la ventana.
El diseño de la interfaz de usuario se representa correctamente en cualquier idioma.
La localización se puede reducir hasta el punto de consistir en poco más que la traducción de las cadenas.

Diseño automático y controles

El diseño automático permite ajustar automáticamente el tamaño de los controles en la aplicación. Por ejemplo, un control puede cambiar para alojar la longitud de una cadena. Esta función permite a los localizadores traducir la cadena; ya no tienen que cambiar el tamaño del control para ajustar el texto traducido. En el ejemplo siguiente se crea un botón con contenido en inglés.

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

<DockPanel> 
    <Button FontSize="28" Height="50">My name is Hope.</Button>
</DockPanel>
</Window>

En el ejemplo, lo único que hay que hacer para obtener un botón en español es cambiar el texto. Por ejemplo,

<Window
    xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="ButtonLoc.Pane1"
    Name="myWindow"
    SizeToContent="WidthAndHeight"
    >

 <DockPanel> 
    <Button FontSize="28" Height="50">Me llamo Esperanza.</Button>
  </DockPanel>
</Window>

En el gráfico siguiente se muestra el resultado de los ejemplos de código.

Botón cuyo tamaño se ajusta automáticamente
El mismo botón con texto en diferentes idiomas

Nota

Para ver el ejemplo completo del que se extrajeron los ejemplos anteriores, consulte: Ejemplo Automatic Layout for Localizable Applications.

Diseño automático y normas de codificación

El uso del enfoque del diseño automático exige aplicar un conjunto de normas y reglas de codificación y diseño a fin de generar una interfaz de usuario que se puede localizar plenamente. Las instrucciones siguientes le ayudarán a codificar el diseño automático.

Normas de codificación	Descripción
No utilice posiciones absolutas.	No utilice el objeto Canvas, porque coloca los elementos con posiciones absolutas. Utilice DockPanel, StackPanel y Grid para colocar los controles. Para obtener una explicación de los distintos tipos de paneles, consulte Información general sobre elementos Panel.
No se establezca un tamaño fijo para una ventana.	Utilice SizeToContent. Por ejemplo: `<StackPanel xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml" x:Class="GridLoc.Pane1" >`
Agregue un objeto FlowDirection.	Agregue una propiedad FlowDirection al elemento raíz de la aplicación. WPF proporciona una manera cómoda de admitir diseños horizontales, bidireccionales y verticales. En el marco de trabajo de presentación, se puede utilizar la propiedad FlowDirection para definir el diseño. Los modelos de dirección de flujo son: LeftToRight (LrTb): diseño horizontal para fuentes latinas, de Asia oriental, etc. RightToLeft (RlTb): diseño bidireccional para fuentes árabes, hebreas, etc.
Utilice fuentes compuestas en lugar de fuentes físicas.	Con las fuentes compuestas, no es preciso localizar la propiedad FontFamily. Los programadores pueden utilizar una de las fuentes siguientes o crear la suya propia. Interfaz de usuario global Global San Serif Global Serif
Agregue xml:lang.	Agregue la propiedad XmlLang en el elemento raíz de la interfaz de usuario; por ejemplo, xml:lang="es-ES" para una aplicación en español. Dado que las fuentes compuestas utilizan xml:lang para determinar qué fuente utilizar, establezca esta propiedad para admitir escenarios multilingües.

Diseño automático y cuadrículas

El elemento Grid resulta útil para el diseño automático porque permite al programador colocar los elementos. Un control Grid es capaz de distribuir el espacio disponible entre sus elementos secundarios, que se organizan en columnas y filas, y colocar elementos de interfaz de usuario en cada celda. Los elementos de interfaz de usuario pueden abarcar varias celdas y es posible que haya cuadrículas dentro de otras cuadrículas. Las cuadrículas son útiles porque permiten crear y colocar una interfaz de usuario compleja. En el ejemplo 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.

<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 la cuadrícula generada por el código anterior.

Cuadrícula
Ejemplo de cuadrícula

Nota

Para obtener el ejemplo de código completo, consulte Ejemplo Grid for Localizable Applications.

Diseño automático y cuadrículas mediante la propiedad IsSharedSizeScope

Las cuadrículas son útiles en las aplicaciones localizables para crear controles que se ajusten a su contenido. Sin embargo, a veces se desea que los controles mantengan un tamaño determinado sin tener en cuenta su contenido. Por ejemplo, probablemente no desee que el tamaño de los botones "Aceptar", "Cancelar" o "Examinar" se ajuste al contenido. En este caso la propiedad asociada IsSharedSizeScope del elemento Grid resulta útil para compartir el mismo tamaño entre varios elementos de la cuadrícula. En el ejemplo siguiente se muestra cómo compartir el tamaño de las columnas y filas entre varios elementos de Grid.

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">  
    <Button Click="setTrue" Margin="0,0,10,10">Set IsSharedSizeScope="True"</Button>
    <Button Click="setFalse" Margin="0,0,10,10">Set IsSharedSizeScope="False"</Button>
</StackPanel> 

<StackPanel Orientation="Horizontal" DockPanel.Dock="Top">

<Grid ShowGridLines="True" Margin="0,0,10,0">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0" Width="200" Height="100"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0" Width="150" Height="100"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

<Grid ShowGridLines="True">
  <Grid.ColumnDefinitions>
    <ColumnDefinition SharedSizeGroup="FirstColumn"/>
    <ColumnDefinition SharedSizeGroup="SecondColumn"/>
  </Grid.ColumnDefinitions>
  <Grid.RowDefinitions>        
    <RowDefinition Height="Auto" SharedSizeGroup="FirstRow"/>
  </Grid.RowDefinitions>

    <Rectangle Fill="Silver" Grid.Column="0" Grid.Row="0"/>
    <Rectangle Fill="Blue" Grid.Column="1" Grid.Row="0"/>

    <TextBlock Grid.Column="0" Grid.Row="0" FontWeight="Bold">First Column</TextBlock>
    <TextBlock Grid.Column="1" Grid.Row="0" FontWeight="Bold">Second Column</TextBlock>
</Grid>

</StackPanel>

<TextBlock Margin="10" DockPanel.Dock="Top" Name="txt1"/>

Nota: para obtener el ejemplo de código completo, consulte Cómo: Compartir propiedades de ajuste de tamaño entre elementos Grid