탭 위젯을 사용하면 매쉬업 콘텐츠를 별도의 보기로 구성할 수 있습니다. 각 보기는 위젯 속성을 사용하여 정의할 수 있는 레이블이 있는 탭입니다. 런타임에 한 번에 하나의 탭만 열리고 현재 탭은 밑줄로 강조 표시됩니다. 탭 위젯은 해당 컨테이너의 크기에 따라 증가하고 축소하는 반응형 위젯입니다. 컨테이너의 치수를 제어하거나 위젯 Width 및 Height 속성을 사용하여 위젯을 고정 너비 또는 높이로 설정할 수 있습니다.

다음과 같은 방법으로 위젯을 구성할 수 있습니다.

기본적으로 위젯의 모든 탭은 매쉬업이 열릴 때 로드됩니다. 탭의 위젯에 바인딩된 서비스는 런타임에 이벤트(예: 매쉬업 Loaded 이벤트)가 트리거될 때 실행됩니다. 서비스를 실행하고 백그라운드 탭에서 위젯을 로드하면 탭 위젯에 많은 위젯 컬렉션이 포함된 복잡한 시각화가 여러 개 포함되어 있을 때 성능이 저하될 수 있습니다. 보이지 않는 탭이 런타임에 필요할 때까지 로드가 연기되도록 지연 로드를 구성할 수 있습니다. 이렇게 하면 매쉬업 및 네트워크 성능이 향상됩니다. 위젯에 대한 지연 로드를 구성하는 경우 매쉬업이 열릴 때 기본 탭이 즉시 표시되도록 지연 로드에서 기본 탭을 제외해야 합니다. 위젯의 탭에 대해 지연 로드를 활성화하려면 다음 단계를 수행하십시오.

런타임에 지연 로드된 탭은 탭을 열 때 자동으로 로드됩니다. EnableContainerUnload 속성이 탭 컨테이너용으로 활성화되면 컨테이너는 표시되지 않을 때 자동으로 언로드되어 시스템 리소스를 해제하고 성능을 향상시킵니다. 언로드된 탭으로 다시 전환하면 탭이 자동으로 다시 로드됩니다. 탭의 지연 로드 서비스에 대한 바인딩을 추가로 만들어 버튼 위젯의 Clicked 이벤트와 같은 매쉬업의 다른 이벤트를 사용하여 콘텐츠를 수동으로 로드하고 언로드할 수 있습니다.

위젯 TabStyle 속성을 사용하여 탭 스타일을 구성할 수 있습니다. 이 속성은 다음 두 가지 옵션을 지원합니다.

프레임 없는 탭 - 탭 이름이 테두리 없이 표시됩니다. (기본값)

프레임 탭 - 탭 이름과 콘텐츠 영역 주위에 테두리가 표시됩니다. HideContentAreaBorder 속성을 사용하여 콘텐츠 영역 주위의 테두리 표시 유형을 제어합니다.

프레임 탭을 사용할 때 TabMode 속성을 사용하여 탭 이름의 모양새를 사용자 정의할 수 있습니다. 탭 이름에는 제공하려는 콘텐츠와 사용자 경험에 따라 레이블, 아이콘 또는 둘 다를 표시할 수 있습니다. 각 탭에 대해 텍스트 레이블을 정의하거나, 미디어 엔티티를 참조하거나, SVG 아이콘을 지정할 수 있습니다.

다음 이미지에서는 레이블과 아이콘이 모두 있는 두 개의 탭을 보여줍니다. 레이블과 아이콘을 모두 사용하면 명확성이 개선되어 새 사용자가 더 쉽게 이해할 수 있습니다.

다음 이미지에서는 아이콘만 있는 탭을 보여줍니다. 아이콘을 사용하면 사용자가 각 탭의 용도를 빠르게 파악할 수 있으며, 특히 화면 공간이 제한된 경우 유용합니다.

아이콘 크기를 사용자 정의하려면 위젯 TabIconSize 속성을 사용합니다.

프레임 탭을 사용할 때 TabsPosition 속성을 사용하여 탭을 가로 또는 세로로 표시하도록 위젯을 구성할 수 있습니다. 탭은 콘텐츠 영역의 맨 위나 맨 아래에 가로로 표시되거나 왼쪽이나 오른쪽에 세로로 표시될 수 있습니다. 세로 탭을 사용하려면 다음 단계를 수행하십시오.

다음 예에서는 탭이 왼쪽에 세로로 정렬된 프레임 스타일을 보여줍니다.

기본적으로 탭은 사용 가능한 공간에 따라 탭 이름의 콘텐츠에 맞게 확장되거나 축소되도록 구성됩니다. TabWdithConfig 속성을 사용하면 사용 가능한 공간을 모든 탭에 균등하게 분배하거나 고정 너비를 설정할 수 있습니다. 탭이 가로로 표시되는 경우에만 균등한 분배가 지원됩니다.