Panduan Kontrol WinUI 3 C++ — Navigasi dan Tab

Kontrol terkait navigasi dan tab di WinUI 3

Frame Bingkai navigasi halaman (menampung Page untuk perpindahan halaman)
Page Wadah halaman mandiri
NavigationView Tampilan navigasi bilah samping
NavigationViewItem Item menu navigasi
NavigationViewItemHeader Judul kelompok navigasi
NavigationViewItemSeparator Garis pemisah navigasi
TabView Wadah banyak tab
TabViewItem Tab tunggal
Pivot Kontrol tab geser horizontal
PivotItem Item halaman Pivot
SplitView Tampilan terbagi dengan laci samping
SplitViewPaneInfo Pengaturan panel samping SplitView
BreadcrumbBar Bilah navigasi jalur remah roti
BreadcrumbBarItem Simpul jalur remah roti

Kontrol bilah samping sudah kita bahas sebelumnya, Frame, Page serta berbagai komponen navigasi juga sudah pernah kita gunakan. Berikut saya akan tunjukkan demo penggunaan kontrol mulai dari TabView.

Video di bawah mendemonstrasikan cara pakai kontrol-kontrol ini, meliputi bilah samping kiri dan halaman tab.

<?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 dan SplitViewPaneInfo -->
        <SplitView x:Name="DemoSplitView"
                   DisplayMode="CompactInline"
                   CompactPaneLength="52"
                   OpenPaneLength="260"
                   IsPaneOpen="True">

            <!-- Panel samping SplitView -->
            <SplitView.Pane>
                <StackPanel Padding="10" Spacing="12">
                    <TextBlock Text="Menu Samping" FontSize="16" FontWeight="SemiBold"/>
                    <Button x:Name="BtnShowTabView" Content="Buka Demo TabView"/>
                    <Button x:Name="BtnShowPivot" Content="Buka Demo Pivot"/>
                </StackPanel>
            </SplitView.Pane>

            <!-- Area konten utama 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="Demo Multi Tab TabView" FontSize="20"/>
                        <TabView x:Name="DemoTabView">
                            <TabViewItem Header="Tab Satu">
                                <StackPanel Margin="12" Spacing="8">
                                    <TextBlock Text="Isi di dalam Tab 1"/>
                                    <Button Content="Tombol Contoh Tab 1"/>
                                </StackPanel>
                            </TabViewItem>
                            <TabViewItem Header="Tab Dua">
                                <Border Background="#E8F4FF" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Isi bergaya di dalam Tab 2"/>
                                </Border>
                            </TabViewItem>
                            <TabViewItem Header="Tab Tiga">
                                <TextBox PlaceholderText="Kotak input di dalam Tab 3" Width="300"/>
                            </TabViewItem>
                        </TabView>

                        <!-- Pivot / PivotItem -->
                        <TextBlock Text="Demo Geser Horizontal Pivot" FontSize="20"/>
                        <Pivot x:Name="DemoPivot">
                            <PivotItem Header="Halaman Geser A">
                                <TextBlock Margin="12" Text="Isi halaman geser horizontal A"/>
                            </PivotItem>
                            <PivotItem Header="Halaman Geser B">
                                <Border Background="#FFF7E6" Padding="12" CornerRadius="6">
                                    <TextBlock Text="Isi bergaya halaman geser B"/>
                                </Border>
                            </PivotItem>
                            <PivotItem Header="Halaman Geser C">
                                <ToggleSwitch Header="Opsi sakelar di halaman geser C" Margin="12"/>
                            </PivotItem>
                        </Pivot>
                    </StackPanel>
                </Grid>
            </SplitView.Content>
        </SplitView>
    </Grid>
    
</Window>
Code language: HTML, XML (xml)

Panduan Kontrol WinUI 3 C++ — Navigasi dan Tab