Affichage à deux volets

L’affichage à deux volets est un contrôle de disposition qui vous permet de gérer l’affichage des applications qui ont 2 zones distinctes de contenu, comme une vue de liste/détail.

Est-ce le contrôle approprié ?

Utilisez l’affichage à deux volets lorsque vous avez deux zones de contenu distinctes, mais connexes et :

• Le contenu doit réorganiser et redimensionner automatiquement pour qu’il corresponde le mieux à la fenêtre.
• La zone secondaire du contenu doit afficher/masquer en fonction de l’espace disponible.

Si vous avez besoin d’afficher deux zones de contenu, mais que vous n’avez pas besoin du redimensionnement et de la réorganisation fournis par l’affichage à deux volets, envisagez plutôt d’utiliser une vue Fractionnée .

Pour les options de navigation, utilisez un affichage navigation.

Fonctionnement

L’affichage à deux volets comporte deux volets où vous placez votre contenu. Il ajuste la taille et la disposition des volets en fonction de l’espace disponible pour la fenêtre. Les dispositions de volet possibles sont définies par l’énumération TwoPaneViewMode :

Valeur d’enum	Descriptif
SinglePane	Un seul volet est affiché, comme spécifié par la propriété PanePriority .
Wide	Les volets sont affichés côte à côte ou un seul volet s’affiche, comme spécifié par la propriété WideModeConfiguration .
Tall	Les volets sont affichés en haut en bas ou un seul volet s’affiche, comme spécifié par la propriété TallModeConfiguration .

Application en mode large.

Application en mode grand.

Vous configurez l’affichage à deux volets en définissant PanePriority pour spécifier le volet qui s’affiche lorsqu’il n’y a qu’un seul volet. Ensuite, vous spécifiez s’il Pane1 est affiché en haut ou en bas pour les fenêtres hautes, ou à gauche ou à droite pour les fenêtres larges.

L’affichage à deux volets gère la taille et la disposition des volets, mais vous devez quand même adapter le contenu à l’intérieur du volet aux modifications de taille et d’orientation. Pour plus d’informations sur la création d’une interface utilisateur adaptative, consultez les dispositions réactives avec XAML et les panneaux de disposition.

Créer un affichage à deux volets

• API importantes :TwoPaneView, classe

Ce code XAML montre comment créer un code de base TwoPaneView.

<TwoPaneView>
    <TwoPaneView.Pane1>
        <Grid Background="{ThemeResource LayerFillColorDefaultBrush}">
            <TextBlock Text="Pane 1" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane1>

    <TwoPaneView.Pane2>
        <Grid Background="{ThemeResource LayerFillColorAltBrush}">
            <TextBlock Text="Pane 2" Margin="24"
                       Style="{ThemeResource HeaderTextBlockStyle}"/>
        </Grid>
    </TwoPaneView.Pane2>
</TwoPaneView>

TwoPaneView n’a pas besoin d’être l’élément racine de votre mise en page. En fait, vous l’utiliserez souvent à l’intérieur d’un contrôle NavigationView qui fournit la navigation globale pour votre application. Il TwoPaneView s’adapte de manière appropriée, quel que soit son emplacement dans l’arborescence XAML.

Ajouter du contenu aux volets

Chaque volet d'une interface à deux volets peut contenir un seul fichier XAML UIElement. Pour ajouter du contenu, vous placez généralement un panneau de disposition XAML dans chaque volet, puis ajoutez d’autres contrôles et contenu au panneau. Les volets peuvent modifier la taille et basculer entre les modes larges et grands. Vous devez donc vous assurer que le contenu de chaque volet peut s’adapter à ces modifications. Pour plus d’informations sur la création d’une interface utilisateur adaptative, consultez Dispositions adaptatives avec XAML et Panneaux de disposition.

Cet exemple montre comment créer l’interface utilisateur simple de l’application image/info affichée précédemment. Le contenu peut être affiché dans deux volets ou combiné en un seul volet, selon la quantité d’espace disponible. (Lorsqu’il n’y a qu’un espace pour un volet, vous déplacez le contenu de Pane2 dans Pane1 et laissez l’utilisateur défiler pour afficher tout contenu masqué. Vous verrez le code de cette section plus loin dans la section Réponse aux modifications du mode .)

<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>

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

        <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>
        </TwoPaneView.Pane1>

        <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>
        </TwoPaneView.Pane2>
    </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>

Spécifier le volet à afficher

Lorsque l’affichage à deux volets ne peut afficher qu’un seul volet, il utilise la propriété PanePriority pour déterminer le volet à afficher. Par défaut, PanePriority est défini sur Pane1. Voici comment définir cette propriété en XAML ou en code.

<TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">

MyTwoPaneView.PanePriority = TwoPaneViewPriority.Pane2;

Dimensionnement des panneaux

La taille des volets est déterminée par les propriétés Pane1Length et Pane2Length . Celles-ci utilisent des valeurs GridLength qui prennent en charge le dimensionnement auto et star (*). Consultez la section Propriétés de mise en page des dispositions réactives avec XAML pour obtenir une explication du dimensionnement automatique et à l'aide d'étoiles.

Par défaut, Pane1Length est défini sur Auto et il se dimensionne pour s’adapter à son contenu. Pane2Length est défini sur * et utilise tout l'espace restant.

Panneaux avec dimensionnement par défaut

Les valeurs par défaut sont utiles pour une disposition de liste/détail classique, où vous avez une liste d’éléments Pane1dans , et beaucoup de détails dans Pane2. Toutefois, selon votre contenu, vous préférerez peut-être diviser l’espace différemment. Ici, Pane1Length est défini pour 2* qu’il obtient deux fois plus d’espace que Pane2.

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

Panneaux de taille 2* et *

Si vous définissez un volet pour utiliser le dimensionnement automatique, vous pouvez contrôler la taille en définissant la hauteur et la largeur du Panel contenu du volet. Dans ce cas, vous devrez peut-être gérer l’événement ModeChanged et définir les contraintes de hauteur et de largeur du contenu en fonction du mode actuel.

Affichage en mode large ou mode haut

Sur un seul écran, le mode d’affichage à deux volets est déterminé par les propriétés MinWideModeWidth et MinTallModeHeight . Les deux propriétés ont une valeur par défaut de 641px, identique à NavigationView.CompactThresholdWidth.

Ce tableau montre comment les Height et Width du TwoPaneView déterminent le mode d'affichage utilisé.

Condition de TwoPaneView	Mode
Width > MinWideModeWidth	Le mode Wide est utilisé.
Width <= MinWideModeWidth, et Height>MinTallModeHeight	le Tall mode est utilisé
Width <= MinWideModeWidth, et Height<= MinTallModeHeight	On utilise le mode SinglePane

Options de configuration étendues

MinWideModeWidth contrôle lorsque l’affichage à deux volets entre en mode large. L’affichage à deux volets passe en mode Wide lorsque l’espace disponible est supérieur à la propriété MinWideModeWidth. La valeur par défaut est 641px, mais vous pouvez la modifier en fonction de votre choix. En règle générale, vous devez définir cette propriété sur tout ce que vous souhaitez pour la largeur minimale de votre volet.

Lorsque l’affichage à deux volets est en mode large, la propriété WideModeConfiguration détermine ce qui doit s’afficher :

Valeur d’énumération	Descriptif
SinglePane	Un seul volet (tel que déterminé par PanePriority). Le volet prend la taille complète du TwoPaneView (c’est-à-dire, il est dimensionné en étoile dans les deux sens).
LeftRight	Pane1 à gauche/Pane2 à droite. Les deux volets sont dimensionnés verticalement en étoile, la largeur de Pane1 est auto-dimensionnée, et la largeur de Pane2 est dimensionnée en étoile.
RightLeft	Pane1 à droite/Pane2 à gauche. Les deux volets sont dimensionnés verticalement en mode étoile, la largeur de Pane2 est ajustée automatiquement, et la largeur de Pane1 est en mode étoile.

La valeur par défaut est LeftRight.

GaucheDroite	DroiteGauche

Note

Lorsque l’appareil utilise une langue de droite à gauche (RTL), l’affichage à deux volets permute automatiquement l’ordre : RightLeft s'affiche comme LeftRight, et LeftRight s'affiche comme RightLeft.

Options de configuration de grande taille

L’affichage à deux volets passe en mode Tall lorsque l’espace disponible est plus étroit que MinWideModeWidth et plus long que MinTallModeHeight. La valeur par défaut est 641px, mais vous pouvez la modifier en fonction de votre choix. En règle générale, vous devez définir cette propriété en fonction de la hauteur minimale souhaitée pour votre volet.

Lorsque l’affichage à deux volets est en mode hauteur, la propriété TallModeConfiguration détermine ce qui doit s’afficher :

Valeur d’énumération	Descriptif
SinglePane	Un seul volet (tel que déterminé par PanePriority). Le volet prend la taille complète du TwoPaneView (c’est-à-dire, il est dimensionné en étoile dans les deux sens).
TopBottom	Pane1 en haut/Pane2 en bas. Les deux volets sont de taille étoile horizontalement, la hauteur de Pane1 est automatiquement ajustée et la hauteur de Pane2 est dimensionnée en étoile.
BottomTop	Pane1 en bas/Pane2 en haut. Les deux volets sont de taille étoile horizontalement, la hauteur de Pane2 est ajustée automatiquement, et la hauteur de Pane1 est dimensionnée en étoile.

La valeur par défaut est TopBottom.

TopBottom	BasHaut

Valeurs spéciales pour MinWideModeWidth et MinTallModeHeight

Vous pouvez utiliser la MinWideModeWidth propriété pour empêcher l’affichage à deux volets d’entrer en Wide mode. Il vous suffit d’affecter MinWideModeWidth la valeur Double.PositiveInfinity.

Si vous définissez MinTallModeHeight à Double.PositiveInfinity, cela empêche l'affichage à deux volets d'entrer en mode Tall.

Si vous définissez MinTallModeHeight la valeur 0, cela empêche l’affichage à deux volets d’entrer en SinglePane mode.

Réponse aux modifications du mode

Vous pouvez utiliser la propriété mode en lecture seule pour obtenir le mode d’affichage actuel. Chaque fois que l’affichage à deux volets change le volet ou les volets affichés, l’événement ModeChanged se produit avant qu’il affiche le contenu mis à jour. Vous pouvez gérer l’événement pour répondre aux modifications apportées au mode d’affichage.

Important

L’événement ModeChanged ne se produit pas lorsque la page est initialement chargée. Votre code XAML par défaut doit donc représenter l’interface utilisateur telle qu’elle doit apparaître lors du premier chargement.

Une façon d’utiliser cet événement consiste à mettre à jour l’interface utilisateur de votre application afin que les utilisateurs puissent afficher tout le contenu en SinglePane mode. Par exemple, l’exemple d’application a un volet principal (l’image) et un volet d’informations.

Mode De hauteur

Lorsqu’il n’y a que suffisamment d’espace pour afficher un volet, vous pouvez déplacer le contenu de celui-ci Pane2Pane1 afin que l’utilisateur puisse faire défiler pour afficher tout le contenu. Cette dernière se présente comme suit.

Mode SinglePane

N’oubliez pas que les MinWideModeWidthMinTallModeHeight propriétés déterminent quand le mode d’affichage change, de sorte que vous pouvez modifier lorsque le contenu est déplacé entre les volets en ajustant les valeurs de ces propriétés.

Voici le code du ModeChanged gestionnaire d’événements qui déplace le contenu entre Pane1 et Pane2. Il définit également un VisualState pour limiter la largeur de l’image en Wide mode.

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

    // Single pane
    if (sender.Mode == 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 == TwoPaneViewMode.Wide)
        {
            VisualStateManager.GoToState(this, "Wide", true);
        }
    }
}

UWP et WinUI 2

Important

Les informations et les exemples de cet article sont optimisés pour les applications qui utilisent le SDK d’application Windows et WinUI 3, mais sont généralement applicables aux applications UWP qui utilisent WinUI 2. Consultez la référence de l’API UWP pour obtenir des informations et des exemples spécifiques à la plateforme.

Cette section contient des informations dont vous avez besoin pour utiliser le contrôle dans une application UWP ou WinUI 2.

Les applications TwoPaneView pour UWP nécessitent WinUI 2. Pour plus d’informations, notamment les instructions d’installation, consultez WinUI 2. Les API de ce contrôle existent dans l’espace de noms Microsoft.UI.Xaml.Controls .

• Classe WinUI 2 Apis :TwoPaneView

Pour utiliser le code de cet article avec WinUI 2, utilisez un alias en XAML (nous utilisons muxc) pour représenter les API de bibliothèque d’interface utilisateur Windows incluses dans votre projet. Pour plus d’informations, consultez Prise en main de WinUI 2 .

xmlns:muxc="using:Microsoft.UI.Xaml.Controls"

<muxc:TwoPaneView />

Articles connexes

• Vue d’ensemble de la disposition
• Mode Fractionné