이것은 새것이다.NET MAUI 탭 보기 컨트롤 여기 있습니다.

.NET Multi-platform App UI(모이섬)은 사마린의 진화다.형식.그것은 주로 서로 다른 플랫폼의 단일 프로젝트 개발, 예를 들어 Android, iOS, macOS와 Windows에 주목한다.
Syncfusion은 .NET MAUI tools, Charts, Radial Gauge 및 Tab View 버전의 컨트롤을 포함하는 cool2021 Volume 3 세트를 발표했다.이 컨트롤러들은 속도가 매우 빠르고 기능이 풍부하여 응용 프로그램에서 사용하기에 매우 유연하다.NET 모이섬 어플리케이션
이 블로그에서 우리는 소개할 것이다.NET MAUI 탭 보기 컨트롤 및 코드 예제

.NET MAUI 탭 뷰(미리보기)

선진적이었어NET MAUI 탭 보기는 쉽고 직관적인 탭 탐색 인터페이스입니다.사용자가 어디에 있든지 다른 탭을 탐색하고 전환할 수 있도록 이동이나 데스크톱 프로그램에서 사용할 수 있습니다.

탭 보기 개요

응용 프로그램이 복잡하고 거대한 레이아웃을 필요로 할 때 화면 공간의 사용을 최적화한다.

는 같은 공간에서 서로 다른 내용을 나타내는 옵션 항목을 포함한다.

한 번에 한 사용자가 액세스할 수 있는 탭 항목만 표시됩니다.사용자는 화면에 내용을 볼 수 있도록 다른 옵션을 눌렀다.

탭 너비 모드

이거.NET MAUI 탭 보기에는 기본값과 컨텐트 크기 두 가지 너비 옵션이 있습니다.이러한 옵션은 탭 막대를 채울 때 탭의 너비를 계산하는 방법을 결정합니다.

약속을 어기다

기본 옵션에서는 모든 탭의 너비가 탭 막대의 너비에 따라 등분됩니다.이렇게 하면 탭 수에 관계없이 탭을 스크롤할 수 없는 고정된 탭 막대가 활성화됩니다.

<syncfusion:SfTabView TabWidthMode="Default" />

기본 레이블 너비 모드

크기와 내용

이 옵션을 사용하면 포함된 텍스트나 이미지에 맞게 탭의 폭을 설정할 수 있습니다.이 옵션은 탭의 배열과 너비가 탭 막대의 너비를 초과할 때 탭 스크롤을 활성화합니다.

<syncfusion:SfTabView TabWidthMode="SizeToContent" />

크기-내용 탭 너비 모드

탭 이미지 위치

이거.NET MAUI 탭 뷰는 탭의 이미지가 탭 텍스트와 정렬되는 방식을 결정하는 네 가지 옵션을 제공합니다.사용 가능한 옵션은 위, 아래, 왼쪽 및 오른쪽입니다.

꼭대기

위쪽 옵션은 텍스트 위에 이미지를 배치합니다.

<syncfusion:SfTabItem ImagePosition="Top"/>

탭 이미지를 위쪽에 배치

밑바닥

아래쪽 옵션은 이미지를 텍스트 아래에 배치합니다.

<syncfusion:SfTabItem ImagePosition="Bottom"/>

아래쪽에 탭 이미지 배치

왼쪽

[왼쪽] 옵션은 텍스트 앞에 이미지를 배치합니다.

<syncfusion:SfTabItem ImagePosition="Left"/>

탭 이미지를 왼쪽에 배치

라이트

오른쪽 옵션으로 이미지를 텍스트 뒤에 놓습니다.

<syncfusion:SfTabItem ImagePosition="Right"/>

탭 이미지를 오른쪽에 배치

지표 배치 선택

이거.NET MAUI 탭 뷰는 탭 제목 항목의 컨텐트에 대한 표시기 정렬을 결정하는 세 가지 옵션을 제공합니다.사용 가능한 옵션은 위쪽, 아래쪽 및 채우기입니다.

꼭대기

선택 표시기는 선택한 탭의 맨 위에 있습니다.

<syncfusion:SfTabView IndicatorPlacement="Top" />

선택 표시기 위쪽

밑바닥

선택 표시기는 선택한 탭의 아래쪽에 있습니다.

<syncfusion:SfTabView IndicatorPlacement="Bottom" />

아래쪽에 선택 표시기 놓기

가득 채우다

선택 표시기가 선택한 탭을 채웁니다.

<syncfusion:SfTabView IndicatorPlacement="Fill" />

선택한 탭에 선택 표시기 채우기

탭 막대 배치

이거.NET MAUI 탭 뷰는 탭 컨텐트에 대한 탭 막대의 정렬을 결정하는 두 가지 옵션을 제공합니다.사용 가능한 옵션은 위쪽과 아래쪽입니다.

꼭대기

탭 표시줄은 탭 뷰 컨트롤의 컨텐츠 영역 위에 배치됩니다.

<syncfusion:SfTabView TabBarPlacement="Top" />

탭 막대를 탭 컨텐트의 맨 위에 배치

밑바닥

탭 표시줄은 탭 보기 컨트롤의 컨텐츠 영역 아래에 있습니다.

<syncfusion:SfTabView TabBarPlacement="Bottom" />

탭 막대를 탭 컨텐트의 아래쪽에 배치

네스트된 탭

이러한 지원을 통해 중첩된 탭 뷰를 사용할 수 있습니다.Items 속성을 사용하여 다른 탭 뷰에서 탭 뷰를 구성할 수도 있습니다.

<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 1">
<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 1 SubItem 1"/>
<syncfusion:SfTabItem Header="Item 1 SubItem 2"/>
</syncfusion:SfTabView>
</syncfusion:SfTabItem>
<syncfusion:SfTabItem Header="Item 2">
<syncfusion:SfTabView>
<syncfusion:SfTabItem Header="Item 2 SubItem 1"/>
<syncfusion:SfTabItem Header="Item 2 SubItem 2"/>
</syncfusion:SfTabView>
</syncfusion:SfTabItem>
</syncfusion:SfTabView>

잔물결 애니메이션

내장된 ripple 애니메이션은 재료 주제와 일치합니다.이 애니메이션은 사용자에게 더욱 좋은 녹화 체험을 제공한다.

색상 및 글꼴 사용자 정의

간단한 API를 사용하여 모든 글꼴과 해당 색상을 쉽게 사용자정의할 수 있습니다.
사용자 정의 글꼴 및 색상이 있는 탭 표시줄

시각 형상 상태 관리자

시각적 상태 관리자를 사용하여 변경합니다.NET MAUI 탭은 코드에 설정된 비주얼 상태를 기준으로 항목 속성을 봅니다.적용 가능한 시각 상태는 선택, 보통, 활성화 및 비활성화입니다.

<Style TargetType="TabView:SfTabItem">
<Setter Property="VisualStateManager.VisualStateGroups">
<VisualStateGroupList>
<VisualStateGroup>
<VisualState x:Name="Selected" >
<VisualState.Setters>
<Setter Property="TextColor" Value="Red" />
<Setter Property="ImagePosition" Value="Top" />
<Setter Property="FontSize" Value="16" />
<Setter Property="FontAttributes" Value="Bold" />
</VisualState.Setters>
</VisualState>
<VisualState x:Name="Normal">
<VisualState.Setters>
<Setter Property="TextColor" Value="Black" />
<Setter Property="ImagePosition" Value="Left" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontAttributes" Value="Italic" />
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateGroupList>
</Setter>
</Style>

Visual State Manager 설계 탭 항목 사용

결론

읽어주셔서 감사합니다!이 블로그에서 우리는 .NET MAUI Tab View 버전에서 내놓은 2021 Volume 3 컨트롤러의 기능을 소개했다.또한 조작 버튼, 넘침 버튼, 슬라이딩 네비게이션 등 더 많은 기능을 제공할 계획이다.이 새 컨트롤을 평가하기 위해 NuGet 프로그램 집합을 다운로드할 수 있습니다.자세한 내용은 Release Notes 및 What’s New 페이지를 참조하십시오.
우리는 또 더 많은 서비스를 제공할 계획이다.NET 마우이 컨트롤이 기존 SyncfusionXamarin.Forms 컨트롤을 대체합니다.너는 우리가 곧 발표할 버전에서 그것들을 볼 수 있다.
다른 기능이 더 필요하십니까?네트워크 모이 섬 옵션 보기?아래 의견이나 support forum, Direct-Trac 또는 feedback portal에 나와 주십시오.우리는 언제든지 기꺼이 당신을 돕겠습니다!

관련 블로그