Udostępnij za pośrednictwem

FlyoutPage

  • Artykuł

Browse sample. Przeglądanie przykładu

.NET MAUI FlyoutPage.

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) FlyoutPage to strona, która zarządza dwiema powiązanymi stronami informacji — stroną wysuwaną zawierającą elementy i stroną szczegółów zawierającą szczegółowe informacje o elementach na stronie wysuwanej.

Element FlyoutPage ma dwa zachowania układu:

  • W układzie podręcznym strona szczegółów obejmuje lub częściowo obejmuje stronę wysuwaną. Wybranie elementu na stronie wysuwanych spowoduje przejście do odpowiedniej strony szczegółów. Aplikacje działające na telefonach zawsze używają tego zachowania układu.
  • W układzie podziału strona wysuwana jest wyświetlana po lewej stronie, a strona szczegółów znajduje się po prawej stronie. Aplikacje działające na tabletach lub na pulpicie mogą domyślnie używać tego zachowania układu z systemem Windows.

Aby uzyskać więcej informacji na temat zachowania układu, zobacz Zachowanie układu.

FlyoutPage definiuje następujące właściwości:

  • Detail, typu Page, definiuje stronę szczegółów wyświetlaną dla wybranego elementu na stronie wysuwanej.
  • Flyout, typu Page, definiuje stronę wysuwaną.
  • FlyoutLayoutBehavior, typu FlyoutLayoutBehavior, wskazuje zachowanie układu stron wysuwanych i szczegółów.
  • IsGestureEnabled, typu bool, określa, czy gest przesunięcia będzie przełączać się między stronami wysuwanym i szczegółowymi. Wartość domyślna tej właściwości to true.
  • IsPresented, typu bool, określa, czy jest wyświetlana strona wysuwana, czy szczegółowa. Wartość domyślna tej właściwości to false, która wyświetla stronę szczegółów. Powinna być ustawiona wartość , aby wyświetlić true stronę wysuwaną.

Właściwości IsGestureEnabled, IsPresentedi FlyoutLayoutBehavior są wspierane przez BindableProperty obiekty, co oznacza, że mogą być obiektami docelowymi powiązań danych i stylizowanymi.

FlyoutPage Definiuje IsPresentedChanged również zdarzenie, które jest zgłaszane, gdy IsPresented właściwość zmienia wartość.

Ostrzeżenie

FlyoutPage jest niezgodny z aplikacjami .NET MAUI Shell, a w przypadku próby użycia FlyoutPage w aplikacji powłoki zostanie zgłoszony wyjątek. Aby uzyskać więcej informacji na temat aplikacji powłoki, zobacz Powłoka.

Tworzenie strony wysuwanej

Aby utworzyć stronę wysuwaną FlyoutPage , utwórz obiekt i ustaw go Flyout i Detail właściwości. Właściwość powinna być ustawiona Flyout na ContentPage obiekt, a Detail właściwość powinna być ustawiona TabbedPagena obiekt , NavigationPagelub ContentPage . Pomoże to zapewnić spójne środowisko użytkownika na wszystkich platformach.

Ważne

Element FlyoutPage jest zaprojektowany tak, aby była stroną główną aplikacji i używała jej jako strony podrzędnej w innych typach stron, może spowodować nieoczekiwane i niespójne zachowanie.

W poniższym przykładzie pokazano element FlyoutPage , który ustawia Flyout właściwości i 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>

W tym przykładzie Flyout właściwość jest ustawiona na ContentPage obiekt, a Detail właściwość jest ustawiona na NavigationPage obiekt zawierający ContentPage obiekt.

W poniższym przykładzie przedstawiono definicję FlyoutMenuPage obiektu typu 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>

W tym przykładzie strona wysuwana składa się z CollectionView obiektu wypełnionego danymi przez ustawienie jej ItemsSource właściwości na tablicę FlyoutPageItem obiektów. W poniższym przykładzie przedstawiono definicję FlyoutPageItem klasy:

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

Właściwość A DataTemplate jest przypisana CollectionView.ItemTemplate do właściwości , aby wyświetlić każdy FlyoutPageItemelement . Element DataTemplate zawiera element Grid , który składa się z elementu ImageLabeli . Spowoduje to Image wyświetlenie IconSource wartości właściwości, a Label właściwość jest wyświetlana Title dla każdego FlyoutPageItemelementu . Ponadto strona wysuwana ma ustawiony jej Title właściwości i IconImageSource . Ikona zostanie wyświetlona na stronie szczegółów, pod warunkiem, że strona szczegółów ma pasek tytułu.

Uwaga

Strona Flyout musi mieć swój Title zestaw właściwości lub wystąpi wyjątek.

Poniższy zrzut ekranu przedstawia wynikowe okno wysuwane:

.NET MAUI flyout.

Tworzenie i wyświetlanie strony szczegółów

Obiekt FlyoutMenuPage zawiera odwołanie CollectionView do MainPage klasy . Dzięki temu klasa może MainPage zarejestrować program obsługi dla SelectionChanged zdarzenia. Dzięki temu obiekt może MainPage ustawić Detail właściwość na stronę reprezentującą wybrany CollectionView element. W poniższym przykładzie przedstawiono procedurę obsługi zdarzeń:

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

W tym przykładzie OnSelectionChanged program obsługi zdarzeń pobiera element CurrentSelection z CollectionView obiektu i ustawia stronę szczegółów na wystąpienie typu strony przechowywanego TargetType we właściwości FlyoutPageItem. Strona szczegółów jest wyświetlana przez ustawienie FlyoutPage.IsPresented właściwości na false, pod warunkiem, że FlyoutPage nie używa układu podziału. FlyoutPage Gdy obiekt korzysta z układu podziału, wyświetlane są strony wysuwane i strony szczegółów, dlatego nie trzeba ustawiać FlyoutPage.IsPresented właściwości.

Zachowanie układu

FlyoutPage Sposób wyświetlania stron wysuwanych i szczegółów zależy od współczynnika formy urządzenia, na którym działa aplikacja, orientacji urządzenia i wartości FlyoutLayoutBehavior właściwości. Ta właściwość powinna być ustawiona na wartość FlyoutLayoutBehavior wyliczenia, która definiuje następujące elementy członkowskie:

  • Default — strony są wyświetlane przy użyciu domyślnej platformy.
  • Popover — strona szczegółów obejmuje lub częściowo obejmuje stronę wysuwaną.
  • Split — strona wysuwana jest wyświetlana po lewej stronie, a strona szczegółów znajduje się po prawej stronie.
  • SplitOnLandscape — ekran podzielony jest używany, gdy urządzenie jest w orientacji poziomej.
  • SplitOnPortrait — ekran podzielony jest używany, gdy urządzenie jest w orientacji pionowej.

W poniższym przykładzie pokazano, jak ustawić FlyoutLayoutBehavior właściwość na obiekcie FlyoutPage:

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

Ważne

Wartość FlyoutLayoutBehavior właściwości wpływa tylko na aplikacje uruchomione na tabletach lub na pulpicie. Aplikacje działające na telefonach zawsze mają Popover takie zachowanie.