Vue à deux volets
TwoPaneView est un contrôle de disposition qui vous permet de gérer l’affichage des applications ayant 2 zones de contenu distinctes, comme une vue liste/détail.
Important
Les fonctionnalités et l’aide décrites dans cet article sont en préversion publique et peuvent faire l’objet de modifications importantes avant leur lancement en disponibilité générale. Microsoft ne donne aucune garantie, expresse ou implicite, concernant les informations fournies ici.
Bien qu’il fonctionne sur tous les appareils Windows, le contrôle TwoPaneView est conçu pour vous aider à tirer pleinement parti des appareils double écran de manière automatique, sans aucune programmation spéciale. Sur un appareil double écran, la vue à deux volets garantit que l’interface utilisateur est correctement divisée pour prendre en charge l’espace entre les écrans et que le contenu est présenté de chaque côté de cet espace.
Notes
Un appareil double écran est un type spécial d’appareil qui présente des fonctionnalités uniques. Il ne s’agit pas d’un appareil de bureau équipé de plusieurs moniteurs. Pour plus d’informations, consultez cette présentation des appareils double écran. (Pour plus d’informations sur les façons dont vous pouvez optimiser votre application pour plusieurs moniteurs, consultez Afficher plusieurs vues.)
Obtenir la bibliothèque d’interface utilisateur Windows
Le contrôle TwoPaneView est inclus dans la bibliothèque d’interface utilisateur Windows, package NuGet contenant de nouveaux contrôles et fonctionnalités d’interface utilisateur destinés aux applications Windows. Pour plus d’informations, notamment des instructions d’installation, consultez la bibliothèque d’interface utilisateur Windows.
API de la bibliothèque d’interface utilisateur Windows :classe TwoPaneView
Conseil
Tout au long de ce document, nous utilisons l’alias muxc en XAML pour représenter les API de la bibliothèque d’interface utilisateur Windows que nous avons incluses dans notre projet. Nous l’avons ajouté à notre élément Page : xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
Dans le code-behind, nous utilisons également l’alias muxc en C# pour représenter les API de la bibliothèque d’interface utilisateur Windows que nous avons incluses dans notre projet. Nous avons ajouté cette instruction using en haut du fichier : using muxc = Microsoft.UI.Xaml.Controls;
Est-ce le contrôle approprié ?
Utilisez la vue à deux volets lorsque vous avez 2 zones de contenu distinctes et que :
- Le contenu doit être automatiquement réorganisé et redimensionné pour s’adapter au mieux à la fenêtre.
- La zone de contenu secondaire doit être affichée ou non en fonction de l’espace disponible.
- Le contenu doit être réparti correctement entre les 2 écrans d’un appareil double écran.
Exemples
Ces images montrent une application exécutée sur un seul écran et étendue sur deux écrans. La vue à deux volets adapte l’interface utilisateur de l’application aux différentes configurations d’écran.
Application sur un seul écran.
Application sur un appareil double écran en mode horizontal.
Application sur un appareil double écran en mode vertical.
Fonctionnement
La vue à deux volets se compose de deux volets où vous placez votre contenu. Elle ajuste la taille et la disposition des volets en fonction de l’espace dont bénéficie la fenêtre. Les dispositions de volet possibles sont définies par l’énumération TwoPaneViewMode :
| Valeur enum | Description |
|---|---|
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 est affiché, comme spécifié par la propriété WideModeConfiguration. |
Tall |
Les volets sont affichés de haut en bas ou un seul volet est affiché, comme spécifié par la propriété TallModeConfiguration. |
Pour configurer la vue à deux volets, commencez par définir PanePriority pour spécifier le volet à afficher s’il n’y a de la place que pour un seul volet. Indiquez ensuite si le volet Pane1 apparaît en haut ou en bas dans les fenêtres en mode vertical, ou à gauche ou à droite dans les fenêtres en mode horizontal.
La vue à deux volets gère la taille et la disposition des volets, mais vous devez toujours faire en sorte que le contenu à l’intérieur du volet s’adapte aux changements de taille et d’orientation. Pour plus d’informations sur la création d’une interface utilisateur adaptative, consultez Dispositions dynamiques avec XAML et Panneaux de disposition.
TwoPaneView gère l’affichage des volets en fonction de l’état de répartition de l’application.
Sur un seul écran
Si votre application s’affiche sur un seul écran,
TwoPaneViewadapte la taille et la position de ses volets d’après les paramètres des propriétés que vous spécifiez. Ces propriétés sont traitées plus en détail dans la section suivante. La seule différence entre les appareils tient au fait que certains appareils, comme les PC de bureau, autorisent les fenêtres redimensionnables alors que d’autres ne les autorisent pas.Répartie sur deux écrans
TwoPaneViewfacilite l’optimisation de votre interface utilisateur en la répartissant sur les appareils double écran. La fenêtre se redimensionne automatiquement afin d’utiliser tout l’espace disponible sur les écrans. Si votre application couvre les deux écrans d’un appareil double écran, chaque écran affiche le contenu de l’un des volets en tenant compte de l’espace entre les écrans. La vue à deux volets intègre la reconnaissance de l’étendue. Il vous suffit de définir la configuration verticale/horizontale pour spécifier quel volet s’affiche sur quel écran. La vue à deux volets se charge du reste.
Comment utiliser le contrôle de vue à deux volets
TwoPaneView ne doit pas nécessairement être l’élément racine de votre mise en page. En fait, il est souvent placé à l’intérieur d’un contrôle NavigationView qui fournit la navigation globale pour votre application. Le contrôle TwoPaneView s’adapte en conséquence, quel que soit son emplacement dans l’arborescence XAML. Toutefois, nous vous déconseillons d’imbriquer un contrôle TwoPaneView dans un autre contrôle TwoPaneView. (Si vous le faites, seul le contrôle TwoPaneView externe prend en compte la répartition.)
Ajouter du contenu aux volets
Chaque volet d’une vue à deux volets peut contenir un seul UIElement XAML. Pour ajouter du contenu, vous placez généralement un panneau de disposition XAML dans chaque volet, puis vous ajoutez d’autres contrôles et du contenu au panneau. Les volets pouvant changer de taille et alterner entre mode horizontal et mode vertical, vous devez vérifier que le contenu de chaque volet peut s’adapter à ces changements. Pour plus d’informations sur la création d’une interface utilisateur adaptative, consultez Dispositions dynamiques avec XAML et Panneaux de disposition.
Cet exemple montre comment créer l’interface utilisateur d’une application image/info simple présentée précédemment dans la section Exemples . Quand l’application est répartie sur deux écrans, l’image et les informations sont affichées sur des écrans distincts. Sur un seul écran, le contenu peut être affiché dans deux volets ou combiné dans un volet unique en fonction de la place disponible. (Quand il n’y a que de l’espace pour un volet, vous déplacez le contenu de Pane2 dans Pane1 et laissez l’utilisateur faire défiler pour voir tout contenu masqué. Vous verrez le code pour cela 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>
<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>
Spécifier le volet à afficher
Si le contrôle de vue à deux volets ne peut afficher qu’un seul volet, il utilise la propriété PanePriority pour déterminer quel volet afficher. Par défaut, PanePriority a la valeur Pane1. Voici comment vous pouvez définir cette propriété en XAML ou dans le code.
<muxc:TwoPaneView x:Name="MyTwoPaneView" PanePriority="Pane2">
MyTwoPaneView.PanePriority = Microsoft.UI.Xaml.Controls.TwoPaneViewPriority.Pane2;
Dimensionnement des volets
Sur un seul écran, 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 automatique et star(*). Pour obtenir une explication des redimensionnements auto et *, consultez la section Propriétés de disposition de l’article Dispositions dynamiques avec XAML.
Par défaut, Pane1Length est défini sur Auto et se redimensionne automatiquement en fonction de son contenu. Pane2Length est défini sur * et utilise tout l’espace restant.
Volets avec redimensionnement par défaut
Les valeurs par défaut sont utiles pour une disposition standard de type liste/détails, avec une liste d’éléments dans Pane1 et de nombreux détails dans Pane2. Toutefois, en fonction de votre contenu, vous préférerez peut-être diviser l’espace différemment. Dans ce cas, Pane1Length est défini sur 2* pour avoir deux fois plus d’espace que Pane2.
<muxc:TwoPaneView x:Name="MyTwoPaneView" Pane1Length="2*">
Volets dimensionnés avec 2* et *
Notes
Comme mentionné précédemment, quand l’application est répartie sur deux écrans, ces propriétés sont ignorées et chaque volet remplit l’un des écrans.
Si vous définissez un volet avec redimensionnement automatique, vous pouvez contrôler la taille en définissant la hauteur et la largeur du panneau où se trouve le 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.
Afficher en mode vertical ou horizontal
Sur un seul écran, le mode d’affichage de la vue à 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, comme NavigationView.CompactThresholdWidth.
Ce tableau montre de quelle façon les propriétés Height et Width du TwoPaneView déterminent le mode d’affichage utilisé.
| Condition TwoPaneView | Mode |
|---|---|
Width > MinWideModeWidth |
Le mode Wide est utilisé |
Width<= MinWideModeWidth, et Height>MinTallModeHeight |
Le mode Tall est utilisé |
Width<= MinWideModeWidth, et Height<= MinTallModeHeight |
Le mode SinglePane est utilisé |
Notes
Comme mentionné précédemment, quand l’application est répartie sur deux écrans, ces propriétés sont ignorées et le mode d’affichage est déterminé en fonction de la posture de l’appareil.
Options de configuration du mode horizontal
La vue à deux volets passe en mode Wide quand la largeur d’une fenêtre est supérieure à la valeur MinWideModeWidth. MinWideModeWidth contrôle à quel moment la vue à deux volets passe en mode horizontal. La valeur par défaut est 641px, mais vous pouvez la remplacer par la valeur de votre choix. En général, vous définissez cette propriété pour qu’elle soit égale à la largeur minimale souhaitée de votre volet.
Quand la vue à deux volets est en mode horizontal, la propriété WideModeConfiguration détermine ce qu’il faut afficher :
| Valeur enum | Description |
|---|---|
SinglePane |
Un seul volet (déterminé par PanePriority). Le volet occupe toute la taille du TwoPaneView (redimensionnement proportionnel dans les deux directions). |
LeftRight |
Pane1 à gauche et Pane2 à droite. Les deux volets sont redimensionnés verticalement de manière proportionnelle ; la largeur de Pane1 est redimensionnée automatiquement et la largeur de Pane2 est redimensionnée de manière proportionnelle. |
RightLeft |
Pane1 à droite et Pane2 à gauche. Les deux volets sont redimensionnés verticalement de manière proportionnelle ; la largeur de Pane2 est redimensionnée automatiquement et la largeur de Pane1 est redimensionnée de manière proportionnelle. |
La valeur par défaut est LeftRight.
| LeftRight | RightLeft |
|---|---|
|
 |
CONSEIL : Quand l’appareil utilise une langue qui s’écrit de droite à gauche (DàG), la vue à deux volets change automatiquement l’ordre :
RightLeftdevientLeftRightetLeftRightdevientRightLeft.
Options de configuration du mode vertical
La vue à deux volets passe en mode Tall quand la largeur d’une fenêtre est inférieure à la valeur MinWideModeWidth et que sa hauteur dépasse la valeur MinTallModeHeight. La valeur par défaut est 641px, mais vous pouvez la remplacer par la valeur de votre choix. En général, vous définissez cette propriété pour qu’elle soit égale à la hauteur minimale souhaitée de votre volet.
Quand la vue à deux volets est en mode vertical, la propriété TallModeConfiguration détermine ce qu’il faut afficher :
| Valeur enum | Description |
|---|---|
SinglePane |
Un seul volet (déterminé par PanePriority). Le volet occupe toute la taille du TwoPaneView (redimensionnement proportionnel dans les deux directions). |
TopBottom |
Pane1 en haut et Pane2 en bas. Les deux volets sont redimensionnés horizontalement de manière proportionnelle ; la hauteur de Pane1 est redimensionnée automatiquement et la hauteur de Pane2 est redimensionnée de manière proportionnelle. |
BottomTop |
Pane1 en bas et Pane2 en haut. Les deux volets sont redimensionnés horizontalement de manière proportionnelle ; la hauteur de Pane2 est redimensionnée automatiquement et la hauteur de Pane1 est redimensionnée de manière proportionnelle. |
La valeur par défaut est TopBottom.
| TopBottom | BottomTop |
|---|---|
 |
 |
Valeurs spéciales pour MinWideModeWidth et MinTallModeHeight
Vous pouvez utiliser la propriété MinWideModeWidth pour empêcher la vue à deux volets d’entrer en mode Wide (horizontal). Pour cela, définissez simplement MinWideModeWidth sur Double.PositiveInfinity.
Si vous définissez MinTallModeHeight sur Double.PositiveInfinity, la vue à deux volets n’entre pas en mode Tall (vertical).
Si vous définissez MinTallModeHeight sur zéro (0), la vue à deux volets n’entre pas en mode SinglePane.
Répondre aux changements de mode
Vous pouvez utiliser la propriété en lecture seule Mode pour obtenir le mode d’affichage actuel. Chaque fois que la vue à deux volets change le ou les volets affichés, l’événement ModeChanged se produit avant l’affichage du contenu mis à jour. Vous pouvez gérer l’événement pour répondre aux changements du mode d’affichage.
Conseil
L’événement ModeChanged ne se produit pas au moment du chargement initial de la page. Votre code XAML par défaut doit donc représenter l’interface utilisateur telle qu’elle est censée apparaître au premier chargement.
Vous pouvez notamment utiliser cet événement pour mettre à jour l’interface utilisateur de votre application afin que les utilisateurs puissent voir tout le contenu en mode SinglePane. Par exemple, l’exemple d’application a un volet principal (l’image) et un volet d’informations.
Mode Tall (vertical)
S’il n’y a de la place que pour un seul volet, vous pouvez déplacer le contenu de Pane2 vers Pane1 afin que l’utilisateur puisse faire défiler le volet pour voir tout le contenu. Cette dernière se présente comme suit.
Mode SinglePane
N’oubliez pas que les propriétés MinWideModeWidth et MinTallModeHeight déterminent quand changer le mode d’affichage. Vous pouvez donc changer le moment où le contenu est déplacé entre les volets en ajustant les valeurs de ces propriétés.
Voici le code du gestionnaire d’événements ModeChanged qui déplace le contenu de Pane1 vers Pane2. Il définit également un VisualState qui force l’affichage de l’image en mode Wide (horizontal).
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);
}
}
}
Pratiques conseillées et déconseillées
- Utilisez la vue à deux volets dans la mesure du possible pour que votre application s’affiche de manière optimale sur des appareils à double écran et à grand écran.
- Ne placez pas une vue à deux volets à l’intérieur d’une autre vue à deux volets.
Articles connexes
Windows developer
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour