Xamarin.Forms Shell 페이지 구성Xamarin.Forms Shell Page Configuration

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

Shell 클래스는 Xamarin.Forms Shell 애플리케이션에서 페이지의 모양을 구성하는 데 사용할 수 있는 연결된 속성을 정의합니다.The Shell class defines attached properties that can be used to configure the appearance of pages in Xamarin.Forms Shell applications. 여기에는 페이지 색 설정, 탐색 모음을 사용하지 않도록 설정, 탭 표시줄을 사용하지 않도록 설정 및 탐색 모음에 뷰 표시가 포함됩니다.This includes setting page colors, disabling the navigation bar, disabling the tab bar, and displaying views in the navigation bar.

페이지 색 설정Set page colors

Shell 클래스는 Shell 애플리케이션에서 페이지 색을 설정하는 데 사용할 수 있는 다음 연결된 속성을 정의합니다.The Shell class defines the following attached properties that can be used to set page colors in a Shell application:

  • Shell 크롬에서 배경색을 정의하는 Color 형식의 BackgroundColor.BackgroundColor, of type Color, that defines the background color in the Shell chrome. 셸 콘텐츠 뒤의 색은 채워지지 않습니다.The color will not fill in behind the Shell content.
  • 사용할 수 없는 텍스트 및 아이콘을 음영 처리할 색을 정의하는 Color 형식의 DisabledColor.DisabledColor, of type Color, that defines the color to shade text and icons that are disabled.
  • 텍스트 및 아이콘을 음영 처리할 색을 정의하는 Color 형식의 ForegroundColor.ForegroundColor, of type Color, that defines the color to shade text and icons.
  • 현재 페이지의 제목에 사용되는 색을 정의하는 Color 형식의 TitleColor.TitleColor, of type Color, that defines the color used for the title of the current page.
  • 셸 크롬에서 선택되지 않은 텍스트 및 아이콘에 사용되는 색을 정의하는 Color 형식의 UnselectedColor.UnselectedColor, of type Color, that defines the color used for unselected text and icons in the Shell chrome.

이 모든 속성은 BindableProperty 개체에서 지원되며 XAML 스타일을 사용하여 스타일 지정됩니다. 이는 속성이 데이터 바인딩의 대상이 될 수 있음을 의미합니다.All of these properties are backed by BindableProperty objects, which means that the properties can be targets of data bindings, and styled using XAML styles. CSS(CSS 스타일시트)를 사용하여 속성을 설정할 수도 있습니다.In addition, the properties can be set using Cascading Style Sheets (CSS). 자세한 내용은 Xamarin.Forms 셸 특정 속성을 참조하세요.For more information, see Xamarin.Forms Shell specific properties.

참고

탭 색을 정의할 수 있도록 설정하는 속성도 있습니다.There are also properties that enable tab colors to be defined. 자세한 내용은 탭 모양을 참조하세요.For more information, see Tab appearance.

다음 XAML에서는 서브클래싱된 Shell 클래스에서의 색 속성 설정을 보여 줍니다.The following XAML shows setting the color properties in a subclassed Shell class:

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       x:Class="Xaminals.AppShell"
       BackgroundColor="#455A64"
       ForegroundColor="White"
       TitleColor="White"
       DisabledColor="#B4FFFFFF"
       UnselectedColor="#95FFFFFF">

</Shell>

이 예제에서는 페이지 수준에서 재정의되지 않은 경우 색 값이 Shell 애플리케이션의 모든 페이지에 적용됩니다.In this example, the color values will be applied to all pages in the Shell application, unless overridden at the page level.

색 속성은 연결된 속성이므로 개별 페이지에서 설정하여 해당 페이지의 색을 설정할 수도 있습니다.Because the color properties are attached properties, they can also be set on individual pages, to set the colors on that page:

<ContentPage ...
             Shell.BackgroundColor="Gray"
             Shell.ForegroundColor="White"
             Shell.TitleColor="Blue"
             Shell.DisabledColor="#95FFFFFF"
             Shell.UnselectedColor="#B4FFFFFF">

</ContentPage>

또는 XAML 스타일을 사용하여 색 속성을 설정할 수 있습니다.Alternatively, the color properties can be set with a XAML style:

<Style x:Key="DomesticShell"
       TargetType="Element" >
    <Setter Property="Shell.BackgroundColor"
            Value="#039BE6" />
    <Setter Property="Shell.ForegroundColor"
            Value="White" />
    <Setter Property="Shell.TitleColor"
            Value="White" />
    <Setter Property="Shell.DisabledColor"
            Value="#B4FFFFFF" />
    <Setter Property="Shell.UnselectedColor"
            Value="#95FFFFFF" />
</Style>

XAML 스타일에 대한 자세한 내용은 XAML 스타일을 사용하여 Xamarin.Forms 앱 스타일 지정을 참조하세요.For more information about XAML styles, see Styling Xamarin.Forms Apps using XAML Styles.

탐색 모음을 사용하지 않도록 설정Disable the navigation bar

Shell 클래스는 페이지가 표시될 때 탐색 모음이 보이도록 할지 여부를 제어하는 bool 형식의 NavBarIsVisible 연결된 속성을 정의합니다.The Shell class defines the NavBarIsVisible attached property, of type bool, that controls if the navigation bar is visible when a page is presented. 기본적으로 속성의 값은 true입니다.By default the value of the property is true.

이 속성은 서브클래싱된 Shell 개체에서 설정할 수 있지만, 일반적으로 탐색 모음이 보이지 않도록 하려는 모든 페이지에 설정됩니다.While this property can be set on a subclassed Shell object, it's typically set on any pages that want to make the navigation bar invisible. 예를 들어 다음 XAML은 ContentPage에서 탐색 모음을 사용할 수 없음을 보여 줍니다.For example, the following XAML shows disabling the navigation bar from a ContentPage:

<ContentPage ...
             Shell.NavBarIsVisible="false">
    ...
</ContentPage>

따라서 페이지가 표시되면 탐색 모음은 보이지 않게 됩니다.This results in the navigation bar becoming invisible when the page is presented:

iOS 및 Android에서 탐색 모음이 보이지 않는 Shell 페이지의 스크린샷Screenshot of Shell page with an invisible navigation bar, on iOS and Android

탭 표시줄을 사용하지 않음Disable the tab bar

Shell 클래스는 페이지가 표시될 때 탭 표시줄이 보이도록 할지 여부를 제어하는 bool 형식의 TabBarIsVisible 연결된 속성을 정의합니다.The Shell class defines the TabBarIsVisible attached property, of type bool, that controls if the tab bar is visible when a page is presented. 기본적으로 속성의 값은 true입니다.By default the value of the property is true.

이 속성은 서브클래싱된 Shell 개체에서 설정할 수 있지만, 일반적으로 탭 표시줄이 보이지 않도록 하려는 모든 페이지에 설정됩니다.While this property can be set on a subclassed Shell object, it's typically set on any pages that want to make the tab bar invisible. 예를 들어 다음 XAML은 ContentPage에서 탭 표시줄을 사용할 수 없음을 보여 줍니다.For example, the following XAML shows disabling the tab bar from a ContentPage:

<ContentPage ...
             Shell.TabBarIsVisible="false">
    ...
</ContentPage>

따라서 페이지가 표시되면 탭 표시줄은 보이지 않게 됩니다.This results in the tab bar becoming invisible when the page is presented:

iOS 및 Android에서 탭 표시줄이 보이지 않는 Shell 페이지의 스크린샷Screenshot of Shell page with an invisible tab bar, on iOS and Android

탐색 모음에서 보기 표시Display views in the navigation bar

Shell 클래스는 Xamarin.Forms View를 탐색 모음에 표시할 수 있도록 하는 View 형식의 TitleView 연결된 속성을 정의합니다.The Shell class defines the TitleView attached property, of type View, that enables any Xamarin.Forms View to be displayed in the navigation bar.

이 속성은 서브클래싱된 Shell 개체에서 설정할 수 있지만, 탐색 모음에 보기를 표시하려는 모든 페이지에서도 설정할 수 있습니다.While this property can be set on a subclassed Shell object, it can also be set on any pages that want to display a view in the navigation bar. 예를 들어 다음 XAML은 ContentPage의 탐색 모음에 Image가 표시된 것을 보여 줍니다.For example, the following XAML shows displaying an Image in the navigation bar of a ContentPage:

<ContentPage ...>
    <Shell.TitleView>
        <Image Source="xamarin_logo.png"
               HorizontalOptions="Center"
               VerticalOptions="Center" />
    </Shell.TitleView>
    ...
</ContentPage>

그 결과, 이미지가 페이지의 탐색 모음에 표시됩니다.This results in an image being displayed in the navigation bar on the page:

iOS 및 Android에서 제목 보기가 있는 Shell 페이지의 스크린샷Screenshot of Shell page with a title view, on iOS and Android

중요

NavBarIsVisible 연결된 속성을 가진 탐색 모음이 보이지 않게 되면 제목 보기가 표시되지 않습니다.If the navigation bar has been made invisible, with the NavBarIsVisible attached property, the title view will not be displayed.

보기의 크기가 WidthRequestHeightRequest 속성으로 지정되지 않거나 보기의 위치가 HorizontalOptionsVerticalOptions 속성으로 지정되지 않으면 탐색 모음에 많은 보기가 나타나지 않습니다.Many views won't appear in the navigation bar unless the size of the view is specified with the WidthRequest and HeightRequest properties, or the location of the view is specified with the HorizontalOptions and VerticalOptions properties.

Layout 클래스는 View 클래스에서 파생되므로 여러 보기를 포함하는 레이아웃 클래스를 표시하도록 TitleView 연결된 속성을 설정할 수 있습니다.Because the Layout class derives from the View class, the TitleView attached property can be set to display a layout class that contains multiple views. 마찬가지로 ContentView 클래스는 결국 View 클래스에서 파생되므로 TitleView 연결된 속성은 단일 보기를 포함하는 ContentView를 표시하도록 설정할 수 있습니다.Similarly, because the ContentView class ultimately derives from the View class, the TitleView attached property can be set to display a ContentView that contains a single view.