Not
Åtkomst till denna sida kräver auktorisation. Du kan prova att logga in eller byta katalog.
Åtkomst till denna sida kräver auktorisation. Du kan prova att byta katalog.
Windows tillhandahåller ett standardnamnfält för varje fönster och gör att du kan anpassa det så att det matchar appens personlighet. Standardrubrikfältet levereras med vissa standardkomponenter och kärnfunktioner som att dra och ändra storlek på fönstret.
Se designartikeln för titelrad för vägledning om hur du anpassar din apps titelrad, acceptabelt innehåll i titelraden och rekommenderade användargränssnittsmönster.
Anmärkning
Den här artikeln visar hur du anpassar namnlisten för appar som använder UWP och WinUI 2. För appar som använder Windows App SDK och WinUI 3, se Anpassning av namnlist för Windows App SDK.
Om du överväger att migrera UWP-appen till Windows App SDK kan du läsa migreringsguiden för fönsterfunktioner. För mer information, se migrering av fönsterfunktioner.
- Gäller för: UWP/WinUI 2
- Viktiga API:er: Egenskapen ApplicationView.TitleBar, klassen ApplicationViewTitleBar, Klassen CoreApplicationViewTitleBar
Komponenter i titelraden
I den här listan beskrivs komponenterna i standardrubrikfältet.
- Rektangel för titelrad
- Rubriktext
- Systemmeny – nås genom att klicka på appikonen eller högerklicka på namnlisten
- Undertextkontroller
- Minimera-knapp
- Knappen Maximera/återställa
- Stäng-knapp
I UWP-program kan du anpassa namnlisten med hjälp av medlemmar i klasserna ApplicationView och CoreApplicationView . Det finns flera API:er för att gradvis ändra utseendet på namnlisten baserat på vilken anpassningsnivå som krävs.
Anmärkning
Klassen Windows.UI.WindowManagement.AppWindow , som används för sekundära fönster i UWP-appar, stöder inte anpassning av namnlisten. Om du vill anpassa namnlisten för en UWP-app som använder sekundära fönster använder du ApplicationView enligt beskrivningen i Visa flera vyer med ApplicationView.
Hur mycket du vill anpassa namnlisten
Det finns två anpassningsnivåer som du kan tillämpa på namnlisten: tillämpa mindre ändringar på standardrubrikfältet eller utöka apparbetsytan till området med namnlisten och tillhandahålla helt anpassat innehåll.
Enkel
För enkel anpassning, som att ändra namnlistfärgen, kan du ange egenskaper i appfönstrets namnlistobjekt för att ange de färger som du vill använda för rubrikfältelement. I det här fallet har systemet ansvaret för alla andra aspekter av titelraden, till exempel att rita appens titel och definiera dragområden.
Fullständig
Det andra alternativet är att dölja standardrubrikfältet och ersätta det med ditt eget anpassade innehåll. Du kan till exempel placera text, en sökruta eller anpassade menyer i namnlistområdet. Du måste också använda det här alternativet för att utöka ett material bakgrund, till exempel Mica, till rubrikfältet.
När du väljer fullständig anpassning ansvarar du för att placera innehåll i namnlistområdet och du kan definiera din egen dragregion. Undertextkontrollerna (systemknapparna Stäng, Minimera och Maximera) är fortfarande tillgängliga och hanteras av systemet, men element som apprubriken är det inte. Du måste skapa dessa element själv efter behov av din app.
Enkel anpassning
Om du bara vill anpassa namnlistens färger eller ikon kan du ange egenskaper i namnlistobjektet för appfönstret.
Titel
Som standard visar namnlisten appens visningsnamn som fönsterrubrik. Visningsnamnet anges i Package.appxmanifest filen.
Om du vill lägga till anpassad text i rubriken anger du egenskapen ApplicationView.Title till ett textvärde, som du ser här.
public MainPage()
{
this.InitializeComponent();
ApplicationView.GetForCurrentView().Title = "Custom text";
}
Texten läggs till i fönstrets rubrik, som visas som "anpassad text – appens visningsnamn". Om du vill visa en anpassad rubrik utan appens visningsnamn måste du ersätta standardrubrikfältet enligt det som visas i avsnittet Fullständig anpassning .
Färger
Det här exemplet visar hur du hämtar en instans av ApplicationViewTitleBar och anger dess färgegenskaper.
Den här koden kan placeras i appens OnLaunched-metod (App.xaml.cs), efter anropet till Window.Activate eller på appens första sida.
// 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;
Det finns några saker att tänka på när du anger namnlistfärger:
- Bakgrundsfärgen för knapparna tillämpas inte på stängknappen i hovra-,-, och nedtryckta-tillstånd. Knappen Stäng använder alltid den systemdefinierade färgen för dessa tillstånd.
- Om du anger en färgegenskap till
nullåterställs den till standardsystemfärgen. - Du kan inte ange transparenta färger. Färgens alfakanal ignoreras.
Windows ger en användare möjlighet att använda sin valda accentfärg på namnlisten. Om du anger någon namnlistfärg rekommenderar vi att du uttryckligen anger alla färger. Detta säkerställer att det inte finns några oavsiktliga färgkombinationer som inträffar på grund av användardefinierade färginställningar.
Helt anpassningsbar
När du väljer fullständig anpassning av namnlisten utökas appens klientområde så att det täcker hela fönstret, inklusive området med namnlisten. Du ansvarar för ritning och indatahantering för hela fönstret förutom bildtextknapparna, som fortfarande tillhandahålls av fönstret.
Om du vill dölja standardrubrikfältet och utöka innehållet till namnlistområdet anger du egenskapen ExtendViewIntoTitleBar till true. Du kan ange den här egenskapen i appens OnLaunched metod (App.xaml.cs) eller på appens första sida.
Tips/Råd
Se avsnittet Exempel på fullständig anpassning för att se hela koden på en gång.
Det här exemplet visar hur du hämtar CoreApplicationViewTitleBar och anger egenskapen ExtendViewIntoTitleBar till true.
using Windows.ApplicationModel.Core;
public MainPage()
{
this.InitializeComponent();
// Hide default title bar.
var coreTitleBar = CoreApplication.GetCurrentView().TitleBar;
coreTitleBar.ExtendViewIntoTitleBar = true;
}
Tips/Råd
Den här inställningen bevaras när din app stängs och startas om. Om du anger ExtendViewIntoTitleBar till truei Visual Studio och sedan vill återgå till standardvärdet bör du uttryckligen ange det till false och köra appen för att skriva över den bevarade inställningen.
Innehåll i namnlisten och områden för att dra
När appen utökas till namnlistområdet ansvarar du för att definiera och hantera användargränssnittet för namnlisten. Det innefattar vanligtvis, åtminstone, rubriktext och draområdet. Dra-regionen i namnlisten definierar var användaren kan klicka och dra för att flytta runt fönstret. Det är också där användaren kan högerklicka för att visa systemmenyn.
Mer information om acceptabelt innehåll i namnlisten och rekommenderade användargränssnittsmönster finns i designen Namnlist.
Du anger dragregionen genom att anropa metoden Window.SetTitleBar och skicka in ett UIElement som definierar dragregionen. (UIElement är vanligtvis en panel som innehåller andra element.) Egenskapen ExtendViewIntoTitleBar måste anges till true för att anropet på SetTitleBar ska ha någon effekt.
Så här ställer du in ett Grid-innehållsområde som den draggängliga namnlisten. Den här koden finns i XAML och code-behind för appens första sida.
<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);
}
Som standard visar systemrubrikfältet appens visningsnamn som fönsterrubrik. Visningsnamnet anges i filen Package.appxmanifest. Du kan hämta det här värdet och använda det i din anpassade titellist så här.
AppTitleTextBlock.Text = AppInfo.Current.DisplayInfo.DisplayName;
Viktigt!
Den dragregion som du anger måste vara testbar. Som standard deltar vissa gränssnittselement, till exempel Grid, inte i träfftestning när de inte har någon bakgrundsuppsättning. Det innebär att du för vissa element kan behöva ange en transparent bakgrundsborste. Mer information finns i kommentarerna på VisualTreeHelper.FindElementsInHostCoordinates .
Om du till exempel definierar ett rutnät som din dragregion anger du Background="Transparent" så att det kan dras.
Det här rutnätet kan inte dras (men synliga element i det är): <Grid x:Name="AppTitleBar">.
Det här rutnätet ser likadant ut, men hela rutnätet kan dras: <Grid x:Name="AppTitleBar" Background="Transparent">.
Interaktivt innehåll
Du kan placera interaktiva kontroller, till exempel knappar, menyer eller en sökruta, i den övre delen av appen så att de visas i namnlisten. Det finns dock några regler som du måste följa för att se till att dina interaktiva element tar emot användarindata samtidigt som användarna kan flytta runt fönstret.
- Du måste anropa SetTitleBar för att definiera ett område som den dragna namnlistregionen. Om du inte gör det anger systemet standarddragregionen överst på sidan. Systemet hanterar sedan alla användarindata till det här området och förhindrar att indata når dina kontroller.
- Placera dina interaktiva kontroller överst i dra-regionen som definieras av anropet till SetTitleBar- (med en högre z-ordning). Gör inte dina interaktiva kontroller underordnade UIElement som skickas till
SetTitleBar. När du har överfört ett element tillSetTitleBarbehandlar systemet det som systemrubrikfältet och hanterar alla pekarindata till elementet.
Här har elementet AutoSuggestBox en högre z-order än AppTitleBar, så det tar emot användarindata.
<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>
Systemknappar för titelrad
Systemet reserverar det övre vänstra eller övre högra hörnet i appfönstret för knapparna för systembeskrivning (minimera, maximera/återställa, stäng). Systemet behåller kontrollen över knappområdet för bildtexten för att garantera att minsta möjliga funktionalitet tillhandahålls för att dra, minimera, maximera och stänga fönstret. Systemet drar knappen Stäng i det övre högra hörnet för språk från vänster till höger och det övre vänstra för höger-till-vänster-språk.
Du kan rita innehåll under kontrollområdet för bildtext, till exempel din appbakgrund, men du bör inte placera något användargränssnitt som du förväntar dig att användaren ska kunna interagera med. Den tar inte emot några indata eftersom indata för beskrivningskontrollerna hanteras av systemet.
Dessa rader från föregående exempel visar utfyllnadskolumnerna i XAML som definierar namnlisten. Genom att använda utfyllnadskolumner i stället för marginaler ser du till att bakgrunden målar upp området under knapparna för textkontroll (för transparenta knappar). Genom att använda både höger och vänster utfyllnadskolumner ser du till att namnlisten fungerar korrekt i både höger-till-vänster- och vänster-till-höger-layouter.
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="LeftPaddingColumn" Width="0"/>
<ColumnDefinition/>
<ColumnDefinition x:Name="RightPaddingColumn" Width="0"/>
</Grid.ColumnDefinitions>
Måtten och positionen för kontrollområdet för bildtexten kommuniceras av klassen CoreApplicationViewTitleBar så att du kan ta hänsyn till det i layouten för ditt användargränssnitt för namnlisten. Bredden på den reserverade regionen på varje sida anges av egenskaperna SystemOverlayLeftInset eller SystemOverlayRightInset och dess höjd anges av egenskapen Height .
Du kan hantera händelsen LayoutMetricsChanged för att svara på ändringar i storleken på bildtextknapparna. Detta kan till exempel inträffa om applayouten ändras från vänster till höger till höger till vänster. Hantera den här händelsen för att verifiera och uppdatera placering av gränssnittselement som är beroende av namnlistens storlek.
Det här exemplet visar hur du justerar layouten för namnlisten för att ta hänsyn till ändringar i måtten i namnlisten.
AppTitleBar, LeftPaddingColumnoch RightPaddingColumn deklareras i XAML som visades tidigare.
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);
}
Färg och transparens i bildtextknappar
När du utökar appinnehållet till området med namnlisten kan du göra bakgrunden för bildtextknapparna transparent så att appens bakgrund visas. Du ställer vanligtvis in bakgrunden på Colors.Transparent för fullständig transparens. För partiell transparens, ange alfakanalen för färg som du ställer in egenskapen på.
De här egenskaperna för namnlisten kan vara transparenta:
- KnappBakgrundsfärg
- ButtonHoverBackgroundColor
- ButtonPressedBackgroundColor
- KnappInaktivBakgrundsfärg
Alla andra färgegenskaper fortsätter att ignorera alfakanalen. Om ExtendViewIntoTitleBar är inställt på falseignoreras alfakanalen alltid för alla ApplicationViewTitleBar färgegenskaper.
Bakgrundsfärgen för Stäng-knappen tillämpas inte på hover-läge och tryckt lägen. Knappen Stäng använder alltid den systemdefinierade färgen för dessa tillstånd.
Tips/Råd
Mica är ett härligt material som hjälper till att särskilja vilket fönster som är i fokus. Vi rekommenderar det som bakgrund för långlivade fönster i Windows 11. Om du har tillämpat Mica i klientområdet i fönstret kan du utöka det till namnlistområdet och göra bildtextknapparna transparenta så att Mica visas. Mer information om Mica-material finns i .
Dimma titelraden när fönstret är inaktiv
Du bör göra det uppenbart när fönstret är aktivt eller inaktivt. Du bör åtminstone ändra färgen på texten, ikonerna och knapparna i namnlisten.
Hantera händelsen CoreWindow.Activated för att fastställa aktiveringstillståndet för fönstret och uppdatera användargränssnittet för namnlisten efter behov.
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));
}
}
Återställ titellisten
Du kan anropa SetTitleBar för att växla till ett nytt rubrikfältelement medan appen körs. Du kan också skicka null som parameter till SetTitleBar och ställa in ExtendViewIntoTitleBar till false för att återgå till standardfältet för systemrubriker.
Visa och dölj namnlisten
Om du lägger till stöd för helskärmsläge eller kompakt överlägg lägen i appen kan du behöva göra ändringar i namnlisten när appen växlar mellan dessa lägen.
När appen körs i helskärmsläge eller surfplatta (endast Windows 10)döljer systemet knapparna för namnlist och bildtextkontroll. Användaren kan dock anropa namnlisten så att den visas som ett överlägg ovanpå appens användargränssnitt.
Du kan hantera CoreApplicationViewTitleBar.IsVisibleChanged-händelsen för att få en notifikation när namnlisten döljs eller visas, och visa eller dölja innehåll i den anpassade namnlisten efter behov.
Det här exemplet visar hur du hanterar händelsen IsVisibleChanged för att visa och dölja elementet AppTitleBar från tidigare exempel.
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;
}
}
Anmärkning
Helskärmsläge kan endast anges om det stöds av din app. Mer information finns i ApplicationView.IsFullScreenMode . Surfplattläge (endast Windows 10) är ett användaralternativ i Windows 10 på maskinvara som stöds, så att en användare kan välja att köra valfri app i surfplattläge.
Vad man bör och inte bör göra
- Gör det uppenbart när ditt fönster är aktivt eller inaktivt. Ändra åtminstone färgen på texten, ikonerna och knapparna i namnlisten.
- Definiera en dragregion längs apparbetsytans övre kant. Genom att matcha placeringen av systemrubrikstaplar blir det enklare för användarna att hitta dem.
- Definiera en dragregion som matchar den visuella titelraden (om det finns någon) på appens arbetsyta.
Fullständigt anpassningsexempel
I de här exemplen visas all kod som beskrivs i avsnittet Fullständig anpassning.
<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));
}
}