FlyoutPage

發行項
09/30/2024

Browse sample. 流覽範例

.NET MAUI FlyoutPage.

.NET 多平臺應用程式 UI （.NET MAUI） FlyoutPage 是一個頁面，可管理兩個相關信息頁面 – 一個顯示專案的飛出視窗頁面，以及一個詳細數據頁面，其中顯示飛出視窗頁面上專案的詳細數據。

FlyoutPage有兩種配置行為：

在快顯版面配置中，詳細數據頁面涵蓋或部分涵蓋飛出視窗頁面。選取飛出視窗頁面上的專案將會瀏覽至對應的詳細數據頁面。在手機上執行的應用程式一律會使用此版面配置行為。
在分割配置中，飛出視窗頁面會顯示在左側，而詳細數據頁面位於右側。在平板電腦或桌面上執行的應用程式可以使用此版面配置行為，Windows 預設會使用它。

如需配置行為的詳細資訊，請參閱版面配置行為。

FlyoutPage 會定義下列屬性：

Detail類型 Page為的，定義飛出視窗頁面中所選取專案所顯示的詳細數據頁面。
Flyout型 Page別為的會定義飛出視窗頁面。
FlyoutLayoutBehavior型 FlyoutLayoutBehavior別為的，表示飛出視窗和詳細數據頁面的配置行為。
IsGestureEnabled型 bool別為的，會決定撥動手勢是否會在飛出視窗和詳細數據頁面之間切換。此屬性的預設值為 true。
IsPresented型 bool別為的，決定是否顯示飛出視窗或詳細數據頁面。此屬性的預設值為 false，其會顯示詳細數據頁面。它應該設定為 true 以顯示飛出視窗頁面。

IsGestureEnabled、 IsPresented和 FlyoutLayoutBehavior 屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是數據系結的目標，並設定樣式。

FlyoutPage 也會定義 IsPresentedChanged 當屬性變更值時 IsPresented 所引發的事件。

警告

FlyoutPage 與 .NET MAUI Shell 應用程式不相容，如果您嘗試在Shell應用程式中使用 FlyoutPage ，將會擲回例外狀況。如需殼層應用程式的詳細資訊，請參閱 Shell。

建立 FlyoutPage

若要建立飛出視窗頁面，請建立 FlyoutPage 物件並設定其 Flyout 和 Detail 屬性。屬性 Flyout 應該設定為 ContentPage 物件，而 Detail 屬性應該設定為 TabbedPage、 NavigationPage或 ContentPage 物件。這有助於跨所有平台確保一致的使用者體驗。

重要

FlyoutPage設計成應用程式的根頁面，並將它當做其他頁面類型的子頁面，可能會導致非預期且不一致的行為。

下列範例顯示 FlyoutPage 設定與 Detail 屬性： Flyout

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

在這裡範例中，屬性 Flyout 會設定為 ContentPage 物件，而 Detail 屬性會設定為 NavigationPage 包含 ContentPage 物件的。

下列範例顯示物件的定義 FlyoutMenuPage ，其類型 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>

在此範例中，飛出視窗頁面是由 CollectionView 填入數據的，方法是將其 ItemsSource 屬性設定為對象的陣列 FlyoutPageItem 。下列範例顯示類別的定義 FlyoutPageItem ：

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

DataTemplate 會指派給 CollectionView.ItemTemplate 屬性，以顯示每個 FlyoutPageItem。 DataTemplate 包含 Grid，其包含 Image 和 Label。針對每個 FlyoutPageItem，Image 會顯示 IconSource 屬性值，而 Label 顯示 Title 屬性值。此外，飛出視窗頁面已設定其 Title 和 IconImageSource 屬性。圖示會出現在詳細資料頁面上，前提是詳細資料頁面有標題列。

注意

Flyout 頁面必須設定其 Title 屬性，否則會發生例外狀況。

下列螢幕快照顯示產生的飛出視窗：

.NET MAUI flyout.

建立並顯示詳細數據頁面

FlyoutMenuPage物件包含CollectionView從類別參考的 MainPage 。這可讓 MainPage 類別註冊事件的處理程式 SelectionChanged 。這可讓物件將 MainPage 屬性設定 Detail 為代表所選取 CollectionView 項目的頁面。下列範例顯示事件處理程式：

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

在此範例中OnSelectionChanged，事件處理程式會從物件擷CollectionView取 CurrentSelection ，並將詳細數據頁面設定為儲存在屬性FlyoutPageItem中的TargetType頁面類型的實例。如果不是使用分割版面配置，則詳細數據頁面會藉由將屬性設定 FlyoutPage.IsPresented 為 false來 FlyoutPage 顯示。 FlyoutPage使用分割版面配置時，飛出視窗和詳細數據頁面都會顯示，因此不需要設定 FlyoutPage.IsPresented 屬性。

版面配置行為

顯示 FlyoutPage 飛出視窗和詳細數據頁面的方式取決於應用程式執行裝置的尺寸、裝置的方向，以及屬性的值 FlyoutLayoutBehavior 。此屬性應該設定為列舉值 FlyoutLayoutBehavior ，其定義下列成員：

Default – 頁面會使用平台預設值來顯示。
Popover – 詳細數據頁面涵蓋範圍，或部分涵蓋飛出視窗頁面。
Split – 飛出視窗頁面會顯示在左側，而詳細數據頁面位於右側。
SplitOnLandscape – 當裝置處於橫向方向時，會使用分割畫面。
SplitOnPortrait – 當裝置為直向時，會使用分割畫面。

下列範例示範如何在上FlyoutPage設定 FlyoutLayoutBehavior 屬性：

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

重要

屬性的值 FlyoutLayoutBehavior 只會影響在平板電腦或桌面上執行的應用程式。在手機上執行的應用程式一律具有 Popover 行為。

共用方式為

FlyoutPage

建立 FlyoutPage

建立並顯示詳細數據頁面

版面配置行為

其他資源