Visualizzazione a due riquadriTwo-pane view

TwoPaneView è un controllo di layout che ti permette di gestire la visualizzazione delle app che hanno due aree di contenuto separate, ad esempio una visualizzazione master/dettagli.TwoPaneView is a layout control that helps you manage the display of apps that have 2 distinct areas of content, like a master/detail view.

Importante

Questo articolo descrive le funzionalità e il materiale sussidiario disponibili nell'anteprima pubblica, che potrebbero tuttavia subire modifiche sostanziali prima del rilascio della versione disponibile a livello generale.This article describes functionality and guidance that is in public preview and may be substantially modified before it's generally available. Microsoft non riconosce alcuna garanzia, espressa o implicita, in merito alle informazioni qui fornite.Microsoft makes no warranties, express or implied, with respect to the information provided here.

Anche se funziona in tutti i dispositivi Windows, il controllo TwoPaneView è progettato per consentirti di sfruttare al massimo i dispositivi a doppio schermo, senza dover scrivere codice speciale.While it works on all Windows devices, the TwoPaneView control is designed to help you take full advantage of dual-screen devices automatically, with no special coding needed. In un dispositivo a doppio schermo la visualizzazione a due riquadri assicura che l'interfaccia utente venga divisa correttamente quando attraversa lo spazio vuoto tra le schermate, in modo che il contenuto sia visualizzato su entrambi i lati.On a dual-screen device, the two-pane view ensures that the user interface (UI) is split cleanly when it spans the gap between screens, so that your content is presented on either side of the gap.

Nota

un dispositivo a doppio schermo è un dispositivo di tipo speciale con funzionalità esclusive.A dual-screen device is a special kind of device with unique capabilities. Non equivale a un dispositivo desktop con più monitor.It's not equivalent to a desktop device with multiple monitors. Per altre informazioni sui dispositivi a doppio schermo, vedi Introduzione ai dispositivi a doppio schermo.For more info about dual-screen devices, see Introduction to dual-screen devices. Per altre informazioni su come ottimizzare un'app per più monitor, vedi Mostrare più visualizzazioni.(See Show multiple views for more info about ways you can optimize your app for multiple monitors.)

Ottenere la libreria dell'interfaccia utente di WindowsGet the Windows UI Library

Logo WinUI

Il controllo TwoPaneView è incluso come parte della libreria dell'interfaccia utente di Windows, un pacchetto NuGet che contiene nuovi controlli e nuove funzionalità dell'interfaccia utente per le app di Windows.The TwoPaneView control is included as part of the Windows UI Library, a NuGet package that contains new controls and UI features for Windows apps. Per altre informazioni, incluse le istruzioni per l'installazione, vedi Libreria dell'interfaccia utente di Windows.For more info, including installation instructions, see Windows UI Library.

API della libreria dell'interfaccia utente di Windows: Classe TwoPaneViewWindows UI Library APIs: TwoPaneView class

Suggerimento

In tutto questo documento useremo l'alias muxc in XAML per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto.Throughout this document, we use the muxc alias in XAML to represent the Windows UI Library APIs that we have included in our project. Abbiamo aggiunto questo alias all'elemento Page: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"We have added this to our Page element: xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

Anche nel code-behind useremo l'alias muxc in C# per rappresentare le API della libreria dell'interfaccia utente di Windows incluse nel progetto.In the code-behind, we also use the muxc alias in C# to represent the Windows UI Library APIs that we have included in our project. Abbiamo aggiunto questa istruzione using all'inizio del file: using muxc = Microsoft.UI.Xaml.Controls;We have added this using statement at the top of the file: using muxc = Microsoft.UI.Xaml.Controls;

È il controllo giusto?Is this the right control?

Usa la visualizzazione a due riquadri quando sono presenti due aree di contenuto separate e:Use the two-pane view when you have 2 distinct areas of content and:

  • Il contenuto deve essere riorganizzato e ridimensionato automaticamente in modo da adattarsi alla finestra in modo ottimale.The content should automatically rearrange and resize to best fit the window.
  • L'area secondaria del contenuto deve essere visualizzata/nascosta in base allo spazio disponibile.The secondary area of content should show/hide based on available space.
  • Il contenuto deve essere diviso correttamente tra le due schermate di un dispositivo a doppio schermo.The content should split cleanly between the 2 screens of a dual-screen device.

EsempiExamples

Le immagini seguenti mostrano un'app in esecuzione su uno schermo singolo ed estesa su un doppio schermo.These images show an app running on a single-screen and spanned across dual-screens. La visualizzazione a due riquadri adatta l'interfaccia utente dell'app alle varie configurazioni dello schermo.The two-pane view adapts the app UI to the various screen configurations.

App con visualizzazione a due riquadri su uno schermo singolo

App su uno schermo singolo.App on a single-screen.

App con visualizzazione a due riquadri su doppio schermo in modalità Wide

App che si estende in un dispositivo a doppio schermo in modalità WideApp spanning a dual-screen device in wide mode.

App con visualizzazione a due riquadri su doppio schermo in modalità Tall

App che si estende in un dispositivo a doppio schermo in modalità TallApp spanning a dual-screen device in tall mode.

Come funzionaHow it works

La visualizzazione a due riquadri offre due riquadri in cui inserire il contenuto.The two-pane view has two panes where you place your content. Le dimensioni e la disposizione dei riquadri vengono regolate in base allo spazio disponibile per la finestra.It adjusts the size and arrangement of the panes depending on the space available to the window. I possibili layout dei riquadri sono definiti dall'enumerazione TwoPaneViewMode:The possible pane layouts are defined by the TwoPaneViewMode enumeration:

Valore enumEnum value DescriptionDescription
SinglePane Viene visualizzato un solo riquadro, come specificato nella proprietà PanePriority.Only one pane is shown, as specified by the PanePriority property.
Wide Vengono visualizzati riquadri affiancati oppure viene visualizzato un solo riquadro, in base a quanto specificato nella proprietà WideModeConfiguration.Panes are shown side-by-side, or a single pane is shown, as specified by the WideModeConfiguration property.
Tall Vengono visualizzati riquadri disposti dall'alto verso il basso oppure viene visualizzato un solo riquadro, in base a quanto specificato nella proprietà TallModeConfiguration.Panes are shown top-bottom, or a single pane is shown, as specified by the TallModeConfiguration property.

Per configurare la visualizzazione a due riquadri, imposta PanePriority specificando quale riquadro visualizzare quando lo spazio è sufficiente per un solo riquadro.You configure the two-pane view by setting the PanePriority to specify which pane is shown when there is space for only one pane. Specifica quindi se Pane1 deve essere visualizzato nella parte superiore o inferiore per le finestre estese in altezza oppure a sinistra o a destra per le finestre estese in larghezza.Then, you specify whether Pane1 is shown on the top or bottom for tall windows, or on the left or right for wide windows.

La visualizzazione a due riquadri gestisce le dimensioni e la disposizione dei riquadri, ma è comunque necessario adattare il contenuto all'interno del riquadro alle modifiche delle dimensioni e dell'orientamento.The two-pane view handles the size and arrangement of the panes, but you still need to make the content inside the pane adapt to the changes in size and orientation. Per altre informazioni sulla creazione di un'interfaccia utente adattiva, vedi Layout reattivi con XAML e Pannelli di layout.See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

La classe TwoPaneView gestisce la visualizzazione dei riquadri in base allo stato di estensione dell'app.The TwoPaneView manages the display of the panes based on the spanning state of the app.

  • Su uno schermo singoloOn a single-screen

    Quando l'app si trova su uno schermo singolo, TwoPaneView regola le dimensioni e la posizione dei riquadri in base alle impostazioni delle proprietà specificate.When your app is on only a single screen, the TwoPaneView adjusts the size and position of its panes based on property settings you specify. Illustreremo queste proprietà in modo più dettagliato nella sezione successiva.We explain these properties in more detail in the next section. L'unica differenza tra i dispositivi è che alcuni di questi, ad esempio i computer desktop, consentono l'uso di finestre ridimensionabili, mentre altri no.The only difference between devices is that some devices, like desktop PCs, allow re-sizable windows, while other devices don't.

  • Con estensione su doppio schermoSpanned across dual-screens

    TwoPaneView è progettato per facilitare l'ottimizzazione dell'interfaccia utente per l'estensione su dispositivi a doppio schermo.The TwoPaneView is designed to make it easy to optimize your UI for spanning on dual-screen devices. La finestra si ridimensiona in modo da usare tutto lo spazio disponibile sugli schermi.The window sizes itself to use all the available space on the screens. Se la tua app si estende su entrambi gli schermi del dispositivo a doppio schermo, in ogni schermata viene visualizzato il contenuto di uno dei riquadri e tale contenuto attraversa correttamente lo spazio vuoto.When your app spans both screens of a dual-screen device, each screen displays the content of one of the panes and properly spans content across the gap. La capacità di estensione è predefinita nella visualizzazione a due riquadri.Spanning-awareness is built-in when you use two-pane view. Devi solo impostare la configurazione in altezza o in larghezza per specificare il riquadro da visualizzare nella schermata.You only need to set the tall/wide configuration to specify which pane is shown on which screen. La visualizzazione a due riquadri si occupa del resto.The two-pane view takes care of the rest.

Come usare il controllo di visualizzazione a due riquadriHow to use the two-pane view control

Il controllo TwoPaneView non deve necessariamente essere l'elemento radice del layout di pagina.The TwoPaneView doesn't have to be the root element of your page layout. In realtà, lo userai spesso all'interno di un controllo NavigationView per assicurare la navigazione generale dell'app.In fact, you'll often use it inside a NavigationView control that provides the overall navigation for your app. TwoPaneView ha un'ottima capacità di adattamento indipendentemente dalla posizione in cui si trova nell'albero XAML. Tuttavia, consigliamo di non annidare TwoPaneView all'interno di un altro controllo TwoPaneView.The TwoPaneView adapts appropriately regardless of where it is in the XAML tree; however, we do recommend that you not nest a TwoPaneView inside another TwoPaneView. Se esegui questa operazione, solo il controllo TwoPaneView esterno sarà in grado di estendersi.(If you do, only the outer TwoPaneView is spanning-aware.)

Aggiungere contenuto ai riquadriAdd content to the panes

Ogni riquadro di una visualizzazione a due riquadri può includere un solo UIElement XAML.Each pane of a two-pane view can hold a single XAML UIElement. Per aggiungere contenuto, puoi in genere inserire un pannello di layout XAML in ogni riquadro e quindi aggiungere al pannello altri controlli e contenuto.To add content, you typically place a XAML layout panel in each pane, and then add other controls and content to the panel. I riquadri possono subire modifiche delle dimensioni e passare dalla modalità Wide alla modalità Tall e viceversa. Devi quindi assicurarti che il contenuto di ogni riquadro possa adattarsi a queste modifiche.The panes can change size and switch between wide and tall modes, so you need to make sure the content in each pane can adapt to these changes. Per altre informazioni sulla creazione di un'interfaccia utente adattiva, vedi Layout reattivi con XAML e Pannelli di layout.See Responsive layouts with XAML and Layout panels for more info about creating an adaptive UI.

In questo esempio viene creata l'interfaccia utente dell'app semplice per la visualizzazione di immagini e informazioni precedentemente illustrata nella sezione Esempi.This example creates the the simple picture/info app UI shown previously in the Examples section. Quando l'app si estende su un doppio schermo, l'immagine e le informazioni vengono visualizzate su schermi separati.When the app is spanned across dual-screens, the picture and the info are shown on separate screens. Su uno schermo singolo il contenuto può essere visualizzato in due riquadri o combinato in un unico riquadro, a seconda della quantità di spazio disponibile.On a single screen, the content can be shown in two panes, or combined into a single pane, depending on how much space is available. Se è disponibile spazio sufficiente per un solo riquadro, sposta il contenuto di Pane2 in Pane1 e consenti all'utente di scorrere la schermata per visualizzare l'eventuale contenuto nascosto.(When there's only space for one pane, you move the content of Pane2 into Pane1, and let the user scroll to see any hidden content. Potrai trovare il codice necessario per questa operazione più avanti nella sezione Risposta alle modifiche della modalità.You'll see the code for this later in the Responding to mode changes section.)

Immagine piccola dell'app di esempio estesa su doppio schermo

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" MinHeight="40"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <CommandBar DefaultLabelPosition="Right">
        <AppBarButton x:Name="Share" Icon="Share" Label="Share" Click="Share_Click"/>
        <AppBarButton x:Name="Print" Icon="Print" Label="Print" Click="Print_Click"/>
    </CommandBar>

    <muxc:TwoPaneView
        x:Name="MyTwoPaneView"
        Grid.Row="1"
        MinWideModeWidth="959"
        MinTallModeHeight="863"
        ModeChanged="TwoPaneView_ModeChanged">

        <muxc:TwoPaneView.Pane1>
            <Grid x:Name="Pane1Root">
                <ScrollViewer>
                    <StackPanel x:Name="Pane1StackPanel">
                        <Image Source="Assets\LandscapeImage8.jpg"
                               VerticalAlignment="Top" HorizontalAlignment="Center"
                               Margin="16,0"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </muxc:TwoPaneView.Pane1>

        <muxc:TwoPaneView.Pane2>
            <Grid x:Name="Pane2Root">
                <ScrollViewer x:Name="DetailsContent">
                    <StackPanel Padding="16">
                        <TextBlock Text="Mountain.jpg" MaxLines="1"
                                       Style="{ThemeResource HeaderTextBlockStyle}"/>
                        <TextBlock Text="Date Taken:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="8/29/2019 9:55am"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Dimensions:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="800x536"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Resolution:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="96 dpi"
                                       Style="{ThemeResource SubtitleTextBlockStyle}"/>
                        <TextBlock Text="Description:"
                                       Style="{ThemeResource SubheaderTextBlockStyle}"
                                       Margin="0,24,0,0"/>
                        <TextBlock Text="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna."
                                       Style="{ThemeResource SubtitleTextBlockStyle}"
                                       TextWrapping="Wrap"/>
                    </StackPanel>
                </ScrollViewer>
            </Grid>
        </muxc:TwoPaneView.Pane2>
    </muxc:TwoPaneView>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TwoPaneViewStates">
            <VisualState x:Name="Normal"/>
            <VisualState x:Name="Wide">
                <VisualState.Setters>
                    <Setter Target="MyTwoPaneView.Pane1Length"
                            Value="2*"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>
</Grid>

Specificare il riquadro da visualizzareSpecify which pane to display

Quando è in grado di visualizzare un solo riquadro, la visualizzazione a due riquadri usa la proprietà PanePriority per stabilire quale riquadro visualizzare.When the two-pane view can only display a single pane, it uses the PanePriority property to determine which pane to display. Per impostazione predefinita, PanePriority è impostato su Pane1.By default, PanePriority is set to Pane1. Ecco come impostare questa proprietà in XAML o nel codice.Here's how you can set this property in XAML or in code.

<muxc:TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">
MyTwoPaneView.PanePriority = Microsoft.UI.Xaml.Controls.TwoPaneViewPriority.Pane2;

Ridimensionamento dei riquadriPane sizing

Su uno schermo singolo le dimensioni dei riquadri sono determinate dalle proprietà Pane1Length e Pane2Length,On a single screen, the size of the panes is determined by the Pane1Length and Pane2Length properties. che usano i valori di GridLength per supportare il ridimensionamento automatico e proporzionale (*).These use GridLength values that support auto and star(*) sizing. Per informazioni sul ridimensionamento automatico e proporzionale, vedi la sezione Proprietà di layout di Layout reattivi con XAML.See the Layout properties section of Responsive layouts with XAML for an explanation of auto and star sizing.

Per impostazione predefinita, Pane1Length è impostato su Auto e si ridimensiona in modo da adattarsi al relativo contenuto.By default, Pane1Length is set to Auto and it sizes itself to fit its content. Pane2Length è impostato su * e usa tutto lo spazio rimanente.Pane2Length is set to * and it uses all the remaining space.

Visualizzazione a due riquadri con riquadri impostati su dimensioni predefinite

Riquadri con ridimensionamento predefinitoPanes with default sizing

I valori predefiniti sono utili per un layout master/dettagli tipico, con un elenco di elementi in Pane1 e molti dettagli in Pane2.The default values are useful for a typical master/detail layout, where you have a list of items in Pane1, and a lot of details in Pane2. Tuttavia, a seconda del contenuto, potresti scegliere di dividere lo spazio in modo diverso.However, depending on your content, you might prefer to divide the space differently. In questo caso, Pane1Length è impostato su 2* in modo da avere una quantità di spazio doppia rispetto a Pane2.Here, Pane1Length is set to 2* so it gets twice as much space as Pane2.

<muxc:TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">

Visualizzazione a due riquadri con il riquadro 1 che usa due terzi dello schermo e il riquadro 2 che ne usa un terzo

Riquadri con dimensioni 2* e *Panes sized 2* and *

Nota

Come indicato in precedenza, quando l'app si estende su un doppio schermo, queste proprietà vengono ignorate e ogni riquadro riempie uno degli schermi.As mentioned previously, when the app is spanned across dual-screens, these properties are ignored and each pane fills one of the screens.

Se imposti un riquadro in modo venga usato il ridimensionamento automatico, puoi controllare le dimensioni impostando l'altezza e la larghezza del pannello che include il contenuto del riquadro.If you set a pane to use auto sizing, you can control the size by setting the height and width of the Panel that holds the pane's content. In questo caso, potrebbe essere necessario gestire l'evento ModeChanged e impostare i vincoli di altezza e larghezza del contenuto nel modo appropriato per la modalità corrente.In this case, you might need to handle the ModeChanged event and set the height and width constraints of the content as appropriate for the current mode.

Visualizzare in modalità Wide o TallDisplay in wide or tall mode

In uno schermo singolo il controllo Mode della visualizzazione a due riquadri è determinato dalle proprietà MinWideModeWidth e MinTallModeHeight.On a single screen, the two-pane view's display Mode is determined by the MinWideModeWidth and MinTallModeHeight properties. Il valore predefinito di entrambe le proprietà è 641px, uguale a quello di NavigationView.CompactThresholdWidth.Both properties have a default value of 641px, the same as NavigationView.CompactThresholdWidth.

Questa tabella illustra come l'altezza e la larghezza di TwoPaneView determinano la modalità di visualizzazione usata.This table shows how the Height and Width of the TwoPaneView determine which display mode is used.

Condizione di TwoPaneViewTwoPaneView condition ModalitàMode
Width > MinWideModeWidth Viene usata la modalità WideWide mode is used
Width <= MinWideModeWidth e Height > MinTallModeHeightWidth <= MinWideModeWidth, and Height > MinTallModeHeight Viene usata la modalità TallTall mode is used
Width <= MinWideModeWidth e Height <= MinTallModeHeightWidth <= MinWideModeWidth, and Height <= MinTallModeHeight Viene usata la modalità SinglePaneSinglePane mode is used

Nota

Come indicato in precedenza, quando l'app si estende su un doppio schermo, queste proprietà vengono ignorate e la modalità di visualizzazione è determinata in base al comportamento del dispositivo.As mentioned previously, when the app is spanned across dual-screens, these properties are ignored and display mode is determined based on the device posture.

Opzioni di configurazione in modalità WideWide configuration options

La visualizzazione a due riquadri entra in modalità Wide quando è presente un unico display più largo del valore definito nella proprietà MinWideModeWidth.The two-pane view enters Wide mode when there's a single display that's wider than the MinWideModeWidth property. MinWideModeWidth controlla quando la visualizzazione a due riquadri entra in modalità Wide.MinWideModeWidth controls when the two-pane view enters wide mode. Il valore predefinito è 641px, che puoi sostituire con qualsiasi altro valore.The default value is 641px, but you can change it to whatever you want. In generale, devi impostare questa proprietà su quella che vuoi che sia la larghezza minima del riquadro.In general, you should set this property to whatever you want the minimum width of your pane to be.

Quando la visualizzazione a due riquadri è in modalità Wide, la proprietà WideModeConfiguration determina gli elementi da visualizzare:When the two-pane view is in wide mode, the WideModeConfiguration property determines what to show:

Valore enumEnum value DescriptionDescription
SinglePane Un unico riquadro, come determinato da PanePriority.A single pane (as determined by PanePriority). Il riquadro acquisisce le dimensioni massime di TwoPaneView, ad esempio viene ridimensionato in modo proporzionale in entrambe le direzioni.The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
LeftRight Pane1 a sinistra/Pane2 a destra.Pane1 on the left/Pane2 on the right. Entrambi i riquadri vengono ridimensionati in modo proporzionale verticalmente, la larghezza di Pane1 viene ridimensionata automaticamente e la larghezza di Pane2 viene ridimensionata in modo proporzionale.Both panes are star sized vertically, Pane1's width is autosized, and Pane2's width is star sized.
RightLeft Pane1 a destra/Pane2 a sinistra.Pane1 on the right/Pane2 on the left. Entrambi i riquadri vengono ridimensionati in modo proporzionale verticalmente, la larghezza di Pane2 viene ridimensionata automaticamente e la larghezza di Pane1 viene ridimensionata in modo proporzionale.Both panes are star sized vertically, Pane2's width is autosized, and Pane1's width is star sized.

L'impostazione predefinita è LeftRight.The default setting is LeftRight.

LeftRightLeftRight RightLeftRightLeft
Visualizzazione a due riquadri configurata da sinistra a destra Visualizzazione a due riquadri configurata da destra a sinistra

SUGGERIMENTO: se il dispositivo usa una lingua da destra a sinistra (RTL), la visualizzazione a due riquadri inverte automaticamente l'ordine: il rendering di RightLeft viene eseguito come LeftRight e quello di LeftRight come RightLeft.TIP: When the device uses a right-to-left (RTL) language, the two-pane view automatically swaps the order: RightLeft renders as LeftRight, and LeftRight renders as RightLeft.

Opzioni di configurazione in modalità TallTall configuration options

La visualizzazione a due riquadri entra in modalità Tall quando è presente un unico display più stretto del valore definito in MinWideModeWidth e più alto del valore definito in MinTallModeHeight.The two-pane view enters Tall mode when there's a single display that's narrower than MinWideModeWidth, and taller than MinTallModeHeight. Il valore predefinito è 641px, che puoi sostituire con qualsiasi altro valore.The default value is 641px, but you can change it to whatever you want. In generale, devi impostare questa proprietà su quella che vuoi che sia l'altezza minima del riquadro.In general, you should set this property to whatever you want the minimum height of your pane to be.

Quando la visualizzazione a due riquadri è in modalità Tall, la proprietà TallModeConfiguration determina gli elementi da visualizzare:When the two-pane view is in tall mode, the TallModeConfiguration property determines what to show:

Valore enumEnum value DescriptionDescription
SinglePane Un unico riquadro, come determinato da PanePriority.A single pane (as determined by PanePriority). Il riquadro acquisisce le dimensioni massime di TwoPaneView, ad esempio viene ridimensionato in modo proporzionale in entrambe le direzioni.The pane takes up the full size of the TwoPaneView (ie, it's star sized in both directions).
TopBottom Pane1 nella parte superiore/Pane2 nella parte inferiore.Pane1 on the top/Pane2 on the bottom. Entrambi i riquadri vengono ridimensionati in modo proporzionale orizzontalmente, l'altezza di Pane1 viene ridimensionata automaticamente e l'altezza di Pane2 viene ridimensionata in modo proporzionale.Both panes are star sized horizontally, Pane1's height is autosized, and Pane2's height is star sized.
BottomTop Pane1 nella parte inferiore/Pane2 nella parte superiore.Pane1 on the bottom/Pane2 on the top. Entrambi i riquadri vengono ridimensionati in modo proporzionale orizzontalmente, l'altezza di Pane2 viene ridimensionata automaticamente e l'altezza di Pane1 viene ridimensionata in modo proporzionale.Both panes are star sized horizontally, Pane2's height is autosized, and Pane1's height is star sized.

Il valore predefinito è TopBottom.The default is TopBottom.

TopBottomTopBottom BottomTopBottomTop
Visualizzazione a due riquadri configurata dall'alto verso il basso Visualizzazione a due riquadri configurata dal basso verso l'alto

Valori speciali per MinWideModeWidth e MinTallModeHeightSpecial values for MinWideModeWidth and MinTallModeHeight

Puoi usare la proprietà MinWideModeWidth per impedire che la visualizzazione a due riquadri entri in modalità Wide. Imposta semplicemente MinWideModeWidth su Double.PositiveInfinity.You can use the MinWideModeWidth property to prevent the two-pane view from entering Wide mode - just set MinWideModeWidth to Double.PositiveInfinity.

Se imposti MinTallModeHeight su Double.PositiveInfinity, alla visualizzazione a due riquadri viene impedito di entrare in modalità Tall.If you set MinTallModeHeight to Double.PositiveInfinity, it prevents the two-pane view from entering Tall mode.

Se imposti MinTallModeHeight su 0, alla visualizzazione a due riquadri viene impedito di entrare in modalità SinglePane.If you set MinTallModeHeight to 0, it prevents the two-pane view from entering SinglePane mode.

Risposta alle modifiche della modalitàResponding to mode changes

Per ottenere la modalità di visualizzazione corrente, puoi usare la proprietà Mode di sola lettura.You can use the read-only Mode property to get the current display mode. Ogni volta che la visualizzazione a due riquadri sostituisce il riquadro o i riquadri visualizzati, si verifica l'evento ModeChanged prima del rendering del contenuto aggiornato.Whenever the two-pane view changes which pane or panes it's displaying, the ModeChanged event occurs before it renders the updated content. Puoi gestire l'evento per rispondere alle modifiche della modalità di visualizzazione.You can handle the event to respond to changes in the display mode.

Suggerimento

L'evento ModeChanged non si verifica quando la pagina viene caricata per la prima volta. Il codice XAML predefinito deve pertanto rappresentare l'interfaccia utente nel modo in cui deve essere visualizzata al primo caricamento.The ModeChanged event does not occur when the page is initially loaded, so your default XAML should represent the UI as it should appear when first loaded.

Puoi usare questo evento, tra l'altro, per aggiornare l'interfaccia utente dell'app in modo che gli utenti possano visualizzare tutto il contenuto in modalità SinglePane.One way you can use this event is to update your app's UI so users can view all the content in SinglePane mode. Ad esempio, l'app di esempio ha un riquadro principale (l'immagine) e un riquadro contenente informazioni.For example, the example app has a primary pane (the image) and an info pane.

Immagine piccola dell'app di esempio estesa in modalità Tall

Modalità TallTall mode

Se è disponibile spazio sufficiente per un solo riquadro, puoi spostare il contenuto di Pane2 in Pane1, in modo che l'utente possa scorrere la schermata per visualizzare tutto il contenuto.When there's only enough space to display one pane, you can move the content of Pane2 into Pane1 so the user can scroll to see all the content. Avrà questo aspetto.It looks like this.

Immagine dell'app di esempio su uno schermo singolo in cui è possibile scorrere il contenuto in un unico riquadro

Modalità SinglePaneSinglePane mode

Ricorda che le proprietà MinWideModeWidth e MinTallModeHeight determinano la modifica della modalità di visualizzazione. Puoi pertanto modificare tale modalità quando il contenuto viene spostato da un riquadro all'altro regolando i valori di queste proprietà.Remember that the MinWideModeWidth and MinTallModeHeight properties determine when the display mode changes, so you can change when the content is moved between panes by adjusting the values of these properties.

Di seguito è riportato il codice del gestore dell'evento ModeChanged che sposta il contenuto da Pane1 a Pane2 e viceversa.Here's the ModeChanged event handler code that moves the content between Pane1 and Pane2. Imposta anche VisualState in modo da vincolare la larghezza dell'immagine in modalità Wide.It also sets a VisualState to constrain the width of the image in Wide mode.

private void TwoPaneView_ModeChanged(Microsoft.UI.Xaml.Controls.TwoPaneView sender, object args)
{
    // Remove details content from it's parent panel.
    ((Panel)DetailsContent.Parent).Children.Remove(DetailsContent);
    // Set Normal visual state.
    Windows.UI.Xaml.VisualStateManager.GoToState(this, "Normal", true);

    // Single pane
    if (sender.Mode == Microsoft.UI.Xaml.Controls.TwoPaneViewMode.SinglePane)
    {
        // Add the details content to Pane1.
        Pane1StackPanel.Children.Add(DetailsContent);
    }
    // Dual pane.
    else
    {
        // Put details content in Pane2.
        Pane2Root.Children.Add(DetailsContent);

        // If also in Wide mode, set Wide visual state
        // to constrain the width of the image to 2*.
        if (sender.Mode == Microsoft.UI.Xaml.Controls.TwoPaneViewMode.Wide)
        {
            Windows.UI.Xaml.VisualStateManager.GoToState(this, "Wide", true);
        }
    }
}

Cosa fare e cosa non fareDos and don'ts

  • Usa la visualizzazione a due riquadri ogni volta che ti è possibile, in modo che l'app possa sfruttare i vantaggi del doppio schermo e degli schermi di grandi dimensioni.Do use the two-pane view whenever you can so that your app can take advantage of dual-screens and large screens.
  • Non inserire una visualizzazione a due riquadri all'interno di un'altra visualizzazione a due riquadri.Don't put a two-pane view inside another two-pane view.