WinUI 3 C++ 컨트롤 강의 – 내비게이션 및 탭

WinUI3의 내비게이션 및 탭 관련 컨트롤

Frame 페이지 이동용 프레임(Page를 담아 페이지 전환 구현)
Page 독립적인 페이지 컨테이너
NavigationView 사이드바 내비게이션 뷰
NavigationViewItem 내비게이션 메뉴 항목
NavigationViewItemHeader 내비게이션 그룹 제목
NavigationViewItemSeparator 내비게이션 구분선
TabView 다중 탭 컨테이너
TabViewItem 개별 탭 페이지
Pivot 가로 슬라이드 탭 컨트롤
PivotItem Pivot 페이지 항목
SplitView 사이드 서랍 분할 뷰
SplitViewPaneInfo SplitView 사이드바 설정
BreadcrumbBar 경로 브레드크럼 내비게이션 바
BreadcrumbBarItem 브레드크럼 경로 노드

사이드바 관련 컨트롤은 앞서 다룬 적이 있으며 Frame, Page 및 각종 내비게이션 컨트롤도 사용해 보았습니다. 아래에서 TabView 이후 컨트롤 사용법을 시연합니다.

아래 영상에서 해당 컨트롤 사용 방식을 보여주며 좌측 사이드바와 탭 페이지 예시를 포함합니다.

<?xml version="1.0" encoding="utf-8"?>
<Window
    x:Class="AppWinui.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:AppWinui"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Title="AppWinui">

    <Grid>
        <!-- SplitView SplitViewPaneInfo -->
        <SplitView x:Name="DemoSplitView"
                   DisplayMode="CompactInline"
                   CompactPaneLength="52"
                   OpenPaneLength="260"
                   IsPaneOpen="True">

            <!-- SplitView 사이드 패널 -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="사이드 메뉴" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="TabView 데모 열기"/>
                    <Button x:Name="BtnShowPivot" Content="Pivot 데모 열기"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- SplitView 메인 콘텐츠 영역 -->
            <SplitView.Content>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>

                    <StackPanel x:Name="MainContentPanel" Grid.Row="1" Margin="8" Spacing="20" VerticalAlignment="Top">
             
                        <TextBlock Text="TabView 다중 탭 데모" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="탭 1">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="탭 1 내부 콘텐츠"/>
                                    <Button Content="탭1 샘플 버튼"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="탭 2">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="탭 2 스타일 적용 콘텐츠"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="탭 3">
                                <TextBox PlaceholderText="탭3 입력 상자" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Pivot 가로 슬라이드 데모" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="슬라이드 페이지 A">
                                <TextBlock Margin="12" Text="가로 슬라이드 페이지 A 내용"/>
                            </PivotItem>
                            <PivotItem Header="슬라이드 페이지 B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="슬라이드 페이지 B 스타일 콘텐츠"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="슬라이드 페이지 C">
                                <ToggleSwitch Header="슬라이드 페이지 C 토글 옵션" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Code language: HTML, XML (xml)

WinUI 3 C++ 컨트롤 강의 – 내비게이션 및 탭