Xamarin.Forms Shell 플라이아웃Xamarin.Forms Shell Flyout

샘플 다운로드 샘플 다운로드Download Sample Download the sample

플라이아웃은 셸 애플리케이션의 루트 메뉴이며, 아이콘을 통해 또는 화면 측면에서 살짝 밀어 액세스할 수 있습니다.The flyout is the root menu for a Shell application, and is accessible through an icon or by swiping from the side of the screen. 플라이아웃은 선택적 헤더, 플라이아웃 항목 및 선택적 메뉴 항목으로 구성됩니다.The flyout consists of an optional header, flyout items, and optional menu items:

셸 주석 처리 플라이아웃의 스크린샷Screenshot of a Shell annotated flyout

필요한 경우 Shell.FlyoutBackgroundColor 바인딩 가능 속성을 통해 플라이아웃의 배경색을 Color로 설정할 수 있습니다.If required, the background color of the flyout can be set to a Color through the Shell.FlyoutBackgroundColor bindable property. 이 속성은 CSS(CSS 스타일시트)에서 설정할 수도 있습니다.This property can also be set from a Cascading Style Sheet (CSS). 자세한 내용은 Xamarin.Forms 셸 특정 속성을 참조하세요.For more information, see Xamarin.Forms Shell specific properties.

플라이아웃 아이콘Flyout icon

기본적으로 셸 애플리케이션에는 누르면 플라이아웃을 여는 햄버거 아이콘이 있습니다.By default, Shell applications have a hamburger icon which, when pressed, opens the flyout. ImageSource 형식의 Shell.FlyoutIcon 바인딩 가능 속성을 적절한 아이콘으로 설정하여 이 아이콘을 변경할 수 있습니다.This icon can be changed by setting the Shell.FlyoutIcon bindable property, of type ImageSource, to an appropriate icon:

<Shell ...
       FlyoutIcon="flyouticon.png">
    ...       
</Shell>

플라이아웃 동작Flyout behavior

플라이아웃은 햄버거 아이콘을 통해 또는 화면 측면에서 살짝 밀어 액세스할 수 있습니다.The flyout can be accessed through the hamburger icon or by swiping from the side of the screen. 그러나 이 동작은 Shell.FlyoutBehavior 연결된 속성을 FlyoutBehavior 열거형 멤버 중 하나로 설정하여 변경할 수 있습니다.However, this behavior can be changed by setting the Shell.FlyoutBehavior attached property to one of the FlyoutBehavior enumeration members:

  • Disabled – 사용자가 플라이아웃을 열 수 없음을 나타냅니다.Disabled – indicates that the flyout can't be opened by the user.
  • Flyout – 사용자가 플라이아웃을 열고 닫을 수 있음을 나타냅니다.Flyout – indicates that the flyout can be opened and closed by the user. 이 값은 FlyoutBehavior 속성의 기본값입니다.This is the default value for the FlyoutBehavior property.
  • Locked – 사용자가 플라이아웃을 닫을 수 없고 콘텐츠를 겹치지 않음을 나타냅니다.Locked – indicates that the flyout can't be closed by the user, and that it doesn't overlap content.

다음 예제에서는 플라이아웃을 사용하지 않도록 설정하는 방법을 보여 줍니다.The following example shows how to disable the flyout:

<Shell ...
       FlyoutBehavior="Disabled">
    ...
</Shell>

참고

FlyoutBehavior 연결된 속성은 Shell, FlyoutItem, ShellContent 및 페이지 개체에서 설정하여 기본 플라이아웃 동작을 재정의할 수 있습니다.The FlyoutBehavior attached property can be set on Shell, FlyoutItem, ShellContent, and page objects, to override the default flyout behavior.

또한 플라이아웃은 현재 표시되는지 여부에 관계없이 Shell.FlyoutIsPresented 바인딩 가능 속성을 boolean 값으로 설정하여 프로그래밍 방식으로 열고 닫을 수 있습니다.In addition, the flyout can be programmatically opened and closed by setting the Shell.FlyoutIsPresented bindable property to a boolean value that indicates whether the flyout is currently visible:

Shell.Current.FlyoutIsPresented = false;

플라이아웃 헤더Flyout header

플라이아웃 헤더는 필요에 따라 플라이아웃 상단에 표시되는 콘텐츠로, 해당 모양은 Shell.FlyoutHeader 속성 값을 통해 설정할 수 있는 object에 의해 정의됩니다.The flyout header is the content that optionally appears at the top of the flyout, with its appearance being defined by an object that can be set through the Shell.FlyoutHeader property value:

<Shell.FlyoutHeader>
    <controls:FlyoutHeader />
</Shell.FlyoutHeader>

FlyoutHeader 형식은 다음 예제에서 확인할 수 있습니다.The FlyoutHeader type is shown in the following example:

<ContentView xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xaminals.Controls.FlyoutHeader"
             HeightRequest="200">
    <Grid BackgroundColor="Black">
        <Image Aspect="AspectFill"
               Source="xamarinstore.jpg"
               Opacity="0.6" />
        <Label Text="Animals"
               TextColor="White"
               FontAttributes="Bold"
               HorizontalTextAlignment="Center"
               VerticalTextAlignment="Center" />
    </Grid>
</ContentView>

이를 통해 다음 플라이아웃 헤더가 생성됩니다.This results in the following flyout header:

플라이아웃 헤더의 스크린샷Screenshot of the flyout header

또는 Shell.FlyoutHeaderTemplate 속성을 DataTemplate으로 설정하여 플라이아웃 헤더 모양을 정의할 수 있습니다.Alternatively, the flyout header appearance can be defined by setting the Shell.FlyoutHeaderTemplate property to a DataTemplate:

<Shell.FlyoutHeaderTemplate>
    <DataTemplate>
        <Grid BackgroundColor="Black"
              HeightRequest="200">
            <Image Aspect="AspectFill"
                   Source="xamarinstore.jpg"
                   Opacity="0.6" />
            <Label Text="Animals"
                   TextColor="White"
                   FontAttributes="Bold"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center" />
        </Grid>            
    </DataTemplate>
</Shell.FlyoutHeaderTemplate>

기본적으로 플라이아웃 헤더는 플라이아웃에 고정되며 항목이 충분하면 아래 콘텐츠가 스크롤됩니다.By default, the flyout header will be fixed in the flyout while the content below will scroll if there are enough items. 그러나 이 동작은 Shell.FlyoutHeaderBehavior 바인딩 가능 속성을 FlyoutHeaderBehavior 열거형 멤버 중 하나로 설정하여 변경할 수 있습니다.However, this behavior can be changed by setting the Shell.FlyoutHeaderBehavior bindable property to one of the FlyoutHeaderBehavior enumeration members:

  • Default -플랫폼의 기본 동작이 사용됨을 나타냅니다.Default – indicates that the default behavior for the platform will be used. 이 값은 FlyoutHeaderBehavior 속성의 기본값입니다.This is the default value of the FlyoutHeaderBehavior property.
  • Fixed – 플라이아웃 헤더가 항상 표시되고 변경되지 않음을 나타냅니다.Fixed – indicates that the flyout header remains visible and unchanged at all times.
  • Scroll – 사용자가 항목을 스크롤할 때 플라이아웃 헤더가 보기 밖으로 스크롤됨을 나타냅니다.Scroll – indicates that the flyout header scrolls out of view as the user scrolls the items.
  • CollapseOnScroll – 사용자가 항목을 스크롤할 때 플라이아웃 헤더가 제목으로만 축소됨을 나타냅니다.CollapseOnScroll – indicates that the flyout header collapses to a title only, as the user scrolls the items.

다음 예제에서는 사용자가 스크롤할 때 플라이아웃 헤더를 축소하는 방법을 보여 줍니다.The following example shows how to collapse the flyout header as the user scrolls:

<Shell ...
       FlyoutHeaderBehavior="CollapseOnScroll">
    ...
</Shell>

플라이아웃 배경 이미지Flyout background image

플라이아웃은 플라이아웃 헤더 바로 아래, 플라이아웃 항목과 메뉴 항목 뒤에 표시되는 선택적 배경 이미지를 포함할 수 있습니다.The flyout can have an optional background image, which appears beneath the flyout header and behind any flyout items and menu items. ImageSource 형식의 FlyoutBackgroundImage 바인딩 가능 속성을 파일, 포함 리소스, URI 또는 스트림으로 설정하여 배경 이미지를 지정할 수 있습니다.The background image can be specified by setting the FlyoutBackgroundImage bindable property, of type ImageSource, to a file, embedded resource, URI, or stream.

Aspect 형식의 FlyoutBackgroundImageAspect 바인딩 가능 속성을 Aspect 열거형 멤버 중 하나로 설정하여 배경 이미지의 가로 세로 비율을 구성할 수 있습니다.The aspect ratio of the background image can be configured by setting the FlyoutBackgroundImageAspect bindable property, of type Aspect, to one of the Aspect enumeration members:

  • AspectFill - 이미지가 가로 세로 비율을 유지하면서 표시 영역을 채우도록 이미지를 자릅니다.AspectFill - clips the image so that it fills the display area while preserving the aspect ratio.
  • AspectFit - 이미지가 표시 영역에 맞춰지도록, 필요에 따라 이미지의 너비 또는 높이를 기준으로 위쪽/아래쪽 또는 측면에 공백을 추가하여 이미지 레터박스를 지정합니다.AspectFit - letterboxes the image, if required, so that the image fits into the display area, with blank space added to the top/bottom or sides depending on whether the image is wide or tall.
  • Fill - 완전히 정확하게 표시 영역을 채우도록 이미지를 늘립니다.Fill - stretches the image to completely and exactly fill the display area. 이로 인해 이미지가 왜곡될 수 있습니다.This may result in image distortion.

기본적으로 FlyoutBackgroundImageAspect 속성은 AspectFit로 설정됩니다.By default, the FlyoutBackgroundImageAspect property will be set to AspectFit.

다음 예제에서는 이러한 속성을 설정하는 방법을 보여 줍니다.The following example shows setting these properties:

<Shell ...
       FlyoutBackgroundImage="photo.jpg"
       FlyoutBackgroundImageAspect="AspectFill">
    ...
</Shell>

이 설정에 따라 배경 이미지가 플라이아웃에 표시됩니다.This results in a background image appearing in the flyout:

플라이아웃 배경 이미지 스크린샷Screenshot of a flyout background image

플라이아웃 항목Flyout items

애플리케이션의 탐색 패턴이 플라이아웃을 포함하는 경우 Shell 개체는 각 FlyoutItem 개체가 플라이아웃의 항목을 나타내는 FlyoutItem 개체를 하나 이상 포함해야 합니다.When the navigation pattern for an application includes a flyout, the subclassed Shell object must contain one or more FlyoutItem objects, with each FlyoutItem object representing an item on the flyout. FlyoutItem 개체는 Shell 개체의 자식이어야 합니다.Each FlyoutItem object should be a child of the Shell object.

다음 예제에서는 플라이아웃 헤더 및 두 플라이아웃 항목을 포함하는 플라이아웃을 만듭니다.The following example creates a flyout containing a flyout header and two flyout items:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    <FlyoutItem Title="Cats"
                Icon="cat.png">
        <Tab>
            <ShellContent>
                <views:CatsPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
    <FlyoutItem Title="Dogs"
                Icon="dog.png">
        <Tab>
            <ShellContent>
                <views:DogsPage />
            </ShellContent>
        </Tab>
    </FlyoutItem>
</Shell>

이 예제에서는 각 ContentPage는 플라이아웃 항목을 통해서만 액세스할 수 있습니다.In this example, each ContentPage can only be accessed through flyout items:

iOS 및 Android에서 플라이아웃 항목이 있는 셸 2페이지 앱의 스크린샷Screenshot of a Shell two page app with flyout items, on iOS and Android

참고

플라이아웃 헤더가 없으면 플라이아웃 항목이 플라이아웃 위쪽에 나타납니다.When a flyout header isn't present, flyout items appear at the top of the flyout. 플라이아웃 헤더가 있으면 플라이아웃 항목이 플라이아웃 헤더 아래에 나타납니다.Otherwise, they appear below the flyout header.

셸에는 시각적 트리에 추가적인 뷰를 도입하지 않고도 셸 시각적 계층 구조를 단순화할 수 있는 암시적 변환 연산자가 있습니다.Shell has implicit conversion operators that enable the Shell visual hierarchy to be simplified, without introducing additional views into the visual tree. 서브클래싱된 Shell 개체는 FlyoutItem 또는 TabBar 개체만 포함할 수 있고, 이 개체도 개체만 포함할 수 있고, 이 개체도 Tab 개체만 포함할 수 있고, 이 개체도 ShellContent 개체만 포함할 수 있기 때문에 이 작업이 가능합니다.This is possible because a subclassed Shell object can only ever contain FlyoutItem objects or a TabBar object, which can only ever contain Tab objects, which can only ever contain ShellContent objects. 이 암시적 변환 연산자를 사용하여 이전 예제에서 FlyoutItem, TabShellContent 개체를 제거할 수 있습니다.These implicit conversion operators can be used to remove the FlyoutItem, Tab, and ShellContent objects from the previous example:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       x:Class="Xaminals.AppShell">
    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>
    <views:CatsPage IconImageSource="cat.png" />
    <views:DogsPage IconImageSource="dog.png" />
</Shell>

이 암시적 변환은 자동으로 각 ContentPage 개체를 ShellContent 개체로 래핑하고, 이 개체는 Tab 개체로 래핑되고, 이 개체는 FlyoutItem 개체로 래핑됩니다.This implicit conversion automatically wraps each ContentPage object in ShellContent objects, which are wrapped in Tab objects, which are wrapped in FlyoutItem objects.

중요

셸 애플리케이션에서 ShellContent 개체의 자식인 각 ContentPage는 애플리케이션을 시작하는 동안 만들어집니다.In a Shell application, each ContentPage that's a child of a ShellContent object is created during application startup. 이 방법을 사용하여 다른 ShellContent 개체를 추가하면 애플리케이션을 시작하는 동안 추가 페이지가 생성되어 시작 환경의 성능이 저하될 수 있습니다.Adding additional ShellContent objects using this approach will result in additional pages being created during application startup, which can lead to a poor startup experience. 그러나 셸은 탐색에 대한 응답으로 요청 시 페이지를 만들 수도 있습니다.However, Shell is also capable of creating pages on demand, in response to navigation. 자세한 내용은 Xamarin.Forms Shell 탭 가이드에서 효율적인 페이지 로딩을 참조하세요.For more information, see Efficient page loading in the Xamarin.Forms Shell Tabs guide.

FlyoutItem 클래스FlyoutItem class

FlyoutItem 클래스에는 플라이아웃 항목의 및 동작을 제어하는 다음 속성이 포함됩니다.The FlyoutItem class includes the following properties that control flyout item appearance and behavior:

  • FlyoutDisplayOptions 형식의 FlyoutDisplayOptions - 항목 및 해당 자식이 플라이아웃에 표시되는 방식을 정의합니다.FlyoutDisplayOptions, of type FlyoutDisplayOptions, defines how the item and its children are displayed in the flyout. 기본값은 AsSingleItem입니다.The default value is AsSingleItem.
  • Tab 형식의 CurrentItem - 선택된 항목입니다.CurrentItem, of type Tab, the selected item.
  • IList<Tab> 형식의 Items - FlyoutItem 내의 모든 탭을 정의합니다.Items, of type IList<Tab>, defines all of the tabs within a FlyoutItem.
  • ImageSource 형식의 FlyoutIcon - 항목에 사용할 아이콘입니다.FlyoutIcon, of type ImageSource, the icon to use for the item. 이 속성을 설정하지 않으면 Icon 속성 값이 대신 사용됩니다.If this property is unset, it will fallback to using the Icon property value.
  • ImageSource 형식의 Icon - 플라이아웃이 아닌 크롬의 일부로 표시할 아이콘을 정의합니다.Icon, of type ImageSource, defines the icon to display in parts of the chrome that are not the flyout.
  • boolean 형식의 IsChecked - 플라이아웃에서 현재 항목을 강조 표시할지 여부를 정의합니다.IsChecked, of type boolean, defines if the item is currently highlighted in the flyout.
  • boolean 형식의 IsEnabled - 크롬에서 항목을 선택할 수 있는지 여부를 정의합니다.IsEnabled, of type boolean, defines if the item is selectable in the chrome.
  • bool 형식의 IsTabStop - FlyoutItem이 탭 탐색에 포함되는지 여부를 나타냅니다.IsTabStop, of type bool, indicates whether a FlyoutItem is included in tab navigation. 해당 기본값은 true이며, 해당 값이 false인 경우 FlyoutItemTabIndex가 설정되었는지 여부에 관계없이 탭 탐색 인프라에서 무시됩니다.Its default value is true, and when its value is false the FlyoutItem is ignored by the tab-navigation infrastructure, irrespective if a TabIndex is set.
  • int 형식의 TabIndex - 사용자가 Tab 키를 눌러 항목을 탐색할 때 FlyoutItem 개체가 포커스를 받는 순서를 나타냅니다.TabIndex, of type int, indicates the order in which FlyoutItem objects receive focus when the user navigates through items by pressing the Tab key. 속성의 기본값은 0입니다.The default value of the property is 0.
  • string 형식의 Title - UI에 표시할 제목입니다.Title, of type string, the title to display in the UI.
  • string 형식의 Route - 항목을 처리하는 데 사용되는 문자열입니다.Route, of type string, the string used to address the item.

Route 속성을 제외한 이 모든 속성은 BindableProperty 개체에서 지원되며, 이는 속성이 데이터 바인딩의 대상이 될 수 있음을 의미합니다.All of these properties, except the Route property, are backed by BindableProperty objects, which means that the properties can be targets of data bindings.

참고

서브클래싱된 Shell 개체의 모든 FlyoutItem 개체는 플라이아웃에 표시될 항목 목록을 정의하는 Shell.Items 컬렉션에 추가됩니다.All FlyoutItem objects in a subclassed Shell object are added to the Shell.Items collection, which defines the list of items that will be shown in the flyout.

또한 FlyoutItem 클래스는 다음 재정의 가능한 메서드를 공개합니다.In addition, the FlyoutItem class exposes the following overridable methods:

  • OnTabIndexPropertyChanged - TabIndex 속성이 변경될 때마다 호출됩니다.OnTabIndexPropertyChanged, that's called whenever the TabIndex property changes.
  • OnTabStopPropertyChanged - IsTabStop 속성이 변경될 때마다 호출됩니다.OnTabStopPropertyChanged, that's called whenever the IsTabStop property changes.
  • TabIndexDefaultValueCreator - int를 반환하고 TabIndex 속성의 기본값을 설정하기 위해 호출됩니다.TabIndexDefaultValueCreator, returns an int, and is called to set the default value of the TabIndex property.
  • TabStopDefaultValueCreator - bool을 반환하고 TabStop 속성의 기본값을 설정하기 위해 호출됩니다.TabStopDefaultValueCreator, returns a bool, and is called to set the default value of the TabStop property.

플라이아웃 표시 옵션Flyout display options

FlyoutDisplayOptions 열거형은 다음 멤버를 정의합니다.The FlyoutDisplayOptions enumeration defines the following members:

  • AsSingleItem - 항목이 단일 항목으로 표시됨을 나타냅니다.AsSingleItem, indicates that the item will be visible as a single item.
  • AsMultipleItems - 항목 및 해당 자식이 플라이아웃에 항목 그룹으로 표시됨을 나타냅니다.AsMultipleItems, indicates that the item and its children will be visible in the flyout as a group of items.

FlyoutItem.FlyoutDisplayOptions 속성을 AsMultipleItems로 설정하면 FlyoutItem 내의 각 Tab에 대한 플라이아웃 항목이 생성됩니다.By setting the FlyoutItem.FlyoutDisplayOptions property to AsMultipleItems, a flyout item for each Tab within a FlyoutItem will be created:

<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:controls="clr-namespace:Xaminals.Controls"
       xmlns:views="clr-namespace:Xaminals.Views"
       FlyoutHeaderBehavior="CollapseOnScroll"
       x:Class="Xaminals.AppShell">

    <Shell.FlyoutHeader>
        <controls:FlyoutHeader />
    </Shell.FlyoutHeader>

    <FlyoutItem Title="Animals"
                FlyoutDisplayOptions="AsMultipleItems">
        <Tab Title="Domestic"
             Icon="paw.png">
            <ShellContent Title="Cats"
                          Icon="cat.png"
                          ContentTemplate="{DataTemplate views:CatsPage}" />
            <ShellContent Title="Dogs"
                          Icon="dog.png"
                          ContentTemplate="{DataTemplate views:DogsPage}" />
        </Tab>
        <ShellContent Title="Monkeys"
                      Icon="monkey.png"
                      ContentTemplate="{DataTemplate views:MonkeysPage}" />
        <ShellContent Title="Elephants"
                      Icon="elephant.png"
                      ContentTemplate="{DataTemplate views:ElephantsPage}" />  
        <ShellContent Title="Bears"
                      Icon="bear.png"
                      ContentTemplate="{DataTemplate views:BearsPage}" />
    </FlyoutItem>

    <ShellContent Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />    
</Shell>

이 예제에서 플라이아웃 항목은 FlyoutItem 개체의 자식인 Tab 개체 및 FlyoutItem 개체의 자식인 ShellContent 개체에 대해 생성됩니다.In this example, flyout items are created for the Tab object that's a child of the FlyoutItem object, and the ShellContent objects that are children of the FlyoutItem object. FlyoutItem 개체의 자식인 각 ShellContent 개체가 자동으로 Tab 개체로 래핑되기 때문에 이 작업이 수행됩니다.This occurs because each ShellContent object that's a child of the FlyoutItem object is automatically wrapped in a Tab object. 또한 플라이아웃 항목은 최종 ShellContent 개체에 대해 생성되고, 이 개체는 Tab 개체로 래핑된 후 FlyoutItem 개체로 래핑됩니다.In addition, a flyout item is created for the final ShellContent object, which is wrapped in a Tab object, and then in a FlyoutItem object.

이를 통해 다음 플라이아웃 항목이 생성됩니다.This results in the following flyout items:

iOS 및 Android에서 FlyoutItem 개체가 포함된 플라이아웃의 스크린샷Screenshot of flyout containing FlyoutItem objects, on iOS and Android

FlyoutItem 모양 정의Define FlyoutItem appearance

FlyoutItem의 모양은 Shell.ItemTemplate에 연결된 속성을 DataTemplate으로 설정하여 사용자 지정할 수 있습니다.The appearance of each FlyoutItem can be customized by setting the Shell.ItemTemplate attached property to a DataTemplate:

<Shell ...>
    ...
    <Shell.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding FlyoutIcon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Title}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.ItemTemplate>
</Shell>

이 예제에서는 각 FlyoutItem 개체의 제목을 기울임꼴로 표시합니다.This example displays the title of each FlyoutItem object in italics:

iOS 및 Android에서 템플릿 기반 FlyoutItem 개체의 스크린샷Screenshot of templated FlyoutItem objects, on iOS and Android

참고

셸은 ItemTemplateBindingContextTitleFlyoutIcon 속성을 제공합니다.Shell provides the Title and FlyoutIcon properties to the BindingContext of the ItemTemplate.

FlyoutItem 탭 순서FlyoutItem tab order

기본적으로 FlyoutItem 개체의 탭 순서는 XAML에 나열되거나 프로그래밍 방식으로 자식 컬렉션에 추가되는 순서와 동일합니다.By default, the tab order of FlyoutItem objects is the same order in which they are listed in XAML, or programmatically added to a child collection. 이 순서는 FlyoutItem 개체를 키보드로 탐색하는 순서이고 종종 이 기본 순서는 최적의 순서입니다.This order is the order in which the FlyoutItem objects will be navigated through with a keyboard, and often this default order is the best order.

사용자가 Tab 키를 눌러 항목을 탐색할 때 FlyoutItem 개체가 포커스를 받는 순서를 나타내는 FlyoutItem.TabIndex 속성을 설정하여 기본 탭 순서를 변경할 수 있습니다.The default tab order can be changed by setting the FlyoutItem.TabIndex property, which indicates the order in which FlyoutItem objects receive focus when the user navigates through items by pressing the Tab key. 속성의 기본값은 0이며 모든 int 값으로 설정할 수 있습니다.The default value of the property is 0, and it can be set to any int value.

다음 규칙은 기본 탭 순서를 사용하거나 TabIndex 속성을 설정할 때 적용됩니다.The following rules apply when using the default tab order, or setting the TabIndex property:

  • TabIndex가 0과 동일한 FlyoutItem 개체를 XAML 또는 자식 컬렉션의 선언 순서에 따라 탭 순서에 추가합니다.FlyoutItem objects with a TabIndex equal to 0 are added to the tab order based on their declaration order in XAML or child collections.
  • TabIndex가 0보다 큰 FlyoutItem 개체를 해당 TabIndex 값에 따라 탭 순서에 추가합니다.FlyoutItem objects with a TabIndex greater than 0 are added to the tab order based on their TabIndex value.
  • TabIndex가 0 미만인 FlyoutItem 개체는 탭 순서에 추가되며 모든 0 값 앞에 나타납니다.FlyoutItem objects with a TabIndex less than 0 are added to the tab order and appear before any zero value.
  • TabIndex에서의 충돌은 선언 순서에 따라 해결됩니다.Conflicts on a TabIndex are resolved by declaration order.

탭 순서를 정의한 후 Tab 키를 누르면 TabIndex 오름차순으로 FlyoutItem 개체를 통해 포커스가 순환되며 마지막 개체에 도달하면 시작 부분으로 래핑됩니다.After defining a tab order, pressing the Tab key will cycle the focus through FlyoutItem objects in ascending TabIndex order, wrapping around to the beginning once the final object is reached.

FlyoutItem 개체의 탭 순서를 설정하는 것 외에 탭 순서에서 일부 개체를 제외해야 할 수도 있습니다.In addition to setting the tab order of FlyoutItem objects, it may be necessary to exclude some objects from the tab order. 이 작업은 FlyoutItem가 탭 탐색에 포함됐는지 여부를 나타내는 FlyoutItem.IsTabStop 속성을 통해 달성할 수 있습니다.This can be achieved with the FlyoutItem.IsTabStop property, which indicates whether a FlyoutItem is included in tab navigation. 해당 기본값은 true이며, 해당 값이 false인 경우 FlyoutItemTabIndex가 설정되었는지 여부에 관계없이 탭 탐색 인프라에서 무시됩니다.Its default value is true, and when its value is false the FlyoutItem is ignored by the tab-navigation infrastructure, irrespective if a TabIndex is set.

현재 FlyoutItem 설정Set the current FlyoutItem

Shell 클래스에는 현재 선택된 FlyoutItem을 나타내는 FlyoutItem 형식의 CurrentItem이라는 바인딩 가능한 속성이 있습니다.The Shell class has a bindable property named CurrentItem, of type FlyoutItem, that represents the currently selected FlyoutItem. 셸 애플리케이션이 처음 실행될 때 이 속성은 서브클래싱된 Shell 개체의 첫 번째 FlyoutItem으로 설정됩니다.When a Shell application is first run, this property will be set to the first FlyoutItem in the subclassed Shell object. 그러나 이 속성은 다음 예제에 표시된 대로 다른 FlyoutItem으로 설정될 수 있습니다.However, the property can be set to another FlyoutItem, as shown in the following example:

<Shell ...
       CurrentItem="{x:Reference aboutItem}">
    <FlyoutItem Title="Animals"
                FlyoutDisplayOptions="AsMultipleItems">
        ...
    </FlyoutItem>
    <ShellContent x:Name="aboutItem"
                  Title="About"
                  Icon="info.png"
                  ContentTemplate="{DataTemplate views:AboutPage}" />
</Shell>

이 코드는 aboutItem라는 ShellContent 개체를 CurrentItem 속성으로 설정하여 표시되도록 합니다.This code sets the ShellContent object named aboutItem as the CurrentItem property, resulting in it being displayed. 이 예제에서 암시적 변환은 ShellContent 개체를 Tab 개체로 래핑하는 데 사용되며, 이 개체는 FlyoutItem 개체로 래핑됩니다.In this example, an implicit conversion is used to wrap the ShellContent object in a Tab object, which is wrapped in a FlyoutItem object.

해당하는 C# 코드는 다음과 같습니다.The equivalent C# code is:

Shell.Current.CurrentItem = aboutItem;

메뉴 항목은 플라이아웃에 선택적으로 추가될 수 있으며 각 메뉴 항목은 MenuItem 개체로 표시됩니다.Menu items can be optionally added to the flyout, and each menu item is represented by a MenuItem object. 플라이아웃에서 MenuItem 개체의 위치는 Shell 시각적 계층 구조에서의 선언 순서에 따라 달라집니다.The position of MenuItem objects on the flyout is dependent upon their declaration order in the Shell visual hierarchy. 따라서 FlyoutItem 개체가 플라이아웃 상단에 나타나기 전에 선언된 MenuItem 개체 및 FlyoutItem 개체 후에 선언된 MenuItem 개체는 플라이아웃 하단에 나타납니다.Therefore, any MenuItem objects declared before FlyoutItem objects will appear at the top of the flyout, and any MenuItem objects declared after FlyoutItem objects will appear at the bottom of the flyout.

참고

MenuItem 클래스에는 Clicked 이벤트 및 Command 속성이 포함됩니다.The MenuItem class has a Clicked event, and a Command property. 따라서 MenuItem 개체를 통해 탭되는 MenuItem에 대한 응답으로 작업을 실행하는 시나리오를 실현합니다.Therefore, MenuItem objects enable scenarios that execute an action in response to the MenuItem being tapped. 이 시나리오에는 탐색 수행 및 특정 웹 페이지에서 웹 브라우저 열기가 포함됩니다.These scenarios include performing navigation, and opening a web browser on a specific web page.

MenuItem 개체를 다음 예제에서와 같이 플라이아웃에 추가할 수 있습니다.MenuItem objects can be added to the flyout as shown in the following example:

<Shell ...>
    ...            
    <MenuItem Text="Random"
              IconImageSource="random.png"
              Command="{Binding RandomPageCommand}" />
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />    
</Shell>

이 코드는 2개의 MenuItem 개체를 플라이아웃에서 모든 플라이아웃 항목 아래쪽에 추가합니다.This code adds two MenuItem objects to the flyout, beneath all flyout items:

iOS 및 Android에서 MenuItem 개체가 포함된 플라이아웃의 스크린샷Screenshot of flyout containing MenuItem objects, on iOS and Android

첫 번째 MenuItem 개체는 애플리케이션의 임의 페이지로 이동하는 RandomPageCommand라는 ICommand를 실행합니다.The first MenuItem object executes an ICommand named RandomPageCommand, which navigates to a random page in the application. 두 번째 MenuItem 개체는 웹 브라우저에서 CommandParameter 속성으로 지정된 URL을 여는 HelpCommand라는 ICommand를 실행합니다.The second MenuItem object executes an ICommand named HelpCommand, which opens the URL specified by the CommandParameter property in a web browser.

참고

MenuItemBindingContext는 서브클래싱된 Shell 개체에서 상속됩니다.The BindingContext of each MenuItem is inherited from the subclassed Shell object.

MenuItem 모양 정의Define MenuItem appearance

MenuItem의 모양은 Shell.MenuItemTemplate에 연결된 속성을 DataTemplate으로 설정하여 사용자 지정할 수 있습니다.The appearance of each MenuItem can be customized by setting the Shell.MenuItemTemplate attached property to a DataTemplate:

<Shell ...>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    ...
    <MenuItem Text="Random"
              IconImageSource="random.png"
              Command="{Binding RandomPageCommand}" />
    <MenuItem Text="Help"
              IconImageSource="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell" />  
</Shell>

이 예제에서는 Shell 수준 MenuItemTemplate을 각 MenuItem 개체에 첨부하여 각 MenuItem 개체의 제목을 기울임꼴로 표시합니다.This example attaches the Shell-level MenuItemTemplate to each MenuItem object, displaying the title of each MenuItem object in italics:

iOS 및 Android에서 템플릿 기반 MenuItem 개체의 스크린샷Screenshot of templated MenuItem objects, on iOS and Android

참고

셸은 MenuItemTemplateBindingContextTextIconImageSource 속성을 제공합니다.Shell provides the Text and IconImageSource properties to the BindingContext of the MenuItemTemplate.`

Shell.MenuItemTemplate은 연결된 속성이므로 특정 MenuItem 개체에 서로 다른 템플릿을 첨부할 수 있습니다.Because Shell.MenuItemTemplate is an attached property, different templates can be attached to specific MenuItem objects:

<Shell ...>
    <Shell.MenuItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="0.2*" />
                    <ColumnDefinition Width="0.8*" />
                </Grid.ColumnDefinitions>
                <Image Source="{Binding Icon}"
                       Margin="5"
                       HeightRequest="45" />
                <Label Grid.Column="1"
                       Text="{Binding Text}"
                       FontAttributes="Italic"
                       VerticalTextAlignment="Center" />
            </Grid>
        </DataTemplate>
    </Shell.MenuItemTemplate>
    ...
    <MenuItem Text="Random"
              IconImageSource="random.png"
              Command="{Binding RandomPageCommand}" />
    <MenuItem Text="Help"
              Icon="help.png"
              Command="{Binding HelpCommand}"
              CommandParameter="https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell">
        <Shell.MenuItemTemplate>
            <DataTemplate>
                ...
            </DataTemplate>
        </Shell.MenuItemTemplate>
    </MenuItem>
</Shell>

이 예제에서는 Shell 수준 MenuItemTemplate을 첫 번째 MenuItem 개체에 첨부하고 인라인 MenuItemTemplate을 두 번째 MenuItem에 첨부합니다.This example attaches the Shell-level MenuItemTemplate to the first MenuItem object, and attaches the inline MenuItemTemplate to the second MenuItem.