Bagikan melalui

Bilah judul

Kontrol TitleBar menyediakan cara yang disederhanakan untuk membuat bilah judul kustom untuk aplikasi Anda. Bilah judul adalah komponen mendasar dari antarmuka pengguna aplikasi Windows yang mengidentifikasi aplikasi melalui ikon dan judulnya, menampung tombol keterangan sistem yang memungkinkan pengguna menutup, memaksimalkan, meminimalkan, dan memulihkan jendela, dan memungkinkan pengguna menyeret jendela di sekitar layar.

Anda dapat menggunakan bilah judul kustom untuk mengintegrasikan area bilah judul dengan UI aplikasi Anda dengan lebih baik. Bilah judul dapat disesuaikan agar sesuai dengan gaya visual aplikasi menggunakan tema Mica. Ini dapat mencakup informasi relevan lainnya, seperti judul dokumen atau status saat ini (misalnya, "Mengedit," "Menampilkan," dll.). Ini juga dapat menghosting kontrol WinUI lainnya, seperti AutoSuggestBox dan PersonPicture, memberikan pengalaman pengguna yang kohesif untuk aplikasi Anda.

Cuplikan layar jendela aplikasi dengan bilah judul kustom

Apakah ini kontrol yang tepat?

Gunakan kontrol TitleBar saat Anda ingin mengintegrasikan area bilah judul dengan UI aplikasi Anda menggunakan kustomisasi seperti subtitel, tema Mica , dan integrasi dengan kontrol WinUI.

Anatomi

Secara default, bilah judul hanya menampilkan tombol keterangan sistem. Bagian lain dari bilah judul ditampilkan atau disembunyikan tergantung pada pengaturan properti terkait.

Bilah judul dibagi menjadi area berikut:

Cuplikan layar memperlihatkan bagian kontrol bilah judul.

Tata letak dibalik ketika FlowDirection adalah RightToLeft.

Membuat bilah judul

Buka aplikasi Galeri WinUI 3 dan lihat TitleBar beraksi

Aplikasi Galeri WinUI 3 mencakup contoh interaktif dari sebagian besar kontrol, fitur, dan fungsi WinUI 3. Dapatkan aplikasi dari Microsoft Store atau dapatkan kode sumber di GitHub

Contoh ini membuat bilah judul sederhana yang menggantikan bilah judul sistem. Ini memiliki judul, ikon, dan tema Mica.

<Window
    ...  >
    <Window.SystemBackdrop>
        <MicaBackdrop Kind="Base"/>
    </Window.SystemBackdrop>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TitleBar x:Name="SimpleTitleBar"
                  Title="My App">
            <TitleBar.IconSource>
                <FontIconSource Glyph="&#xF4AA;"/>
            </TitleBar.IconSource>
        </TitleBar>

        <!-- App content -->
        <Frame x:Name="RootFrame" Grid.Row="1"/>
    </Grid>
</Window>

public MainWindow()
{
    this.InitializeComponent();

    // Hides the default system title bar.
    ExtendsContentIntoTitleBar = true;
    // Replace system title bar with the WinUI TitleBar control. 
    SetTitleBar(SimpleTitleBar); 
}

Integrasi dengan NavigationView

Tampilan Navigasi memiliki tombol kembali bawaan dan tombol pengalih panel. Panduan Desain Fasih merekomendasikan agar kontrol ini ditempatkan di bilah judul saat bilah judul kustom digunakan.

Contoh ini menunjukkan cara mengintegrasikan kontrol Bilah Judul dengan kontrol NavigationView dengan menyembunyikan tombol kembali dan tombol pengalih panel dalam tampilan navigasi dan menggunakan tombol yang sesuai pada bilah judul sebagai gantinya.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>

    <TitleBar Title="My App"
              IsBackButtonVisible="True"
              IsBackButtonEnabled="{x:Bind RootFrame.CanGoBack, Mode=OneWay}"
              BackRequested="TitleBar_BackRequested"
              IsPaneToggleButtonVisible="True"
              PaneToggleRequested="TitleBar_PaneToggleRequested">
    </TitleBar>

    <NavigationView x:Name="RootNavigationView" Grid.Row="1"
                    IsBackButtonVisible="Collapsed"
                    IsPaneToggleButtonVisible="False">
        <Frame x:Name="RootFrame" />
    </NavigationView>
</Grid>

private void TitleBar_BackRequested(TitleBar sender, object args)
{
    if (RootFrame.CanGoBack)
    {
        RootFrame.GoBack();
    }
}

private void TitleBar_PaneToggleRequested(TitleBar sender, object args)
{
    RootNavigationView.IsPaneOpen = !RootNavigationView.IsPaneOpen;
}

UWP dan WinUI 2

Kontrol TitleBar tidak tersedia untuk UWP dan WinUI 2. Sebagai gantinya, lihat Kustomisasi bilah judul (aplikasi UWP).

  • Last updated on