FlyoutPage
샘플 찾아보기
.NET 다중 플랫폼 앱 UI(.NET MAUI) FlyoutPage 는 항목이 표시되는 플라이아웃 페이지와 플라이아웃 페이지의 항목에 대한 세부 정보를 제공하는 세부 정보 페이지 등 두 개의 관련 정보 페이지를 관리하는 페이지입니다.
A FlyoutPage 에는 다음과 같은 두 가지 레이아웃 동작이 있습니다.
- 팝오버 레이아웃에서 세부 정보 페이지는 플라이아웃 페이지를 포함하거나 부분적으로 덮습니다. 플라이아웃 페이지에서 항목을 선택하면 해당 세부 정보 페이지로 이동합니다. 휴대폰에서 실행되는 앱은 항상 이 레이아웃 동작을 사용합니다.
- 분할 레이아웃에서 플라이아웃 페이지가 왼쪽에 표시되고 세부 정보 페이지가 오른쪽에 표시됩니다. 태블릿 또는 데스크톱에서 실행되는 앱은 Windows에서 기본적으로 이 레이아웃 동작을 사용할 수 있습니다.
레이아웃 동작에 대한 자세한 내용은 레이아웃 동작을 참조 하세요.
FlyoutPage는 다음 속성을 정의합니다.
Detail형식 Page의 플라이아웃 페이지에서 선택한 항목에 대해 표시되는 세부 정보 페이지를 정의합니다.Flyout형식 Page의 플라이아웃 페이지를 정의합니다.FlyoutLayoutBehavior형식FlyoutLayoutBehavior의 플라이아웃 및 세부 정보 페이지의 레이아웃 동작을 나타냅니다.IsGestureEnabled형식bool의 경우 살짝 밀기 제스처가 플라이아웃 페이지와 세부 정보 페이지 간에 전환되는지 여부를 결정합니다. 이 속성의 기본값은true입니다.IsPresented형식bool의 플라이아웃 또는 세부 정보 페이지가 표시되는지 여부를 결정합니다. 이 속성의 기본값은 세부 정보 페이지를 표시하는 값입니다false. 플라이아웃 페이지를 표시하도록true설정해야 합니다.
, IsPresented및 FlyoutLayoutBehavior 속성은 IsGestureEnabled개체에 의해 BindableProperty 지원됩니다. 즉, 데이터 바인딩의 대상이 될 수 있으며 스타일이 지정됩니다.
FlyoutPage 또한 속성이 IsPresentedChanged 값을 변경할 때 IsPresented 발생하는 이벤트를 정의합니다.
Warning
FlyoutPage 는 .NET MAUI Shell 앱과 호환되지 않으며 셸 앱에서 사용 FlyoutPage 하려고 하면 예외가 throw됩니다. Shell 앱에 대한 자세한 내용은 Shell을 참조하세요.
FlyoutPage 만들기
플라이아웃 페이지를 만들려면 개체를 FlyoutPage 만들고 개체 및 Detail 속성을 설정합니다Flyout. 속성을 Flyout 개체로 ContentPage 설정해야 하며 속성은 Detail 또는 NavigationPageContentPage 개체로 TabbedPage설정해야 합니다. 이렇게 하면 모든 플랫폼에서 일관된 사용자 환경을 보장하는 데 도움이 됩니다.
Important
A FlyoutPage 는 앱의 루트 페이지로 설계되었으며 다른 페이지 형식에서 자식 페이지로 사용하면 예기치 않은 일관되지 않은 동작이 발생할 수 있습니다.
다음 예제에서는 및 Detail 속성을 설정하는 Flyout 방법을 보여줍니다FlyoutPage.
<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 속성은 포함하는 ContentPage 개체로 NavigationPage 설정됩니다.
다음 예제에서는 형식ContentPage인 FlyoutMenuPage 개체의 정의를 보여줍니다.
<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>
이 예제에서 플라이아웃 페이지는 해당 속성을 개체 배열 FlyoutPageItem 로 설정 ItemsSource 하여 데이터로 채워진 페이지로 구성 CollectionView 됩니다. 다음 예제에서는 클래스의 정의를 보여줍니다.FlyoutPageItem
public class FlyoutPageItem
{
public string Title { get; set; }
public string IconSource { get; set; }
public Type TargetType { get; set; }
}
DataTemplate은 각각의 FlyoutPageItem을 표시하기 위해 CollectionView.ItemTemplate 속성에 할당됩니다. DataTemplate에는 Image 및 Label로 구성된 Grid이 포함됩니다. Image에는 IconSource 속성 값이 표시되고, Label에는 각 FlyoutPageItem에 대한 Title 속성 값이 표시됩니다. 또한 플라이아웃 페이지에는 해당 Title 페이지와 IconImageSource 속성이 설정됩니다. 세부 정보 페이지에 제목 표시줄이 있으면 아이콘이 세부 정보 페이지에 표시됩니다.
참고 항목
Flyout 페이지에는 해당 Title 속성이 설정되어 있어야 하며, 그렇지 않으면 예외가 발생합니다.
다음 스크린샷은 결과 플라이아웃을 보여 줍니다.
세부 정보 페이지 만들기 및 표시
개체에는 FlyoutMenuPage CollectionView 클래스에서 참조되는 개체가 MainPage 포함됩니다. 이렇게 하면 클래스가 MainPage 이벤트에 대한 처리기를 등록할 수 있습니다 SelectionChanged . 이렇게 하면 개체가 MainPage 선택한 CollectionView 항목을 나타내는 페이지로 속성을 설정할 Detail 수 있습니다. 다음 예제에서는 이벤트 처리기를 보여줍니다.
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 에서 이벤트 처리기는 CurrentSelection 개체에서 CollectionView 검색하고 세부 정보 페이지를 해당 속성에 저장된 페이지 형식의 FlyoutPageItem인스턴스로 TargetType 설정합니다. 분할 레이아웃을 사용하지 않는 경우 FlyoutPage 속성을 false로 설정 FlyoutPage.IsPresented 하여 세부 정보 페이지가 표시됩니다. FlyoutPage 분할 레이아웃을 사용하는 경우 플라이아웃 및 세부 정보 페이지가 모두 표시되므로 속성을 설정할 FlyoutPage.IsPresented 필요가 없습니다.
레이아웃 동작
FlyoutPage 플라이아웃 및 세부 정보 페이지를 표시하는 방법은 앱이 실행 중인 디바이스의 폼 팩터, 디바이스의 방향 및 속성 값 FlyoutLayoutBehavior 에 따라 달라집니다. 이 속성은 다음 멤버를 정의하는 열거형 값 FlyoutLayoutBehavior 으로 설정해야 합니다.
Default– 플랫폼 기본값을 사용하여 페이지가 표시됩니다.Popover– 세부 정보 페이지가 플라이아웃 페이지를 포함하거나 부분적으로 다룹니다.Split– 플라이아웃 페이지가 왼쪽에 표시되고 세부 정보 페이지가 오른쪽에 있습니다.SplitOnLandscape– 디바이스가 가로 방향일 때 분할 화면이 사용됩니다.SplitOnPortrait– 디바이스가 세로 방향일 때 분할 화면이 사용됩니다.
다음 예제에서는 다음에서 속성을 설정하는 FlyoutLayoutBehavior 방법을 보여줍니다.FlyoutPage
<FlyoutPage ...
FlyoutLayoutBehavior="Split">
...
</FlyoutPage>
Important
속성 값 FlyoutLayoutBehavior 은 태블릿 또는 데스크톱에서 실행되는 앱에만 영향을 줍니다. 휴대폰에서 실행되는 앱에는 항상 동작이 있습니다 Popover .
.NET MAUI