Tutorial: Crear diseños adaptablesTutorial: Create adaptive layouts

En este tutorial se explican los conceptos básicos del uso de las características de diseño adaptativo y XAML, que permiten crear aplicaciones que se vean correctamente con cualquier tamaño.This tutorial covers the basics of using XAML's adaptive layout features, which let you create apps that look good at any size. Aprenderá a agregar puntos de interrupción de ventana, creará un nuevo objeto DataTemplate y usará la clase VisualStateManager para personalizar el diseño de la aplicación.You'll learn how to add window breakpoints, create a new DataTemplate, and use the VisualStateManager class tailor your app's layout. Utilizará estas herramientas para optimizar un programa de edición de imágenes para tamaños de pantalla menores.You'll use these tools to optimize an image editing program for smaller window sizes.

El programa de edición de imágenes tiene dos páginas.The image editing program has two pages. La página principal muestra una vista de la galería de fotos, junto con información acerca de cada archivo de imagen.The main page displays a photo gallery view, along with some information about each image file.

Captura de pantalla de la página principal del Laboratorio fotográfico.

La página de detalles muestra una sola foto después de que se haya seleccionado.The details page displays a single photo after it has been selected. Un menú de edición flotante permite modificar la foto, cambiar su nombre y guardarla.A flyout editing menu allows the photo to be altered, renamed, and saved.

Captura de pantalla de la página de detalles del Laboratorio fotográfico.

Requisitos previosPrerequisites

Parte 0: Obtener el código de inicio de GitHubPart 0: Get the starter code from github

En este tutorial, empezaremos con una versión simplificada del ejemplo PhotoLab.For this tutorial, you'll start with a simplified version of the PhotoLab sample.

  1. Vaya a la página de GitHub que contiene el ejemplo: https://github.com/Microsoft/Windows-appsample-photo-lab.Go to the GitHub page for the sample: https://github.com/Microsoft/Windows-appsample-photo-lab.

  2. A continuación deberás clonar o descarga dicho ejemplo.Next, you'll need to clone or download the sample. Haz clic en el botón Clone or download.Click the Clone or download button. Aparecerá un submenú.A sub-menu appears. Menú Clone or download (Clonar o descargar) de la página de GitHub del ejemplo de PhotoLabThe Clone or download menu on the PhotoLab sample's GitHub page

    Si no conoces GitHub muy bien:If you're not familiar with GitHub:

    a.a. Haz clic en Download ZIP y guarda el archivo localmente.Click Download ZIP and save the file locally. Esto descargará un archivo .zip que contiene todos los archivos de proyecto que necesitas.This downloads a .zip file that contains all the project files you need.

    b.b. Extrae el archivo.Extract the file. Use el Explorador de archivos para buscar el archivo .zip que acaba de descargar, haga clic en este con el botón derecho y seleccione Extraer todo.Use File Explorer to browse to the .zip file you just downloaded, right-click it, and select Extract All....

    c.c. Busque la copia local del ejemplo y vaya al directorio Windows-appsample-photo-lab-master\xaml-basics-starting-points\adaptive-layout.Browse to your local copy of the sample and go the Windows-appsample-photo-lab-master\xaml-basics-starting-points\adaptive-layout directory.

    Si ya conoces GitHub:If you are familiar with GitHub:

    a.a. Clona la bifurcación principal del repositorio localmente.Clone the master branch of the repo locally.

    b.b. Dirígete al directorio Windows-appsample-photo-lab\xaml-basics-starting-points\adaptive-layout.Browse to the Windows-appsample-photo-lab\xaml-basics-starting-points\adaptive-layout directory.

  3. Haga doble clic en Photolab.sln para abrir la solución en Visual Studio.Double-click Photolab.sln to open the solution in Visual Studio.

Parte 1: Definir puntos de interrupción de ventanaPart 1: Define window breakpoints

Ejecute la aplicación.Run the app. Se ve correctamente a pantalla completa, pero la interfaz de usuario (UI) no es ideal cuando la ventana se reduce demasiado.It looks good at full screen, but the user interface (UI) isn't ideal when you shrink the window too small. Para asegurarse de que la experiencia del usuario final siempre sea satisfactoria, utilice la clase VisualStateManager para adaptar la interfaz de usuario a los distintos tamaños de ventana.You can ensure that the end-user experience always looks and feels right by using the VisualStateManager class to adapt the UI to different window sizes.

Ventana pequeña: antes

Para obtener más información sobre el diseño de la aplicación, consulte la sección Diseño de los documentos.For more info about app layout, see the Layout section of the docs.

Agregar puntos de interrupción de ventanaAdd window breakpoints

El primer paso es definir los puntos de interrupción en los que se aplicarán los distintos estados visuales.The first step is to define the breakpoints at which different visual states are applied. Consulte Tamaños de pantalla y puntos de interrupción para obtener más información acerca de los puntos de interrupción para pantallas pequeñas, medianas y grandes.See Screen sizes and breakpoints for more information about the breakpoints for small, medium, and large screens.

Abra el archivo App.xaml desde el Explorador de soluciones y agregue el siguiente código después de MergedDictionaries, justo antes de la etiqueta de cierre </ResourceDictionary>.Open App.xaml from the Solution Explorer, and add the following code after the MergedDictionaries, right before the closing </ResourceDictionary> tag.

    <!--  Window width adaptive breakpoints.  -->
    <x:Double x:Key="MinWindowBreakpoint">0</x:Double>
    <x:Double x:Key="MediumWindowBreakpoint">641</x:Double>
    <x:Double x:Key="LargeWindowBreakpoint">1008</x:Double>

Esta acción crea 3 puntos de interrupción, lo que permite crear nuevos estados visuales para 3 intervalos de tamaños de ventana:This creates 3 breakpoints, which lets you create new visual states for 3 ranges of window sizes:

  • Pequeño (0 - 640 píxeles de ancho)Small (0 - 640 pixels wide)
  • Medio (641 a 1007 píxeles de ancho)Medium (641 - 1007 pixels wide)
  • Grande (> 1007 píxeles de ancho)Large (> 1007 pixels wide)

En este ejemplo, se crea un nuevo aspecto solo para el tamaño de ventana pequeño.In this example, you create a new look only for the small window size. Los tamaños mediano y grande usan el mismo aspecto.The medium and large sizes use the same look.

Parte 2: Agregar una plantilla de datos para tamaños de ventana pequeñosPart 2: Add a data template for small window sizes

Para que esta aplicación tenga un aspecto correcto incluso en una ventana pequeña, puede crear una nueva plantilla de datos que optimice el modo en que se muestran las imágenes en la vista de la galería de imágenes cuando el usuario reduce la ventana.To make this app look good even when it's shown in a small window, you can create a new data template that optimizes how the images in the image gallery view are shown when the user shrinks the window.

Crear una nueva DataTemplateCreate a new DataTemplate

Abre MainPage.xaml desde el Explorador de soluciones y agrega el siguiente código dentro de las etiquetas Page.Resources.Open MainPage.xaml from the Solution Explorer, and add the following code within the Page.Resources tags.

<DataTemplate x:Key="ImageGridView_SmallItemTemplate"
              x:DataType="local:ImageFileInfo">

    <!-- Create image grid -->
    <Grid Height="{Binding ItemSize, ElementName=page}"
          Width="{Binding ItemSize, ElementName=page}">

        <!-- Place image in grid, stretching it to fill the pane-->
        <Image x:Name="ItemImage"
               Source="{x:Bind ImageSource, Mode=OneWay}"
               Stretch="UniformToFill">
        </Image>

    </Grid>
</DataTemplate>

Esta plantilla de galería ahorra espacio real en pantalla al eliminar el borde alrededor de imágenes y deshaciéndose de los metadatos de imagen (nombre de archivo, clasificaciones y demás) de debajo de cada miniatura.This gallery template saves screen real estate by eliminating the border around images, and getting rid of the image metadata (filename, ratings, and so on.) below each thumbnail. En su lugar, mostrará cada miniatura como un simple cuadrado.Instead, you show each thumbnail as a simple square.

Agregar metadatos a una información sobre herramientasAdd metadata to a tooltip

Aún seguirá queriendo que el usuario pueda acceder a los metadatos de cada imagen, por lo que debe agregar una información sobre herramientas a cada elemento de imagen.You still want the user to be able to access the metadata for each image, so add a tooltip to each image item. Agrega el siguiente código dentro de las etiquetas Image de la DataTemplate que acabas de crear.Add the following code within the Image tags of the DataTemplate you just created.

    <!-- Add a tooltip to the image that displays metadata -->
    <ToolTipService.ToolTip>
        <ToolTip x:Name="tooltip">

            <!-- Arrange tooltip elements vertically -->
            <StackPanel Orientation="Vertical"
                        Grid.Row="1">

                <!-- Image title -->
                <TextBlock Text="{x:Bind ImageTitle, Mode=OneWay}"
                           HorizontalAlignment="Center"
                           Style="{StaticResource SubtitleTextBlockStyle}" />

                <!-- Arrange elements horizontally -->
                <StackPanel Orientation="Horizontal"
                            HorizontalAlignment="Center">

                    <!-- Image file type -->
                    <TextBlock Text="{x:Bind ImageFileType}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource CaptionTextBlockStyle}" />

                    <!-- Image dimensions -->
                    <TextBlock Text="{x:Bind ImageDimensions}"
                               HorizontalAlignment="Center"
                               Style="{StaticResource CaptionTextBlockStyle}"
                               Margin="8,0,0,0" />
                </StackPanel>
            </StackPanel>
        </ToolTip>
    </ToolTipService.ToolTip>

Esto mostrará el título, tipo de archivo y dimensiones de una imagen cuando se coloque el ratón sobre la miniatura (o mantenga presionado en una pantalla táctil).This will show the title, file type, and dimensions of an image when you hover the mouse over the thumbnail (or press and hold on a touch screen).

3.ª parte: Definir estados visualesPart 3: Define visual states

Ahora ha creado un nuevo diseño para sus datos, pero la aplicación actualmente no tiene forma de saber cuándo usar este diseño en lugar de los estilos predeterminados.You've now created a new layout for your data, but the app currently has no way of knowing when to use this layout over the default styles. Para corregirlo, debe agregar una clase VisualStateManager y definiciones de VisualState.To fix this, you need to add a VisualStateManager and VisualState definitions.

Agregar una clase VisualStateManagerAdd a VisualStateManager

Agrega el siguiente código al elemento raíz de la página, RelativePanel.Add the following code to the root element of the page, RelativePanel.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
    ...

        <!-- Large window VisualState -->
        <VisualState>

        </VisualState>

        <!-- Medium window VisualState -->
        <VisualState>

        </VisualState>

        <!-- Small window VisualState -->
        <VisualState>

        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Crear objetos StateTriggers para aplicar el estado visualCreate StateTriggers to apply the visual state

A continuación, cree los objetos StateTriggers que se correspondan con cada punto de acoplamiento.Next, create the StateTriggers that correspond to each snap point. En MainPage.xaml, agregue el siguiente código a cada elemento VisualState.In MainPage.xaml, add the following code to each VisualState.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
    ...

        <!-- Large window VisualState -->
        <VisualState>

            <!-- Large window trigger -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource LargeWindowSnapPoint}"/>
            </VisualState.StateTriggers>

        </VisualState>

        <!-- Medium window VisualState -->
        <VisualState>

            <!-- Medium window trigger -->
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="{StaticResource MediumWindowSnapPoint}"/>
            </VisualState.StateTriggers>

        </VisualState>

        <!-- Small window VisualState -->
        <VisualState>

            <!-- Small window trigger -->
            <VisualState.StateTriggers >
                <AdaptiveTrigger MinWindowWidth="{StaticResource MinWindowSnapPoint}"/>
            </VisualState.StateTriggers>

        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Cuando se desencadene cada estado visual, la aplicación usará todos los atributos de diseño asignados al objeto VisualState activo.When each visual state is triggered, the app will use whatever layout attributes are assigned to the active VisualState.

Establecer propiedades para cada estado visualSet properties for each visual state

Por último, establezca las propiedades de cada estado visual para indicar a la clase VisualStateManager qué atributos se aplicarán cuando se desencadene el estado.Finally, set properties for each visual state to tell the VisualStateManager what attributes to apply when the state is triggered. Cada establecedor apunta a una propiedad de un elemento XAML determinado y lo establece al valor dado.Each setter targets one property of a particular XAML element and sets it to the given value. Agregue este código al estado visual SmallWindow que acaba de crear, después de StateTriggers.Add this code to the SmallWindow visual state you just created, after the StateTriggers.

    <!-- Small window setters -->
    <VisualState.Setters>

        <!-- Apply small template and styles -->
        <Setter Target="ImageGridView.ItemTemplate"
                Value="{StaticResource ImageGridView_SmallItemTemplate}" />
        <Setter Target="ImageGridView.ItemContainerStyle"
                Value="{StaticResource ImageGridView_SmallItemContainerStyle}" />

        <!-- Adjust the zoom slider to fit small windows-->
        <Setter Target="ZoomSlider.Minimum"
                Value="80" />
        <Setter Target="ZoomSlider.Maximum"
                Value="180" />
        <Setter Target="ZoomSlider.TickFrequency"
                Value="20" />
        <Setter Target="ZoomSlider.Value"
                Value="100" />
    </VisualState.Setters>

Estos establecedores definen el objeto ItemTemplate de la galería de imágenes en el nuevo objeto DataTemplate que creó en la sección anterior.These setters set the ItemTemplate of the image gallery to the new DataTemplate that you created in the previous section. También ajustan el control deslizante de zoom para una mejor adecuación a la pantalla pequeña.They also tweak the zoom slider to better fit the small screen.

Ejecución de la aplicaciónRun the app

Ejecute la aplicación.Run the app. Cuando se cargue la aplicación, intenta cambiar el tamaño de la ventana.When the app loads, try changing the size of the window. Si la ventana se reduce a un tamaño pequeño, verá cómo la aplicación cambia al diseño pequeño que creó en la segunda parte.When you shrink the window to a small size, you should see the app switch to the small layout you created in Part 2.

Ventana pequeña: después

Ir más alláGoing further

Ahora que has completado este laboratorio, tienes suficiente información de diseño adaptable para experimentar más por tu cuenta.Now that you've completed this lab, you have enough adaptive layout knowledge to experiment further on your own. Para enfrentarse a un desafío mayor, intente optimizar el diseño para tamaños de pantalla mayores, como Surface Hub.For a bigger challenge, try optimizing the layout for larger screen sizes, like Surface Hub. Consulte Probar aplicaciones de Surface Hub con Visual Studio si desea probar un diseño de Surface Hub.See Test Surface Hub apps using Visual Studio if you'd like to test a Surface Hub layout.

Si se queda bloqueado, puede encontrar más información en estas secciones del artículo Diseños dinámicos con XAML.If you get stuck, you can find more guidance in these sections of Responsive layouts with XAML.

Como alternativa, si quieres obtener más información sobre cómo se creó la aplicación inicial de edición de fotos, consulta estos tutoriales de XAML, interfaces de usuario y enlace de datos.Alternatively, if you want to learn more about how the initial photo editing app was built, check out these tutorials on XAML user interfaces and data binding.

Obtener la versión final del ejemplo de PhotoLabGet the final version of the PhotoLab sample

Este tutorial no crea la aplicación completa de edición de fotos, así que asegúrese de echar un vistazo a la versión final para ver otras funciones, como las animaciones personalizadas y los estilos.This tutorial doesn't build up to the complete photo editing app, so be sure to check out the final version to see other features such as custom animations and styles.