Esercitazione: Creare layout adattiviTutorial: Create adaptive layouts

Questa esercitazione fornisce le nozioni di base per l'uso delle funzionalità del layout adattivo ledi XAML, che consentono di creare app ottimali per qualsiasi dimensione.This tutorial covers the basics of using XAML's adaptive layout features, which let you create apps that look good at any size. Verrà illustrato come aggiungere i punti di interruzione della finestra, creare un nuovo DataTemplate e usare la classe VisualStateManager per personalizzare il layout dell'app.You'll learn how to add window breakpoints, create a new DataTemplate, and use the VisualStateManager class tailor your app's layout. Questi strumenti verranno usati per ottimizzare un programma di modifica delle immagini per finestre di dimensioni più piccole.You'll use these tools to optimize an image editing program for smaller window sizes.

Il programma di modifica delle immagini ha due pagine.The image editing program has two pages. La pagina principale mostra una visualizzazione della raccolta foto, insieme ad alcune informazioni su ogni file di immagine.The main page displays a photo gallery view, along with some information about each image file.

Screenshot della pagina principale di PhotoLab.

La pagina dei dettagli visualizza una singola foto dopo che è stata selezionata.The details page displays a single photo after it has been selected. Un menu di modifica a comparsa consente di modificare, rinominare e salvare la foto.A flyout editing menu allows the photo to be altered, renamed, and saved.

Screenshot della pagina dei dettagli di PhotoLab.

PrerequisitiPrerequisites

Parte 0: Scaricare il codice di avvio da GitHubPart 0: Get the starter code from github

Per questa esercitazione, inizierai con una versione semplificata dell'esempio PhotoLab.For this tutorial, you'll start with a simplified version of the PhotoLab sample.

  1. Passare alla pagina di GitHub relativa all'esempio: 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. Quindi dovrai clonare o scaricare l'esempio.Next, you'll need to clone or download the sample. Fai clic sul pulsante Clone or download (Clona o scarica).Click the Clone or download button. Viene visualizzato un sottomenu.A sub-menu appears. Menu Clone or download (Clona o scarica) nella pagina di GitHub relativa all'esempio PhotoLabThe Clone or download menu on the PhotoLab sample's GitHub page

    Se non hai familiarità con GitHub:If you're not familiar with GitHub:

    a.a. Fai clic su Download ZIP (Scarica ZIP) e salva il file in locale.Click Download ZIP and save the file locally. Viene scaricato un file ZIP che contiene tutti i file di progetto necessari.This downloads a .zip file that contains all the project files you need.

    b.b. Estrai il file.Extract the file. Usare Esplora file per selezionare il file con estensione zip appena scaricato, fare clic sul file con il pulsante destro del mouse e scegliere Estrai tutto.Use File Explorer to browse to the .zip file you just downloaded, right-click it, and select Extract All....

    c.c. Selezionare la copia locale dell'esempio e passare alla directory 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 conosci già GitHub:If you are familiar with GitHub:

    a.a. Clona il ramo master del repository in locale.Clone the master branch of the repo locally.

    b.b. Passa alla directory 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. Fare doppio clic su Photolab.sln per aprire la soluzione in Visual Studio.Double-click Photolab.sln to open the solution in Visual Studio.

Parte 1: Definire i punti di interruzione della finestraPart 1: Define window breakpoints

Eseguire l'app.Run the app. La visualizzazione è nitida a schermo intero, ma l'interfaccia utente non appare ottimale quando si riducono le dimensioni della finestra.It looks good at full screen, but the user interface (UI) isn't ideal when you shrink the window too small. È possibile verificare che l'esperienza dell'utente finale sia sempre ottimale usando la classe VisualStateManager per adattare l'interfaccia utente a finestre di diverse dimensioni.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.

Finestra piccola: prima

Per altre informazioni sul layout delle app, vedere la sezione Layout della documentazione.For more info about app layout, see the Layout section of the docs.

Aggiungere i punti di interruzione della finestraAdd window breakpoints

Il primo passaggio consiste nel definire i punti di interruzione in corrispondenza dei quali vengono applicati stati di visualizzazione diversi.The first step is to define the breakpoints at which different visual states are applied. Per altre informazioni sui punti di interruzione per schermi di piccole, medie e grandi dimensioni, vedere Dimensioni dello schermo e punti di interruzione.See Screen sizes and breakpoints for more information about the breakpoints for small, medium, and large screens.

Aprire App.xaml in Esplora soluzioni e aggiungere il codice seguente dopo MergedDictionaries, prima del tag </ResourceDictionary> di chiusura.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>

In questo modo vengono creati tre punti di interruzione, che consentono di creare nuovi stati di visualizzazione per tre intervalli di dimensioni della finestra:This creates 3 breakpoints, which lets you create new visual states for 3 ranges of window sizes:

  • Piccola (0 - 640 pixel)Small (0 - 640 pixels wide)
  • Media (641 - 1007 pixel)Medium (641 - 1007 pixels wide)
  • Grande (oltre 1007 pixel)Large (> 1007 pixels wide)

In questo esempio viene creato un nuovo aspetto solo per la finestra di piccole dimensioni.In this example, you create a new look only for the small window size. Le dimensioni medie e grandi usano lo stesso aspetto.The medium and large sizes use the same look.

Parte 2: Aggiungere un modello di dati per le finestre di piccole dimensioniPart 2: Add a data template for small window sizes

Per un aspetto ottimale dell'app anche quando viene visualizzata in una finestra di piccole dimensioni, è possibile creare un nuovo modello di dati per ottimizzare la modalità di visualizzazione delle immagini incluse nella raccolta immagini quando l'utente riduce le dimensioni della finestra.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.

Creare un nuovo elemento DataTemplateCreate a new DataTemplate

Apri MainPage.xaml in Esplora soluzioni e aggiungi il codice seguente all'interno dei tag 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>

Questo modello di raccolta consente di risparmiare spazio sullo schermo eliminando il bordo attorno alle immagini e i metadati dell'immagine (nome file, valutazioni e così via) sotto ogni anteprima.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. Ogni anteprima viene visualizzata come un quadrato semplice.Instead, you show each thumbnail as a simple square.

Aggiungere metadati a una descrizione comandoAdd metadata to a tooltip

Poiché è comunque opportuno che l'utente possa accedere ai metadati per ogni immagine, si aggiunge una descrizione comando per ogni elemento di immagine.You still want the user to be able to access the metadata for each image, so add a tooltip to each image item. Aggiungi il codice seguente all'interno dei tag Image dell'elemento DataTemplate appena creato.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>

In questo modo, quando passi il puntatore del mouse sull'anteprima (o tieni premuto su un touch screen), vedrai il titolo, il tipo di file e le dimensioni di un'immagine.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: Definire gli stati di visualizzazionePart 3: Define visual states

È stato ora creato un nuovo layout per i dati, ma l'app per il momento non ha la possibilità di sapere quando è necessario usare questo layout al posto degli stili predefiniti.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. Per risolvere questo problema, è necessario aggiungere un oggetto VisualStateManager e le definizioni di VisualState.To fix this, you need to add a VisualStateManager and VisualState definitions.

Aggiungere un oggetto VisualStateManagerAdd a VisualStateManager

Aggiungi il codice seguente all'elemento radice della pagina, 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>

Creare StateTriggers per applicare lo stato di visualizzazioneCreate StateTriggers to apply the visual state

Successivamente, creare gli elementi StateTriggers che corrispondono a ogni punto di ancoraggio.Next, create the StateTriggers that correspond to each snap point. In MainPage.xaml aggiungere il codice seguente a ogni oggetto 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>

Quando viene attivato ogni stato di visualizzazione, l'app userà qualsiasi attributo di layout assegnato a VisualState attivo.When each visual state is triggered, the app will use whatever layout attributes are assigned to the active VisualState.

Impostare le proprietà per ogni stato di visualizzazioneSet properties for each visual state

Infine, impostare le proprietà per ogni stato di visualizzazione per indicare all'oggetto VisualStateManager quali attributi applicare quando viene attivato lo stato.Finally, set properties for each visual state to tell the VisualStateManager what attributes to apply when the state is triggered. Ogni setter si riferisce a una proprietà di un particolare elemento XAML e la imposta sul valore specificato.Each setter targets one property of a particular XAML element and sets it to the given value. Aggiungere questo codice allo stato di visualizzazione SmallWindow appena creato, dopo l'elemento 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>

Questi setter impostano l'elemento ItemTemplate della raccolta di immagini sul nuovo elemento DataTemplate creato nella sezione precedente.These setters set the ItemTemplate of the image gallery to the new DataTemplate that you created in the previous section. Regolano anche il dispositivo di scorrimento dello zoom per adattarsi allo schermo piccolo.They also tweak the zoom slider to better fit the small screen.

Eseguire l'appRun the app

Eseguire l'app.Run the app. Quando l'app viene caricata, prova a modificare le dimensioni della finestra.When the app loads, try changing the size of the window. Quando le dimensioni della finestra vengono ridotte, si dovrebbe notare che l'app passa al layout piccolo creato nella 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.

Finestra piccola: dopo

ApprofondimentiGoing further

Ora che hai completato questa esercitazione, hai sufficienti informazioni sul layout adattivo per continuare a sperimentare autonomamente.Now that you've completed this lab, you have enough adaptive layout knowledge to experiment further on your own. Per una sfida ancor più impegnativa, provare a ottimizzare il layout per schermi di grandi dimensioni, ad esempio Surface Hub.For a bigger challenge, try optimizing the layout for larger screen sizes, like Surface Hub. Per testare un layout per Surface Hub, vedere Testare app di Surface Hub con Visual Studio.See Test Surface Hub apps using Visual Studio if you'd like to test a Surface Hub layout.

In caso di problemi che impediscono di continuare, sono disponibili altre indicazioni in queste sezioni di Layout reattivi con XAML.If you get stuck, you can find more guidance in these sections of Responsive layouts with XAML.

In alternativa, se vuoi altre informazioni su come è stata compilata l'app di modifica delle immagini iniziale, vedi queste esercitazioni sulle interfacce utente e sul data binding in XAML.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.

Ottenere la versione finale dell'esempio PhotoLabGet the final version of the PhotoLab sample

Questa esercitazione non consente di creare l'app di modifica delle immagini completa ed è quindi opportuno usare la versione finale per scoprire altre funzionalità come le animazioni personalizzate e gli stili.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.