Aracılığıyla paylaş

Başlık çubuğu

TitleBar denetimi, uygulamanız için özel başlık çubuğu oluşturmanın basitleştirilmiş bir yolunu sağlar. Başlık çubuğu, windows uygulamasının simge ve başlığı aracılığıyla uygulamayı tanımlayan, kullanıcının pencereyi kapatmasını, ekranı kaplamasını, simge durumuna küçültmesini ve geri yüklemesini sağlayan sistem başlığı düğmelerini barındıran ve kullanıcının pencereyi ekranda sürüklemesine olanak tanıyan temel bir bileşenidir.

Başlık çubuğu alanını uygulama kullanıcı arabiriminizle daha iyi tümleştirmek için özel bir başlık çubuğu kullanabilirsiniz. Başlık çubuğu, Mica temalı uygulama kullanılarak uygulamanın görsel stiliyle eşleşecek şekilde özelleştirilebilir. Belge başlığı veya geçerli durum (ör. "Düzenleme", "Görüntüleme" vb.) gibi diğer ilgili bilgileri içerebilir. Ayrıca AutoSuggestBox ve PersonPicture gibi diğer WinUI denetimlerini barındırarak uygulamanız için uyumlu bir kullanıcı deneyimi sağlayabilir.

Özel başlık çubuğu içeren bir uygulama penceresinin ekran görüntüsü

Doğru kontrol bu mu?

Başlık çubuğu alanını uygulama kullanıcı arabiriminizle tümleştirmek için alt yazılar, Mica temalı ve WinUI denetimleriyle tümleştirmeler gibi özelleştirmeleri kullanmak istediğinizde TitleBar denetimini kullanın.

Anatomi

Varsayılan olarak, başlık çubuğunda yalnızca sistem resim yazısı düğmeleri gösterilir. başlık çubuğunun diğer bölümleri, ilişkili özellik ayarlarına bağlı olarak gösterilir veya gizlenir.

Başlık çubuğu şu alanlara ayrılır:

Başlık çubuğu denetiminin bölümlerini gösteren ekran görüntüsü.

  • Geri düğmesi:IsBackButtonEnabled, IsBackButtonVisible, BackRequested - Gezinti için yerleşik bir geri düğmesi.
  • Bölme geçiş düğmesi:IsPaneToggleButtonVisible, PaneToggleRequested - Bu düğme NavigationView kontrolüyle birlikte kullanılmak üzere tasarlanmıştır.
  • Sol üst bilgi:LeftHeader
  • Icon:IconSource
  • Başlık:Başlık
  • Alt Başlık:Alt Başlık
  • İçerik:İçerik
  • Sağ başlık:SağBaşlık
  • En az sürükleme bölgesi: Bu alan, kullanıcının her zaman sürüklemek üzere pencereyi tutabilecek bir yeri olması için sistem başlığı düğmelerinin yanında ayrılmıştır.
  • Sistem resim yazısı düğmeleri: Bu düğmeler TitleBar denetiminin bir parçası değildir; RTL veya LTR ayarlarına bağlı olarak yalnızca resim yazısı düğmelerinin göründüğü yere yer ayırır. Resim yazısı düğmeleri ve özelleştirmeleri AppWindowTitleBar tarafından işlenir.

FlowDirectionRightToLeftolduğunda düzen tersine çevrilir.

Başlık çubuğu oluşturma

WinUI 3 Galeri uygulamasını açın ve Başlık Çubuğu'na bakın

WinUI 3 Galeri uygulaması çoğu WinUI 3 denetimi, özelliği ve işlevselliğine ilişkin etkileşimli örnekler içerir. Uygulamayı Microsoft Store'dan alın veya GitHub'dan kaynak kodunu alın

Bu örnek, sistem başlık çubuğunun yerini alan basit bir başlık çubuğu oluşturur. Bir başlık, simge ve Mica teması vardır.

<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); 
}

NavigationView ile tümleştirme

Gezinti görünümünde yerleşik bir geri düğmesi ve bölme geçiş düğmesi vardır. Fluent Design kılavuzu, özel bir başlık çubuğu kullanıldığında bu denetimlerin başlık çubuğuna yerleştirilmesini önerir.

Bu örnekte, gezinti görünümünde geri düğmesini ve bölme iki durumlu düğmesini gizleyerek ve bunun yerine başlık çubuğundaki ilgili düğmeleri kullanarak TitleBar denetiminin NavigationView denetimiyle tümleştirilmesi gösterilmektedir.

<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 ve WinUI 2

TitleBar denetimi UWP ve WinUI 2 için kullanılamaz. Bunun yerine bkz . Başlık çubuğu özelleştirme (UWP uygulamaları).