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, bir Windows uygulamasının kullanıcı arabiriminin 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 3 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 simgesi WinUI 3 Galeri uygulaması, WinUI denetimlerinin ve özelliklerinin etkileşimli örneklerini içerir. uygulamayı Microsoft Store adresinden alın veya GitHub üzerindeki kaynak koduna göz atı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;
}

Sürükleme bölgelerini özelleştir

Kullanıcılar, bir pencereyi başlık çubuğunu sürükleyerek taşır. TitleBar denetimi, İçerik alanının hangi bölümlerini kullanıcıların sürükleyebileceğini ve hangi bölümlerin tıklamalar gibi işaretçi girişlerini alacağını belirler.

Windows Uygulama SDK'sı 2.1.3'ten başlayarak TitleBar denetimi içeriğindeki öğeleri inceler ve sürükleme bölgesinden yalnızca düğmeler, metin kutuları ve birleşik giriş kutuları gibi etkileşimli denetimleri dışlar. Boş alan ve TextBlock gibi etkileşimli olmayan öğeler varsayılan olarak sürüklenebilir, bu nedenle işaretlemenizi değiştirmeniz gerekmez. Önceki sürümlerde, içerik alanındaki boş alan pencere sürüklemeyi engelleyebilirdi. Bu varsayılan davranış, TitleBar_ContentDragRegions çalışma zamanı uyumluluk değişikliğidir. Daha fazla bilgi için bkz. RuntimeCompatibilityOptions.DisabledChanges.

Aşağıdaki örnek, WinUI 3 Galerisi örneğini temel alır. Başlık çubuğu içeriği, bir AutoSuggestBox ve bir Düğme içeren bir Grid'dir. Her iki denetim de tıklanabilir ve yanlarındaki boş alan sürüklenebilir.

<TitleBar x:Name="AppTitleBar" Title="My App">
    <TitleBar.Resources>
        <!-- Stretch the content across the available width of the title bar. -->
        <HorizontalAlignment x:Key="TitleBarContentHorizontalAlignment">Stretch</HorizontalAlignment>
    </TitleBar.Resources>
    <TitleBar.Content>
        <Grid ColumnSpacing="8">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto" />
            </Grid.ColumnDefinitions>

            <AutoSuggestBox MaxWidth="580"
                            VerticalAlignment="Center"
                            PlaceholderText="Search..."
                            QueryIcon="Find" />

            <StackPanel x:Name="RightPanel"
                        Grid.Column="1"
                        Orientation="Horizontal"
                        Spacing="8"
                        VerticalAlignment="Center">
                <Button x:Name="StatusButton"
                        Content="Status"
                        Click="StatusButton_Click" />
            </StackPanel>
        </Grid>
    </TitleBar.Content>
</TitleBar>

Öğenin sürükleme davranışını geçersiz kılma

Başlık çubuğu içeriğindeki bir öğenin varsayılan davranışını geçersiz kılmak için TitleBar.IsDragRegion iliştirilmiş özelliğini ayarlayın. Özellik, null atanabilir bir Boole değeridir.

Değer Behavior
Ayarlanmadı (null) Kararı Başlık Çubuğu denetimi verir. Etkileşimli denetimler tıklanabilir ve diğer öğeler sürüklenebilir.
True Öğe, etkileşimli bir denetim olsa bile sürüklenebilir. Öğedeki işaretçi girişi pencereyi taşır, böylece kullanıcılar öğeye tıklayamaz.
False Öğe, etkileşimli bir denetim olmasa bile tıklanabilir.

Özelliğini StackPanel gibi bir panelde ayarlayabilirsiniz:

  • Bunu False olarak ayarlarsanız, alt öğeleri arasındaki boşluk da dahil olmak üzere panelin tüm alanı tıklanabilir.
  • Bunu True olarak ayarlarsanız, özelliğini False olarak ayarladığınız alt öğeler dışında panel ve alt öğeleri sürüklenebilir olur.

Başlık çubuğunun büyük bir alanını yanlışlıkla sürüklenebilir veya tıklanabilir hale getirmeyecek şekilde, özelliği ihtiyacı olan en küçük öğede ayarlayın.

Bu örnek, bir grup biçimlendirme denetimini bir bütün olarak tıklanabilir hale getirir, böylece kullanıcılar denetimler arasındaki boşluğa bastıklarında pencereyi sürüklemez.

<StackPanel Orientation="Horizontal" Spacing="8" TitleBar.IsDragRegion="False">
    <ComboBox PlaceholderText="Font" />
    <ComboBox PlaceholderText="Size" />
    <ToggleButton Content="Bold" />
</StackPanel>

Kodda, değeri ayarlamak için SetIsDragRegion öğesini çağırın ve varsayılan davranışa dönmek için öğesini ClearValue ile çağırın. Değeri okumak için GetIsDragRegion öğesini çağırın. Özellik ayarlı değilse null döndürür. Değer değiştiğinde TitleBar denetimi sürükleme bölgelerini güncelleştirir.

// Make the button draggable. Users can't click it.
TitleBar.SetIsDragRegion(StatusButton, true);

// Make the button clickable.
TitleBar.SetIsDragRegion(StatusButton, false);

// Clear the value so that the TitleBar control decides.
StatusButton.ClearValue(TitleBar.IsDragRegionProperty);

İçerik değiştiğinde sürükleme bölgelerini güncelleyin

Başlık Çubuğu denetimi, içeriği ayarladığınızda veya değiştirdiğinizde, içerik yüklendiğinde, başlık çubuğunun boyutu değiştiğinde ve bir öğede TitleBar.IsDragRegion değerinin değiştiğinde sürükleme bölgelerini güncelleştirir.

Çalışma zamanında başlık çubuğu içeriğine öğe ekler, kaldırır veya yeniden boyutlandırırsanız, değişikliği yaptıktan sonra RecomputeDragRegions'ı çağırın.

private void AddButton_Click(object sender, RoutedEventArgs e)
{
    RightPanel.Children.Insert(0, new Button { Content = "Extra" });

    // Update the drag regions so that the new button is clickable.
    AppTitleBar.RecomputeDragRegions();
}

Başlık çubuğu içeriği sık sık değişiyorsa, bunun yerine AutoRefreshDragRegions öğesini True olarak ayarlayabilirsiniz. TitleBar denetimi, her yerleşim geçişinden sonra sürükleme bölgelerini güncelleştirir. Bu seçenek performansı etkileyebileceğinden varsayılan olarak False.

<TitleBar x:Name="AppTitleBar" Title="My App" AutoRefreshDragRegions="True">
    <!-- Title bar content that changes at run time. -->
</TitleBar>

Note

Sürükleme bölgeleri yalnızca işaretçi girişini etkiler. Klavye odağını veya ekran okuyucular gibi UI Otomasyonu istemcilerinin başlık çubuğundaki öğelerle etkileşim kurma şeklini değiştirmezler. Başlık çubuğunuzdaki etkileşimli denetimlere klavyeyle yine de ulaşılabildiğinden emin olun.

Uygulamanız TitleBar denetimini kullanmıyorsa, özel başlık çubuğunuzun etkileşimli bölgelerini ayarlamak için InputNonClientPointerSource sınıfını kullanın. Daha fazla bilgi için bkz. Etkileşimli içerik.