Partager via

Xamarin.Forms Disposition TwoPaneView

  • Article

La classe TwoPaneView représente un conteneur avec deux vues qui dimensionnent et positionnent le contenu dans l’espace disponible, côte à côte ou de haut en bas. Pour simplifier les choses, étant donné que TwoPaneView hérite de Grid, imaginez que ces propriétés sont appliquées à une grille.

Configurer TwoPaneView

Suivez ces instructions pour créer une disposition double écran dans votre application :

  1. Suivez les instructions de prise en main pour ajouter NuGet et configurer la classe Android MainActivity .

  2. Commencez par une base TwoPaneView à l’aide du code XAML suivant :

    <ContentPage
    xmlns:dualScreen="clr-namespace:Xamarin.Forms.DualScreen;assembly=Xamarin.Forms.DualScreen">
    <dualScreen:TwoPaneView>
        <dualScreen:TwoPaneView.Pane1>
            <StackLayout>
                <Label Text="Pane1 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane1>
        <dualScreen:TwoPaneView.Pane2>
            <StackLayout>
                <Label Text="Pane2 Content" />
            </StackLayout>
        </dualScreen:TwoPaneView.Pane2>
    </dualScreen:TwoPaneView>
</ContentPage>

Conseil

Le code XAML ci-dessus omet de nombreux attributs courants de l’élément ContentPage . Lorsque vous ajoutez une TwoPaneView application, n’oubliez pas de déclarer l’espace xmlns:dualScreen de noms comme indiqué.

Comprendre les modes de TwoPaneView

Un seul de ces modes peut être actif :

  • SinglePane : un seul volet est actuellement visible.
  • Wide : les deux volets sont disposés horizontalement. Un volet est à gauche et l’autre est à droite. Avec les deux écrans actifs, c’est le mode quand l’appareil est en mode portrait.
  • Tall : les deux volets sont disposés verticalement. Un volet est en haut et l’autre est en bas. Avec les deux écrans actifs, c’est le mode quand l’appareil est en mode paysage.

Contrôler TwoPaneView sur un seul écran

Les propriétés suivantes s’appliquent quand TwoPaneView occupe un seul écran :

  • MinTallModeHeight indique la hauteur minimale du contrôle pour entrer en mode Tall.
  • MinWideModeWidth indique la largeur minimale du contrôle pour entrer en mode Wide.
  • Pane1Length définit la largeur de Pane1 en mode Wide, la hauteur de Pane1 en mode Tall, et n’a aucun effet en mode SinglePane.
  • Pane2Length définit la largeur de Pane2 en mode Wide, la hauteur de Pane2 en mode Tall, et n’a aucun effet en mode SinglePane.

Important

Si TwoPaneView est réparti sur deux écrans, ces propriétés n’ont aucun effet.

Propriétés qui s’appliquent à un ou deux écrans

Les propriétés suivantes s’appliquent quand TwoPaneView occupe un seul écran ou deux écrans :

  • TallModeConfiguration indique, lorsqu’il est en mode Haut/Bas, ou si vous ne souhaitez qu’un seul volet visible comme défini par TwoPaneViewPriority.
  • WideModeConfiguration indique, lorsqu’il est en mode large, l’arrangement gauche/droite ou si vous ne souhaitez qu’un seul volet visible comme défini par TwoPaneViewPriority.
  • PanePriority détermine s’il faut montrer Pane1 ou Pane2 en mode SinglePane.