Başlık çubuğu özelleştirme

Windows, her pencere için varsayılan bir başlık çubuğu sağlar ve uygulamanızın kişiliğiyle eşleşecek şekilde özelleştirmenize olanak tanır. Varsayılan başlık çubuğu, pencereyi sürükleyip yeniden boyutlandırma gibi bazı standart bileşenler ve temel işlevlerle birlikte gelir.

Başlık çubuğunu gösteren bir Windows uygulaması

Uygulamanızın başlık çubuğunu, kabul edilebilir başlık çubuğu alanı içeriğini ve önerilen kullanıcı arabirimi desenlerini özelleştirme yönergeleri için Başlık çubuğu tasarım makalesine bakın.

Başlık çubuğu için Windows 11 Fluent Design kılavuzuna bakın

Uyarı

Bu makalede, UWP ve WinUI 2 kullanan uygulamalar için başlık çubuğunun nasıl özelleştirileceği gösterilmektedir. Windows Uygulama SDK'sı ve WinUI 3 kullanan uygulamalar için bkz. Windows Uygulama SDK'sı için başlık çubuğu özelleştirme .

UWP uygulamanızı Windows Uygulama SDK'sına geçirmeyi düşünüyorsanız lütfen pencere işlevselliği geçiş kılavuzumuzu görüntüleyin. Daha fazla bilgi için bkz. Pencereleme işlevselliğinin geçişi.

Şunlar için geçerlidir: UWP/WinUI 2
Önemli API'ler: ApplicationView.TitleBar özelliği, ApplicationViewTitleBar sınıfı, CoreApplicationViewTitleBar sınıfı

Başlık çubuğu bileşenleri

Bu liste, standart başlık çubuğunun bileşenlerini açıklar.

Dikdörtgen başlık çubuğu
Başlık metni
Sistem menüsü - Uygulama simgesine veya başlık çubuğuna sağ tıklayarak erişilir
Altyazı denetimleri
- Simge Durumuna Küçült düğmesi
- Ekranı Büyüt/Eski Haline Döndür düğmesi
- Kapat düğmesi

UWP uygulamalarında, ApplicationView ve CoreApplicationView sınıflarının üyelerini kullanarak başlık çubuğunu özelleştirebilirsiniz. Başlık çubuğunuzun görünümünü gereken özelleştirme düzeyine göre aşamalı olarak değiştirmek için birden çok API vardır.

Uyarı

UWP uygulamalarında ikincil pencereler için kullanılan Windows.UI.WindowManagement.AppWindow sınıfı, başlık çubuğu özelleştirmesini desteklemez. İkincil pencereler kullanan bir UWP uygulamasının başlık çubuğunu özelleştirmek için, ApplicationView ile birden çok görünümü gösterme'de açıklandığı gibi ApplicationView kullanın.

Başlık çubuğunu ne kadar özelleştirmek gerekiyor?

Başlık çubuğuna uygulayabileceğiniz iki özelleştirme düzeyi vardır: varsayılan başlık çubuğuna küçük değişiklikler uygulayın veya uygulama tuvalinizi başlık çubuğu alanına genişletip tamamen özel içerik sağlayın.

Basit

Başlık çubuğu rengini değiştirme gibi basit özelleştirmeler için, uygulama pencerenizin başlık çubuğu nesnesinde başlık çubuğu öğeleri için kullanmak istediğiniz renkleri belirtmek üzere özellikleri ayarlayabilirsiniz. Bu durumda sistem, uygulama başlığını çizme ve sürükleme alanlarını tanımlama gibi başlık çubuğunun diğer tüm yönlerinden sorumlu olur.

Tamamen dolu

Diğer seçeneğiniz, varsayılan başlık çubuğunu gizlemek ve kendi özel içeriğiniz ile değiştirmektir. Örneğin, başlık çubuğu alanına metin, arama kutusu veya özel menüler yerleştirebilirsiniz. Bir malzeme olan Micagibi bir arka planı başlık çubuğu alanına genişletmek için de bu seçeneği kullanmanız gerekir.

Tam özelleştirmeyi tercih ettiğinizde, başlık çubuğu alanına içerik yerleştirmek sizin sorumluluğunuzdadır ve kendi sürükleme bölgenizi tanımlayabilirsiniz. Başlık denetimleri (sistem Kapat, Simge Durumuna Küçült ve Büyüt düğmeleri) sistem tarafından hala kullanılabilir ve işlenir, ancak uygulama başlığı gibi öğeler kullanılamaz. Bu öğeleri uygulamanızın ihtiyaç duyduğu şekilde oluşturmanız gerekir.

Basit özelleştirme

Yalnızca başlık çubuğu renklerini veya simgesini özelleştirmek istiyorsanız, uygulama pencerenizin başlık çubuğu nesnesinde özellikleri ayarlayabilirsiniz.

Başlık

Varsayılan olarak, başlık çubuğunda uygulamanın görünen adı pencere başlığı olarak gösterilir. Görünen ad Package.appxmanifest dosyasında ayarlanır.

Başlığa özel metin eklemek için ApplicationView.Title özelliğini burada gösterildiği gibi bir metin değeri olarak ayarlayın.

public MainPage()
{
    this.InitializeComponent();

    ApplicationView.GetForCurrentView().Title = "Custom text";
}

Metniniz pencere başlığına eklenir ve bu başlık "özel metin - uygulama görünen adı" olarak görüntülenir. Uygulama görünen adı olmadan özel bir başlık göstermek için , Tam özelleştirme bölümünde gösterildiği gibi varsayılan başlık çubuğunu değiştirmeniz gerekir.

Renkler

Bu örnekte ApplicationViewTitleBar örneğinin nasıl alınıp renk özelliklerinin nasıl ayarlanacağı gösterilmektedir.

Bu kod, Window.Activate çağrısından sonra veya uygulamanızın ilk sayfasında uygulamanızın OnLaunched yöntemine (App.xaml.cs) yerleştirilebilir.

// using Windows.UI;
// using Windows.UI.ViewManagement;

var titleBar = ApplicationView.GetForCurrentView().TitleBar;

// Set active window colors
titleBar.ForegroundColor = Colors.White;
titleBar.BackgroundColor = Colors.Green;
titleBar.ButtonForegroundColor = Colors.White;
titleBar.ButtonBackgroundColor = Colors.SeaGreen;
titleBar.ButtonHoverForegroundColor = Colors.White;
titleBar.ButtonHoverBackgroundColor = Colors.DarkSeaGreen;
titleBar.ButtonPressedForegroundColor = Colors.Gray;
titleBar.ButtonPressedBackgroundColor = Colors.LightGreen;

// Set inactive window colors
titleBar.InactiveForegroundColor = Colors.Gainsboro;
titleBar.InactiveBackgroundColor = Colors.SeaGreen;
titleBar.ButtonInactiveForegroundColor = Colors.Gainsboro;
titleBar.ButtonInactiveBackgroundColor = Colors.SeaGreen;

Başlık çubuğu renklerini ayarlarken dikkat etmeniz gereken birkaç şey vardır:

Kapat düğmesinin arka plan rengi, hover ve basılı durumlarına uygulanmaz. Kapat düğmesi her zaman bu durumlar için sistem tanımlı rengi kullanır.
Color özelliğini null olarak ayarlamak, bunu varsayılan sistem rengine sıfırlar.
Saydam renkler ayarlayamazsınız. Rengin alfa kanalı yoksayılır.

Windows, kullanıcıya seçili vurgu rengi başlık çubuğuna uygulama seçeneği sunar. Herhangi bir başlık çubuğu rengi ayarlarsanız, tüm renkleri açıkça ayarlamanızı öneririz. Bu, kullanıcı tanımlı renk ayarları nedeniyle istenmeyen renk bileşimleri olmamasını sağlar.

Tam özelleştirme

Tam başlık çubuğu özelleştirmesini kabul ettiğinizde, uygulamanızın istemci alanı başlık çubuğu alanı da dahil olmak üzere tüm pencereyi kapsayacak şekilde genişletilir. Pencere tarafından sağlanan başlık düğmeleri hariç, tüm pencere için çizim ve giriş işlemleri sizin sorumluluğunuzdadır.

Varsayılan başlık çubuğunu gizlemek ve içeriğinizi başlık çubuğu alanına genişletmek için ExtendViewIntoTitleBar özelliğini olarak trueayarlayın. Bu özelliği uygulamanızın OnLaunched yönteminde (App.xaml.cs) veya uygulamanızın ilk sayfasında ayarlayabilirsiniz.

Tavsiye

Tüm kodu aynı anda görmek için Tam özelleştirme örneği bölümüne bakın.

Bu örnekte CoreApplicationViewTitleBar'ın nasıl alınıp ExtendViewIntoTitleBar özelliğinin trueolarak nasıl ayarlanacağı gösterilmektedir.

using Windows.ApplicationModel.Core;

public MainPage()
{
    this.InitializeComponent();

    // Hide default title bar.
    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;
}

Tavsiye

Uygulamanız kapatılıp yeniden başlatıldığında bu ayar devam eder. Visual Studio'da ExtendViewIntoTitleBar'yi true olarak ayarladıysanız ve varsayılana geri dönmek istiyorsanız, bunu açıkça false olarak ayarlayıp uygulamanızı çalıştırarak kalıcı ayarların üzerine yazmanız gerekir.

Başlık çubuğu içeriği ve sürükleme bölgeleri

Uygulamanız başlık çubuğu alanına genişletildiğinde, başlık çubuğu için kullanıcı arabirimini tanımlamak ve yönetmek sizin sorumluluğunuzdadır. Bu genellikle en azından başlık metnini ve sürükleme bölgesini belirtmeyi içerir. Başlık çubuğunun sürükleme bölgesi, kullanıcının pencereyi taşımak için nereye tıklayıp sürükleyebileceğini tanımlar. Ayrıca kullanıcı sistem menüsünü göstermek için sağ tıklayabileceği yerdir.

Kabul edilebilir başlık çubuğu içeriği ve önerilen kullanıcı arabirimi desenleri hakkında daha fazla bilgi edinmek için bkz. başlık çubuğu tasarımı .

Window.SetTitleBar yöntemini çağırarak ve sürükleme bölgesini tanımlayan bir UIElement geçirerek sürükleme bölgesini belirtirsiniz. (UIElement genellikle diğer öğeleri içeren bir paneldir.) Çağrının ExtendViewIntoTitleBar üzerinde herhangi bir etkiye sahip olması için true özelliği SetTitleBar olarak ayarlanmalıdır.

sürükleyilebilir başlık çubuğu bölgesi olarak içerik Grid ayarlama burada anlatılır. Uygulamanızın ilk sayfası için bu kod, XAML'e ve arka plan koduna eklenir.

<Grid x:Name="AppTitleBar" Background="Transparent">
    <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
    <!-- Using padding columns instead of Margin ensures that the background
         paints the area under the caption control buttons (for transparent buttons). -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
        <ColumnDefinition/>
        <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
    </Grid.ColumnDefinitions>
    <Image Source="Assets/WindowIcon.png" 
           Grid.Column="1"
           HorizontalAlignment="Left"
           Width="16" Height="16"
           Margin="8,0,0,0"/>
    <TextBlock x:Name="AppTitleTextBlock"
               Text="App title" 
               Style="{StaticResource CaptionTextBlockStyle}" 
               Grid.Column="1"
               VerticalAlignment="Center"
               Margin="28,0,0,0"/>
</Grid>

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    // Set XAML element as a drag region.
    Window.Current.SetTitleBar(AppTitleBar);
}

Varsayılan olarak, sistem başlık çubuğunda uygulamanın görünen adı pencere başlığı olarak gösterilir. Görünen ad, Package.appxmanifest dosyasında ayarlanır. Bu değeri alabilir ve özel başlık çubuğunuzda aşağıdaki gibi kullanabilirsiniz.

AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;

Önemli

Belirttiğiniz sürükleme bölgesinin test edilebilir olması gerekir. Varsayılan olarak, gibi Gridbazı kullanıcı arabirimi öğeleri arka plan kümesi olmadığında isabet testlerine katılmaz. Bu, bazı öğeler için saydam bir arka plan fırçası ayarlamanız gerekebileceği anlamına gelir. Daha fazla bilgi için VisualTreeHelper.FindElementsInHostCoordinates ile ilgili açıklamalara bakın.

Örneğin, sürükleme bölgeniz olarak bir Grid tanımlarsanız, sürüklemek için Background="Transparent" ayarlayın.

Bu Kılavuz sürüklenebilir değildir (ancak içindeki görünür öğeler şunlardır): <Grid x:Name="AppTitleBar">.

Bu Kılavuz aynı görünür, ancak kılavuzun tamamı sürüklenebilir: <Grid x:Name="AppTitleBar" Background="Transparent">.

Etkileşimli içerik

Düğme, menü veya arama kutusu gibi etkileşimli denetimleri uygulamanın üst bölümüne yerleştirerek başlık çubuğunda görünmelerini sağlayabilirsiniz. Ancak etkileşimli öğelerinizin kullanıcı girişi aldığından emin olmak ve kullanıcıların pencerenizi hareket ettirmesine izin vermek için izlemeniz gereken birkaç kural vardır.

Bir alanı sürüklenebilir başlık çubuğu bölgesi olarak tanımlamak için SetTitleBar'ı çağırmanız gerekir. Aksi takdirde, sistem sayfanın en üstünde varsayılan sürükleme bölgesini ayarlar. Sistem daha sonra bu alana yapılan tüm kullanıcı girişlerini işler ve girişin denetimlerinize ulaşmasını engeller.
Etkileşimli denetimlerinizi SetTitleBar çağrısı tarafından tanımlanan sürükleme bölgesinin üst kısmına yerleştirin (z sırası daha yüksektir). UIElement, SetTitleBar'ye aktarılırken etkileşimli kontrollerinizi alt öğeleri olarak yapmayın. Bir öğeyi SetTitleBar'a aktardıktan sonra, sistem onu sistem başlık çubuğu gibi davranır ve bu öğeye yönelik tüm işaretçi girişlerini işler.

Burada AutoSuggestBox öğesinden daha AppTitleBaryüksek bir z sırasına sahip olduğundan kullanıcı girişi alır.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid x:Name="AppTitleBar" Background="Transparent">
        <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
        <!-- Using padding columns instead of Margin ensures that the background
             paints the area under the caption control buttons (for transparent buttons). -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
        </Grid.ColumnDefinitions>
        <Image Source="Assets/WindowIcon.png" 
               Grid.Column="1"
               HorizontalAlignment="Left"
               Width="16" Height="16"
               Margin="8,0,0,0"/>
        <TextBlock x:Name="AppTitleTextBlock"
                   Text="App title" 
                   Style="{StaticResource CaptionTextBlockStyle}" 
                   Grid.Column="1"
                   VerticalAlignment="Center"
                   Margin="28,0,0,0"/>
    </Grid>

    <!-- This control has a higher z-order than AppTitleBar, 
         so it receives user input. -->
    <AutoSuggestBox QueryIcon="Find"
                    PlaceholderText="Search"
                    HorizontalAlignment="Center"
                    Width="260" Height="32"/>
</Grid>

Sistem başlık düğmeleri

Sistem, uygulama penceresinin sol üst veya sağ üst köşesini sistem başlık düğmeleri için ayırır (simge durumuna küçült, büyüt/geri yükle, kapat). Sistem, pencereyi sürüklemek, en aza indirmek, en üst düzeye çıkarmak ve kapatmak için en düşük işlevselliğin sağlandığını garanti etmek için resim yazısı düğmesi alanının denetimini elinde tutar. Sistem, soldan sağa diller için sağ üstteki Kapat düğmesini, sağdan sola diller için ise sol üstteki Kapat düğmesini çizer.

Uygulama arka planınız gibi resim yazısı denetim alanının altına içerik çizebilirsiniz, ancak kullanıcının etkileşim kurabilmesini beklediğiniz hiçbir kullanıcı arabirimini yerleştirmemelisiniz. Başlık kontrolleri için giriş sistem tarafından işlendiği için herhangi bir giriş almaz.

Önceki örnekteki bu satırlar, başlık çubuğunu tanımlayan XAML'deki doldurma sütunlarını gösterir. Kenar boşlukları yerine doldurma sütunları kullanıldığında arka plan, resim yazısı denetim düğmelerinin altındaki alanı boyar (saydam düğmeler için). Hem sağ hem de sol doldurma sütunlarını kullanmak, başlık çubuğunuzun hem sağdan sola hem de soldan sağa düzenlerde doğru şekilde davranmasını sağlar.

<Grid.ColumnDefinitions>
    <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
    <ColumnDefinition/>
    <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>

Resim yazısı denetim alanının boyutları ve konumu, başlık çubuğu kullanıcı arabiriminizin düzeninde dikkate alabilmeniz için CoreApplicationViewTitleBar sınıfı tarafından iletilir. Her iki taraftaki ayrılmış bölgenin genişliği SystemOverlayLeftInset veya SystemOverlayRightInset özellikleri ve yüksekliği Height özelliği tarafından verilir.

Resim yazısı düğmelerinin boyutundaki değişikliklere yanıt vermek için LayoutMetricsChanged olayını ele alabilirsiniz. Örneğin, uygulama düzeni soldan sağa ve sağdan sola değişirse bu durum oluşabilir. Başlık çubuğunun boyutuna bağlı kullanıcı arabirimi öğelerinin konumunu doğrulamak ve güncelleştirmek için bu olayı işleyin.

Bu örnekte, başlık çubuğu ölçümlerindeki değişiklikleri hesaba eklemek için başlık çubuğunuzun düzeninin nasıl ayarlayabileceğiniz gösterilmektedir. AppTitleBar, LeftPaddingColumnve RightPaddingColumn daha önce gösterilen XAML'de bildirilir.

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

Resim yazısı düğmelerinde renk ve saydamlık

Uygulama içeriğinizi başlık çubuğu alanına genişlettiğinizde, uygulama arka planınızın gösterilmesini sağlamak için resim yazısı düğmelerinin arka planını saydam hale getirebilirsiniz. Tam saydamlık için genellikle arka planı Colors.Transparent olarak ayarlarsınız. Kısmi saydamlık için, özelliği ayarladığınız Color için alfa kanalını ayarlayın.

Bu başlık çubuğu özellikleri saydam olabilir:

Diğer tüm renk özellikleri alfa kanalını görmezden gelmeye devam eder. ExtendViewIntoTitleBar falseolarak ayarlanırsa, alfa kanalı, tüm ApplicationViewTitleBar renk özelliklerinde her zaman yoksayılır.

Düğme arka plan rengi, Kapat düğmesinin üzerine gelindiğinde ve basıldığında durumlarına uygulanmaz. Kapat düğmesi her zaman bu durumlar için sistem tanımlı rengi kullanır.

Tavsiye

Mica, odaktaki pencereyi ayırt etmeye yardımcı olan hoş bir malzemedir. Windows 11'de uzun ömürlü pencereler için arka plan olarak kullanmanızı öneririz. Pencerenizin istemci alanına Mica uyguladıysanız, başlık çubuğuna genişletebilir ve Mica'nın görünmesi için başlık düğmelerinizi saydam hale getirebilirsiniz. Daha fazla bilgi için bkz. Mica malzeme.

Pencere etkin olmadığında başlık çubuğunu soluk hale getir.

Pencereniz etkin veya etkin olmadığında bunu açıkça ifade etmelisiniz. Başlık çubuğunuzdaki metnin, simgelerin ve düğmelerin rengini en azından değiştirmeniz gerekir.

Pencerenin etkinleştirme durumunu belirlemek için CoreWindow.Activated olayını işleyin ve başlık çubuğu kullanıcı arabiriminizi gerektiği gibi güncelleştirin.

public MainPage()
{
    ...
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
{
    UISettings settings = new UISettings();
    if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
    }
    else
    {
        AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
    }
}

Başlık çubuğunu sıfırlama

Uygulamanız çalışırken yeni bir başlık çubuğu öğesine geçmek için SetTitleBar'ı çağırabilirsiniz. 'ı, 'e parametre olarak geçirebilir ve varsayılan sistem başlık çubuğuna dönmek için ExtendViewIntoTitleBar'ü olarak ayarlayabilirsiniz.

Başlık çubuğunu gösterme ve gizleme

Uygulamanıza tam ekran veya küçük katman modları için destek eklerseniz, uygulamanız bu modlar arasında geçiş yaparken başlık çubuğunuzda değişiklik yapmanız gerekebilir.

Uygulamanız tam ekran veya tablet modu (yalnızca Windows 10)çalıştırıldığında, sistem başlık çubuğunu ve pencere kontrol düğmelerini gizler. Ancak, kullanıcı başlık çubuğunu çağırarak uygulamanın kullanıcı arabiriminin üzerinde bir katman olarak gösterilmesini sağlayabilir.

Başlık çubuğu gizlendiğinde veya çağrıldığında bildirim almak için CoreApplicationViewTitleBar.IsVisibleChanged olayını işleyebilir ve gerektiğinde özel başlık çubuğu içeriğinizi gösterebilir veya gizleyebilirsiniz.

Bu örnekte, önceki örneklerden IsVisibleChanged öğesini göstermek ve gizlemek için AppTitleBar olayının nasıl işleneceğini gösterilmektedir.

public MainPage()
{
    this.InitializeComponent();

    var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

Uyarı

Tam ekran moduna yalnızca uygulamanız tarafından destekleniyorsa girilebilir. Daha fazla bilgi için bkz. ApplicationView.IsFullScreenMode . Tablet modu (yalnızca Windows 10), desteklenen donanımlarda Windows 10'da bir kullanıcı seçeneğidir, bu nedenle bir kullanıcı herhangi bir uygulamayı tablet modunda çalıştırmayı seçebilir.

Yapılması ve yapılmaması gerekenler

Pencereniz etkin veya etkin olmadığında bunu belirgin hale getirin. Başlık çubuğunuzdaki metnin, simgelerin ve düğmelerin rengini en azından değiştirin.
Uygulama tuvalinin üst kenarı boyunca bir sürükleme bölgesi tanımlayın. Sistem başlık çubuklarının yerleşimini eşleştirmek, kullanıcıların bulmasını kolaylaştırır.
Uygulamanın tuvalinde görsel başlık çubuğuyla (varsa) eşleşen bir sürükleme bölgesi tanımlayın.

Tam özelleştirme örneği

Bu örnek, Tam özelleştirme bölümünde açıklanan tüm kodu gösterir.

<Page
    x:Class="WinUI2_ExtendedTitleBar.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:WinUI2_ExtendedTitleBar"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:muxc="using:Microsoft.UI.Xaml.Controls"
    muxc:BackdropMaterial.ApplyToRootOrPageBackground="True">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="48"/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid x:Name="AppTitleBar" Background="Transparent">
            <!-- Width of the padding columns is set in LayoutMetricsChanged handler. -->
            <!-- Using padding columns instead of Margin ensures that the background
                 paints the area under the caption control buttons (for transparent buttons). -->
            <Grid.ColumnDefinitions>
                <ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
                <ColumnDefinition/>
                <ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
            </Grid.ColumnDefinitions>
            <Image Source="Assets/WindowIcon.png" 
                   Grid.Column="1"
                   HorizontalAlignment="Left"
                   Width="16" Height="16"
                   Margin="8,0,0,0"/>
            <TextBlock x:Name="AppTitleTextBlock"
                       Text="App title" 
                       Style="{StaticResource CaptionTextBlockStyle}" 
                       Grid.Column="1"
                       VerticalAlignment="Center"
                       Margin="28,0,0,0"/>
        </Grid>

        <!-- This control has a higher z-order than AppTitleBar, 
             so it receives user input. -->
        <AutoSuggestBox QueryIcon="Find"
                        PlaceholderText="Search"
                        HorizontalAlignment="Center"
                        Width="260" Height="32"/>

        <muxc:NavigationView Grid.Row="1"
                             IsBackButtonVisible="Collapsed"
                             IsSettingsVisible="False">
            <StackPanel>
                <TextBlock Text="Content" 
                           Style="{ThemeResource TitleTextBlockStyle}"
                           Margin="12,0,0,0"/>
            </StackPanel>
        </muxc:NavigationView>
    </Grid>
</Page>

public MainPage()
{
    this.InitializeComponent();

    // Hide default title bar.
    CoreApplicationViewTitleBar coreTitleBar = 
        CoreApplication.GetCurrentView().TitleBar;
    coreTitleBar.ExtendViewIntoTitleBar = true;

    // Set caption buttons background to transparent.
    ApplicationViewTitleBar titleBar = 
        ApplicationView.GetForCurrentView().TitleBar;
    titleBar.ButtonBackgroundColor = Colors.Transparent;

    // Set XAML element as a drag region.
    Window.Current.SetTitleBar(AppTitleBar);

    // Register a handler for when the size of the overlaid caption control changes.
    coreTitleBar.LayoutMetricsChanged += CoreTitleBar_LayoutMetricsChanged;

    // Register a handler for when the title bar visibility changes.
    // For example, when the title bar is invoked in full screen mode.
    coreTitleBar.IsVisibleChanged += CoreTitleBar_IsVisibleChanged;

    // Register a handler for when the window activation changes.
    Window.Current.CoreWindow.Activated += CoreWindow_Activated;
}

private void CoreTitleBar_LayoutMetricsChanged(CoreApplicationViewTitleBar sender, object args)
{
    // Get the size of the caption controls and set padding.
    LeftPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayLeftInset);
    RightPaddingColumn.Width = new GridLength(coreTitleBar.SystemOverlayRightInset);
}

private void CoreTitleBar_IsVisibleChanged(CoreApplicationViewTitleBar sender, object args)
{
    if (sender.IsVisible)
    {
        AppTitleBar.Visibility = Visibility.Visible;
    }
    else
    {
        AppTitleBar.Visibility = Visibility.Collapsed;
    }
}

 private void CoreWindow_Activated(CoreWindow sender, WindowActivatedEventArgs args)
 {
     UISettings settings = new UISettings();
     if (args.WindowActivationState == CoreWindowActivationState.Deactivated)
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.GrayText));
     }
     else
     {
         AppTitleTextBlock.Foreground = 
            new SolidColorBrush(settings.UIElementColor(UIElementType.WindowText));
     }
 }

Geri Bildirim

Bu sayfayı yararlı buldunuz mu?

Last updated on 2025-06-10

Başlık çubuğu özelleştirme

Başlık çubuğu bileşenleri

Başlık çubuğunu ne kadar özelleştirmek gerekiyor?

Basit

Tamamen dolu

Basit özelleştirme

Başlık

Renkler

Tam özelleştirme

Başlık çubuğu içeriği ve sürükleme bölgeleri

Etkileşimli içerik

Sistem başlık düğmeleri

Resim yazısı düğmelerinde renk ve saydamlık

Pencere etkin olmadığında başlık çubuğunu soluk hale getir.

Başlık çubuğunu sıfırlama

Başlık çubuğunu gösterme ve gizleme

Yapılması ve yapılmaması gerekenler

Tam özelleştirme örneği

İlgili makaleler

Geri Bildirim

Ek kaynaklar