Tutorial: Criar layouts adaptáveisTutorial: Create adaptive layouts

Este tutorial aborda as noções básicas do uso de recursos de layout adaptável do XAML, que permitem criar aplicativos que ficam bons em qualquer tamanho.This tutorial covers the basics of using XAML's adaptive layout features, which let you create apps that look good at any size. Você aprenderá a adicionar pontos de interrupção de janela, criar um DataTemplate e usar a classe VisualStateManager para adaptar o layout do seu aplicativo.You'll learn how to add window breakpoints, create a new DataTemplate, and use the VisualStateManager class tailor your app's layout. Você usará essas ferramentas para otimizar um programa de edição de imagens para tamanhos de janelas menores.You'll use these tools to optimize an image editing program for smaller window sizes.

O programa de edição de imagem tem duas páginas.The image editing program has two pages. A página principal mostra uma exibição de galeria de fotos, juntamente com algumas informações sobre cada arquivo de imagem.The main page displays a photo gallery view, along with some information about each image file.

MainPage

A página de detalhes exibe uma única foto após ela ter sido selecionada.The details page displays a single photo after it has been selected. Um menu de edição de submenu permite que a foto seja alterada, renomeada e salva.A flyout editing menu allows the photo to be altered, renamed, and saved.

DetailPage

Pré-requisitosPrerequisites

Parte 0: obter o código inicial do githubPart 0: Get the starter code from github

Para este tutorial, você iniciará com uma versão simplificada da amostra do PhotoLab.For this tutorial, you'll start with a simplified version of the PhotoLab sample.

  1. Acesse a página do GitHub para ver a amostra: 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. Em seguida, você precisará clonar ou baixar a amostra.Next, you'll need to clone or download the sample. Clique no botão Clonar ou baixar.Click the Clone or download button. Um submenu será exibido.A sub-menu appears. O menu Clonar ou de download na página do GitHub da amostra do PhotoLabThe Clone or download menu on the PhotoLab sample's GitHub page

    Se você não estiver familiarizado com o GitHub:If you're not familiar with GitHub:

    a.a. Clique em Baixar ZIP e salve o arquivo localmente.Click Download ZIP and save the file locally. Isso baixa um arquivo .zip que contém todos os arquivos de projeto de que você precisa.This downloads a .zip file that contains all the project files you need.

    b.b. Extraia o arquivo.Extract the file. Use o Explorador de Arquivos para procurar o arquivo .zip recém-baixado, clique com o botão direito do mouse nele e selecione Extrair Tudo... .Use File Explorer to browse to the .zip file you just downloaded, right-click it, and select Extract All....

    c.c. Procure a cópia local do exemplo e acesse o diretório 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.

    Se você estiver familiarizado com o GitHub:If you are familiar with GitHub:

    a.a. Clone a ramificação mestre do repositório localmente.Clone the master branch of the repo locally.

    b.b. Navegue até o diretório 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. Clique duas vezes em Photolab.sln para abrir a solução no Visual Studio.Double-click Photolab.sln to open the solution in Visual Studio.

Parte 1: Definir pontos de interrupção de janelaPart 1: Define window breakpoints

Execute o aplicativo.Run the app. Ele fica bom em tela inteira, mas a interface do usuário não é ideal quando a janela é reduzida para um tamanho muito pequeno.It looks good at full screen, but the user interface (UI) isn't ideal when you shrink the window too small. Você pode garantir que a experiência do usuário final seja sempre satisfatória usando a classe VisualStateManager para adaptar a interface do usuário a diferentes tamanhos de janelas.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.

Janela pequena: antes

Para obter mais informações sobre o layout do aplicativo, confira a seção Layout da documentação.For more info about app layout, see the Layout section of the docs.

Adicionar pontos de interrupção de janelaAdd window breakpoints

A primeira etapa é definir os pontos de interrupção nos quais diferentes estados visuais são aplicados.The first step is to define the breakpoints at which different visual states are applied. Confira Tamanhos de tela e pontos de interrupção para obter mais informações sobre os pontos de interrupção para telas pequenas, médias e grandes.See Screen sizes and breakpoints for more information about the breakpoints for small, medium, and large screens.

Abra App.xaml no Gerenciador de Soluções e adicione o código a seguir após MergedDictionaries, logo antes da marca </ResourceDictionary> de fechamento.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>

Isso criará três pontos de interrupção, que permitem criar estados visuais para três intervalos de tamanhos de janelas:This creates 3 breakpoints, which lets you create new visual states for 3 ranges of window sizes:

  • Pequeno (0 a 640 pixels de largura)Small (0 - 640 pixels wide)
  • Médio (641 a 1.007 pixels de largura)Medium (641 - 1007 pixels wide)
  • Grande (superior a 1.007 pixels de largura)Large (> 1007 pixels wide)

Neste exemplo, você criará uma aparência apenas para o tamanho de janela pequeno.In this example, you create a new look only for the small window size. Os tamanhos médio e grande usarão a mesma aparência.The medium and large sizes use the same look.

Parte 2: Adicionar um modelo de dados aos tamanhos de janela pequenosPart 2: Add a data template for small window sizes

Para fazer com que esse aplicativo tenha uma boa aparência mesmo quando ele for mostrado em uma janela pequena, crie um modelo de dados que otimize como as imagens na exibição da galeria de imagens são mostradas quando o usuário reduzir a janela.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.

Criar um novo DataTemplateCreate a new DataTemplate

Abra MainPage.xaml no Gerenciador de Soluções e adicione o seguinte código às marcas 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>

Esse modelo de galeria economiza espaço na tela, eliminando a borda em torno das imagens e livrando-se dos metadados de imagem (nome de arquivo, classificações etc.) abaixo 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. Em vez disso, você mostrará cada miniatura como um quadrado simples.Instead, you show each thumbnail as a simple square.

Adicionar metadados a uma dica de ferramentaAdd metadata to a tooltip

Você ainda deseja que o usuário consiga acessar os metadados de cada imagem; portanto, adicione uma dica de ferramenta a cada item de imagem.You still want the user to be able to access the metadata for each image, so add a tooltip to each image item. Adicione o seguinte código às tags Image do DataTemplate que você acabou de criar.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>

Isso mostrará o título, o tipo de arquivo e as dimensões de uma imagem quando você passar o mouse sobre a miniatura (ou mantiver pressionado o cursor em uma tela sensível ao toque).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).

Parte 3: Definir os estados visuaisPart 3: Define visual states

Você acabou de criar um layout para os seus dados, mas, atualmente, o aplicativo não tem como saber quando usá-lo em detrimento dos estilos padrão.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 corrigir isso, você precisará adicionar definições de VisualStateManager e VisualState.To fix this, you need to add a VisualStateManager and VisualState definitions.

Adicionar um VisualStateManagerAdd a VisualStateManager

Adicione o código a seguir ao elemento raiz da página RelativePanel.Add the following code to the root element of the page, RelativePanel.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
    ...

        <!-- Large window VisualState -->
        <VisualState x:Key="LargeWindow">

        </VisualState>

        <!-- Medium window VisualState -->
        <VisualState x:Key="MediumWindow">

        </VisualState>

        <!-- Small window VisualState -->
        <VisualState x:Key="SmallWindow">

        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Criar StateTriggers para aplicar o estado visualCreate StateTriggers to apply the visual state

Em seguida, crie os StateTriggers que correspondem a cada ponto de alinhamento.Next, create the StateTriggers that correspond to each snap point. No MainPage.xaml, adicione o código a seguir ao VisualStateManager criado na Parte 2.In MainPage.xaml, add the following code to the VisualStateManager that you created in Part 2.

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
    ...

        <!-- Large window VisualState -->
        <VisualState x:Key="LargeWindow">

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

        </VisualState>

        <!-- Medium window VisualState -->
        <VisualState x:Key="MediumWindow">

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

        </VisualState>

        <!-- Small window VisualState -->
        <VisualState x:Key="SmallWindow">

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

        </VisualState>

    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>

Quando cada estado visual for disparado, o aplicativo usará os atributos de layout atribuídos ao VisualState ativo.When each visual state is triggered, the app will use whatever layout attributes are assigned to the active VisualState.

Definir as propriedades de cada estado visualSet properties for each visual state

Por fim, defina as propriedades de cada estado visual para instruir o VisualStateManager sobre quais atributos deverão ser aplicados quando o estado for disparado.Finally, set properties for each visual state to tell the VisualStateManager what attributes to apply when the state is triggered. Cada setter destina-se a uma propriedade de um elemento XAML e a define como o valor fornecido.Each setter targets one property of a particular XAML element and sets it to the given value. Adicione este código ao estado visual de SmallWindow recém-criado, após os 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>

Esses setters definem o ItemTemplate da galeria de imagens como o novo DataTemplate criado na seção anterior.These setters set the ItemTemplate of the image gallery to the new DataTemplate that you created in the previous section. Eles também ajustam o controle deslizante de zoom para que se adaptem da melhor maneira à tela pequena.They also tweak the zoom slider to better fit the small screen.

Executar o aplicativoRun the app

Execute o aplicativo.Run the app. Quando o aplicativo for carregado, tente alterar o tamanho da janela.When the app loads, try changing the size of the window. Quando você reduzir a janela para um tamanho pequeno, verá o aplicativo alternar para o layout pequeno criado na Parte 2.When you shrink the window to a small size, you should see the app switch to the small layout you created in Part 2.

Janela pequena: depois

AprofundamentoGoing further

Agora que você concluiu este laboratório, tem conhecimento suficiente sobre layout adaptável para fazer novas experiências por conta própria.Now that you've completed this lab, you have enough adaptive layout knowledge to experiment further on your own. Para um desafio maior, tente otimizar o layout para tamanhos de tela maiores, como o Surface Hub.For a bigger challenge, try optimizing the layout for larger screen sizes, like Surface Hub. Confira Testar aplicativos Surface Hub usando o Visual Studio caso deseje testar um layout do Surface Hub.See Test Surface Hub apps using Visual Studio if you'd like to test a Surface Hub layout.

Se você não conseguir mais avançar, busque mais orientações nestas seções de Definir layouts de página com o XAML.If you get stuck, you can find more guidance in these sections of Define page layouts with XAML.

Como alternativa, se você quiser saber mais sobre como o aplicativo inicial de edição de fotos foi criado, confira estes tutoriais sobre interfaces do usuário XAML e associação de dados.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.

Obtenha a versão final da amostra do PhotoLabGet the final version of the PhotoLab sample

Este tutorial não é compilado para o aplicativo de edição de fotos completo. Portanto, confira a versão final para ver outros recursos, como animações personalizadas e 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.