Compartir a través de

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

En este tema se presentan instrucciones para desarrolladores 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 lento. Cada idioma para el que se adaptó la interfaz de usuario requiere un ajuste de píxel por píxel. Hoy en día, con el diseño adecuado y los estándares de codificación adecuados, las interfaces de usuario se pueden construir para que los localizadores tengan menos tamaño y cambio de posición. El enfoque para escribir aplicaciones que se pueden cambiar de tamaño y cambiar la posición se denomina diseño automático y se puede lograr mediante el diseño de aplicaciones WPF.

Ventajas del uso del diseño automático

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

  • La interfaz de usuario se muestra bien en cualquier idioma.

  • Reduce la necesidad de ajustar la posición y el tamaño de los controles después de traducir el texto.

  • 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 que es poco más que la traducción de cadenas.

Diseño automático y controles

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

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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, todo lo que tiene que hacer para que un botón sea español es cambiar el texto. Por ejemplo

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://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 la salida de los ejemplos de código:

El mismo botón con texto en diferentes idiomas

Estándares de codificación y diseño automático

El uso del enfoque de diseño automático requiere un conjunto de estándares y reglas de codificación y diseño para generar una interfaz de usuario totalmente localizable. Las instrucciones siguientes ayudarán a la codificación de diseño automática.

No usar posiciones absolutas

Para obtener una explicación sobre varios tipos de paneles, vea Información general sobre paneles.

No establecer un tamaño fijo para una ventana

  • Utilice Window.SizeToContent. Por ejemplo:

    
<StackPanel
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    x:Class="GridLoc.Pane1"
>

Agregar un FlowDirection

  • Agregue un FlowDirection al elemento raíz de su aplicación.

    WPF proporciona una manera cómoda de admitir diseños horizontales, bidireccionales y verticales. En el marco de presentación, la FlowDirection propiedad se puede usar para definir el diseño. Los patrones de dirección de flujo son:

Usar fuentes compuestas en lugar de fuentes físicas

  • Con las fuentes compuestas, no es necesario localizar la FontFamily propiedad .

  • Los desarrolladores pueden usar una de las siguientes fuentes o crear sus propias fuentes.

    • Interfaz de usuario global
    • Global San Serif
    • Global Serif

Agregar xml:lang

  • Agregue el xml:lang atributo en el elemento raíz de la interfaz de usuario, como xml:lang="en-US" para una aplicación en inglés.

  • Dado que las fuentes compuestas usan xml:lang para determinar qué fuente usar, establezca esta propiedad para admitir escenarios multilingües.

Diseño automático y cuadrículas

El Grid elemento es útil para el diseño automático porque permite al desarrollador colocar elementos. Un Grid control es capaz de distribuir el espacio disponible entre sus elementos secundarios, utilizando una disposición de columna y fila. Los elementos de la interfaz de usuario pueden abarcar varias celdas y es posible tener cuadrículas dentro de otras. Las cuadrículas son útiles porque permiten crear y colocar una interfaz de usuario compleja. En el ejemplo siguiente se muestra cómo usar una cuadrícula para colocar algunos botones y texto. Observe que el alto y el ancho de las celdas se establecen en Auto; por lo tanto, la celda que contiene el botón con una imagen se ajusta para adaptarse 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.

Ejemplo de cuadrícula Cuadrícula

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

Un Grid elemento es útil en aplicaciones localizables para crear controles que se ajusten al contenido. Sin embargo, en ocasiones desea que los controles mantengan un tamaño determinado independientemente del contenido. Por ejemplo, si tiene los botones "Aceptar", "Cancelar" y "Examinar", probablemente no querrá que los botones se ajusten al tamaño del contenido. En este caso, la Grid.IsSharedSizeScope propiedad adjunta es útil para compartir el mismo ajuste de tamaño entre varios elementos de cuadrícula. En el ejemplo siguiente se muestra cómo compartir datos de tamaño de columna y fila entre varios Grid elementos.

   <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, vea Compartir propiedades de ajuste de tamaño entre cuadrículas.

Consulte también