앱바

앱 바는 도구 모음과 잠재적으로 다른 보기로 구성됩니다. 하나 이상의 작업을 노출합니다.

앱바 사용의 주요 이점은 모든 것을 사용자 지정할 수 있다는 것입니다. 다음과 같은 사용자 정의 옵션:

• 사용자 정의 앱 바 높이.
• 제한 또는 제한(여백, 크기 등) 없이 콘텐츠를 포함합니다.
• 투명한 앱바.
• 등.

참고: AppBar는 사용자 지정 콘텐츠 추가, 레이아웃을 사용한 위치 지정 등과 같이 기본 탐색 모음이 한계에 도달했을 때 인계받는 크로스 플랫폼 보기 입니다.

Xamarin.Forms에서 앱 모음은 일반적으로 화면 상단에 앱 모음을 고정 높이 위젯으로 배치하는 Shell.AppBar 속성에서 사용됩니다.

API

다음으로 AppBar 속성 및 이벤트가 있는 목록입니다.

속성

| 재산 | 유형 | 설명 |
|------------|:-------------:|:------------:|
| 배치 | 앱바 배치 | AppBar 배치(상단 또는 하단). |
| 막대 높이 | 더블 | 앱 바 높이를 정의합니다. |
| 바배경 | 브러시 | 배경을 제공하는 브러시입니다. |
| BarBackgroundImage | 이미지 소스 | 배경을 제공하는 ImageSource입니다. |
| 바텍스트색상 | 색상 | 텍스트에 사용된 색상(제목 등). |
| 탐색 아이콘 | 이미지 소스 | 탐색 아이콘(뒤로 버튼 등)을 제공하는 ImageSource입니다. |
| BackButton제목 | 문자열 | 앱 바 뒤로 버튼 제목을 정의합니다. |
| 테두리 색상 | 색상 | 앱 바 테두리 색상입니다. |
| 테두리 두께 | 두께 | 모든 면의 앱바 테두리 너비입니다. |
| 폰트패밀리 | 문자열 | 앱 바 텍스트에 사용된 글꼴 모음입니다. |
| 글꼴 속성 | 글꼴 속성 | 앱 바 텍스트에 사용되는 글꼴 속성입니다. |
| 글꼴 크기 | 더블 | 앱 바 텍스트에 사용된 글꼴 크기입니다. |
| 타이틀뷰 | 보기 | 앱 표시줄에 Xamarin.Forms 보기를 표시합니다. |
| 백커맨드 | 아이커맨드 | 뒤로 탐색하는 명령이 실행되었습니다. |
| 뒤로 명령 매개변수 | 개체 | 뒤로 탐색하는 데 사용되는 명령 매개변수입니다. |

이벤트

| 이벤트 | 설명 |
|------------|:-------------:|
| 뒤로 탭 | 사용자가 뒤로 이동할 때 발생하는 이벤트입니다. |

시나리오

일반적인 시나리오를 다루는 몇 가지 샘플을 살펴보겠습니다.

간단한 앱 바

기본 예를 살펴보겠습니다.

<Shell>
     <Shell.AppBar>
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

맞춤형 앱 바

사용자 정의 높이 및 사용자 정의 콘텐츠(TitleView)가 있는 투명 막대를 사용하여 모양을 사용자 정의합니다.

<Shell>
     <Shell.AppBar>
        <AppBar  
            BarHeight="120"
            BarBackgroundColor="Transparent">
            <AppBar.TitleView>
            ...
            </AppBar.TitleView>
        </AppBar>
     </Shell.AppBar>
    ...
</Shell>

놓기

상단 앱 바(기본 배치)는 모바일 화면 상단에 탐색 및 작업을 표시합니다.

<Shell>
     <Shell.AppBar
          Placement="Top">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

하단 앱 바는 모바일 화면 하단에 탐색 및 작업을 표시합니다.

<Shell>
     <Shell.AppBar
          Placement="Bottom">
         <AppBar />
     </Shell.AppBar>
    ...
</Shell>

스타일 사용

XAML 스타일 또는 CSS 를 사용하여 탭 콘텐츠, 탭 스트립, 탭 항목 등의 모양을 사용자 지정할 수 있습니다.

XAML 사용:

<Style
    x:Key="AppBarStyle"
    TargetType="AppBar">
    <Setter
        Property="BarHeight"
        Value="120" />
    <Setter
        Property="BarBackgroundColor"
        Value="Transparent" />
</Style>

CSS 사용:

.appBarStyle {
  background: transparent;
  height: 120px;
}

난이도 : 중

추가 정보

https://github.com/xamarin/Xamarin.Forms/issues/10774 기반