Condividi tramite

FlyoutPage

  • Articolo

Browse sample. Esplorare l'esempio

.NET MAUI FlyoutPage.

L'interfaccia utente dell'app multipiattaforma .NET (.NET MAUI) FlyoutPage è una pagina che gestisce due pagine correlate di informazioni, ovvero una pagina a comparsa che presenta elementi e una pagina di dettaglio che presenta informazioni dettagliate sugli elementi nella pagina a comparsa.

A FlyoutPage ha due comportamenti di layout:

  • In un layout popover, la pagina dei dettagli copre o copre parzialmente la pagina a comparsa. Se si seleziona un elemento nella pagina a comparsa, si passa alla pagina dei dettagli corrispondente. Le app in esecuzione sui telefoni usano sempre questo comportamento di layout.
  • In un layout diviso, la pagina a comparsa viene visualizzata a sinistra e la pagina dei dettagli si trova a destra. Le app in esecuzione su tablet o desktop possono usare questo comportamento di layout, con Windows che lo usa per impostazione predefinita.

Per altre informazioni sul comportamento del layout, vedere Comportamento del layout.

FlyoutPage definisce le proprietà seguenti:

  • Detail, di tipo Page, definisce la pagina dei dettagli visualizzata per l'elemento selezionato nella pagina a comparsa.
  • Flyout, di tipo Page, definisce la pagina a comparsa.
  • FlyoutLayoutBehavior, di tipo FlyoutLayoutBehavior, indica il comportamento del layout delle pagine a comparsa e dei dettagli.
  • IsGestureEnabled, di tipo bool, determina se un movimento di scorrimento rapido passerà tra il riquadro a comparsa e le pagine di dettaglio. Il valore predefinito di questa proprietà è true.
  • IsPresented, di tipo bool, determina se viene visualizzata la pagina a comparsa o di dettaglio. Il valore predefinito di questa proprietà è false, che visualizza la pagina dei dettagli. Deve essere impostato su true per visualizzare la pagina a comparsa.

Le IsGestureEnabledproprietà , IsPresentede FlyoutLayoutBehavior sono supportate da BindableProperty oggetti , il che significa che possono essere destinazioni di data binding e stili.

FlyoutPage definisce anche un IsPresentedChanged evento generato quando la IsPresented proprietà cambia valore.

Avviso

FlyoutPage non è compatibile con le app della shell MAUI .NET e viene generata un'eccezione se si tenta di usare FlyoutPage in un'app Shell. Per altre informazioni sulle app shell, vedere Shell.

Creare un riquadro a comparsa

Per creare una pagina a comparsa, creare un FlyoutPage oggetto e impostarne le Flyout proprietà e Detail . La Flyout proprietà deve essere impostata su ContentPage oggetto e la Detail proprietà deve essere impostata su un TabbedPageoggetto , NavigationPageo ContentPage . In questo modo si potrà garantire un'esperienza utente uniforme su tutte le piattaforme.

Importante

Un FlyoutPage oggetto è progettato per essere la pagina radice di un'app e usarlo come pagina figlio in altri tipi di pagina potrebbe comportare un comportamento imprevisto e incoerente.

Nell'esempio seguente viene illustrato un FlyoutPage oggetto che imposta le Flyout proprietà e Detail :

<FlyoutPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:FlyoutPageNavigation"
            x:Class="FlyoutPageNavigation.MainPage">
    <FlyoutPage.Flyout>
        <local:FlyoutMenuPage x:Name="flyoutPage" />
    </FlyoutPage.Flyout>
    <FlyoutPage.Detail>
        <NavigationPage>
            <x:Arguments>
                <local:ContactsPage />
            </x:Arguments>
        </NavigationPage>
    </FlyoutPage.Detail>
</FlyoutPage>

In questo esempio la Flyout proprietà viene impostata su un ContentPage oggetto e la Detail proprietà è impostata su un NavigationPage oggetto contenente un ContentPage oggetto .

Nell'esempio seguente viene illustrata la definizione dell'oggetto FlyoutMenuPage , di tipo ContentPage:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlyoutPageNavigation"
             x:Class="FlyoutPageNavigation.FlyoutMenuPage"
             Padding="0,40,0,0"
             IconImageSource="hamburger.png"
             Title="Personal Organiser">
    <CollectionView x:Name="collectionView"
                    x:FieldModifier="public"
                    SelectionMode="Single">
        <CollectionView.ItemsSource>
            <x:Array Type="{x:Type local:FlyoutPageItem}">
                <local:FlyoutPageItem Title="Contacts"
                                      IconSource="contacts.png"
                                      TargetType="{x:Type local:ContactsPage}" />
                <local:FlyoutPageItem Title="TodoList"
                                      IconSource="todo.png"
                                      TargetType="{x:Type local:TodoListPage}" />
                <local:FlyoutPageItem Title="Reminders"
                                      IconSource="reminders.png"
                                      TargetType="{x:Type local:ReminderPage}" />
            </x:Array>
        </CollectionView.ItemsSource>
        <CollectionView.ItemTemplate>
            <DataTemplate>
                <Grid Padding="5,10">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30"/>
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Image Source="{Binding IconSource}" />
                    <Label Grid.Column="1"
                           Margin="20,0"
                           Text="{Binding Title}"
                           FontSize="20"
                           FontAttributes="Bold"
                           VerticalOptions="Center" />
                </Grid>
            </DataTemplate>
        </CollectionView.ItemTemplate>
    </CollectionView>
</ContentPage>

In questo esempio, la pagina del riquadro a comparsa è costituita da un CollectionView oggetto popolato con i dati impostando la relativa ItemsSource proprietà su una matrice di FlyoutPageItem oggetti. L'esempio seguente illustra la definizione della FlyoutPageItem classe :

public class FlyoutPageItem
{
    public string Title { get; set; }
    public string IconSource { get; set; }
    public Type TargetType { get; set; }
}

Una classe DataTemplate è assegnata alla proprietà CollectionView.ItemTemplate per visualizzare ogni FlyoutPageItem. DataTemplate contiene una classe Grid composta da una classe Image e una classe Label. Image visualizza il valore della proprietà IconSource e Label visualizza il valore della proprietà Title per ogni FlyoutPageItem. Inoltre, la pagina a comparsa ha le Title proprietà e IconImageSource impostate. L'icona verrà visualizzata nella pagina di dettaglio a condizione che in quest'ultima sia presente una barra del titolo.

Nota

La pagina Flyout deve avere la proprietà Title impostata. In caso contrario, verrà generata un'eccezione.

Lo screenshot seguente mostra il riquadro a comparsa risultante:

.NET MAUI flyout.

Creare e visualizzare la pagina dei dettagli

L'oggetto FlyoutMenuPage contiene un CollectionView oggetto a cui fa riferimento la MainPage classe . In questo modo la MainPage classe può registrare un gestore per l'evento SelectionChanged . In questo modo l'oggetto MainPage può impostare la Detail proprietà sulla pagina che rappresenta l'elemento selezionato CollectionView . L'esempio seguente mostra il gestore eventi:

public partial class MainPage : FlyoutPage
{
    public MainPage()
    {
        ...
        flyoutPage.collectionView.SelectionChanged += OnSelectionChanged;
    }

    void OnSelectionChanged(object sender, SelectionChangedEventArgs e)
    {
        var item = e.CurrentSelection.FirstOrDefault() as FlyoutPageItem;
        if (item != null)
        {            
            Detail = new NavigationPage((Page)Activator.CreateInstance(item.TargetType));
            if (!((IFlyoutPageController)this).ShouldShowSplitMode)
                IsPresented = false;
        }
    }
}

In questo esempio, il OnSelectionChanged gestore eventi recupera CurrentSelection dall'oggetto CollectionView e imposta la pagina dei dettagli su un'istanza del tipo di pagina archiviato nella TargetType proprietà dell'oggetto FlyoutPageItem. La pagina dei dettagli viene visualizzata impostando la FlyoutPage.IsPresented proprietà su false, a condizione che FlyoutPage non usi un layout diviso. Quando si FlyoutPage usa un layout diviso, le pagine a comparsa e di dettaglio vengono visualizzate e pertanto non è necessario impostare la FlyoutPage.IsPresented proprietà.

Comportamento del layout

Il FlyoutPage modo in cui visualizza il riquadro a comparsa e le pagine di dettaglio dipende dal fattore di forma del dispositivo su cui è in esecuzione l'app, dall'orientamento del dispositivo e dal valore della FlyoutLayoutBehavior proprietà. Questa proprietà deve essere impostata su un valore dell'enumerazione FlyoutLayoutBehavior , che definisce i membri seguenti:

  • Default : le pagine vengono visualizzate usando l'impostazione predefinita della piattaforma.
  • Popover : la pagina dei dettagli copre o copre parzialmente la pagina a comparsa.
  • Split : la pagina a comparsa viene visualizzata a sinistra e la pagina dei dettagli si trova a destra.
  • SplitOnLandscape : una schermata divisa viene usata quando il dispositivo è in orientamento orizzontale.
  • SplitOnPortrait : viene usata una schermata divisa quando il dispositivo è in orientamento verticale.

Nell'esempio seguente viene illustrato come impostare la FlyoutLayoutBehavior proprietà in un FlyoutPageoggetto :

<FlyoutPage ...
            FlyoutLayoutBehavior="Split">
  ...
</FlyoutPage>

Importante

Il valore della FlyoutLayoutBehavior proprietà influisce solo sulle app in esecuzione su tablet o desktop. Le app in esecuzione sui telefoni hanno sempre il Popover comportamento.