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

Artículo
08/10/2011

En este tema se introducen instrucciones para los programadores sobre cómo escribir aplicaciones de Windows Presentation Foundation (WPF) con user interfaces (UIs) localizables. En el pasado, la localización de una UI era un proceso largo. Se necesitaba un ajuste píxel a píxel para cada idioma al que se adaptaba la UI. 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 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 UI 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 UI 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

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 UI 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" >`
Agregar una propiedad 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 el atributo xml:lang en el elemento raíz de la UI; por ejemplo, xml:lang="en-US" para una aplicación en inglés de Estados Unidos. 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. Los elementos de UI 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 UI 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

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

El elemento Grid resulta útil 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 adjunta Grid.IsSharedSizeScope 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