How to set Icon and color for Winui3 Titlebar application?

Question

How to set Icon and color for Winui3 Titlebar application?

Sachi 221

Hi
i am creating a winui3 application i want these
1.how to add icon to top right corner of title bar window
2.how to remove window title
3.how to change title bar color

Accepted answer

0 additional answers

Your answer

Answer 1

Castorix31 90,686

With ExtendsContentIntoTitleBar + SetTitleBar (on Windows 10, with a Manifest for >=Windows 8 compatibility)
See : Title bar customization

A test (on Windows 10 21H1):

Sachi 221 Reputation points

2022-04-25T16:06:51.19+00:00

@Castorix31
Hi,
Thank you for prompt reply can you please send me the code of this exactly this is what i am looking for it wil be helpful.
Castorix31 90,686 Reputation points

2022-04-26T06:09:55.63+00:00
You can put anything as parameter of SetTitleBar

In my test :

ExtendsContentIntoTitleBar = true; SetTitleBar(AppTitleBar);

XAML : AppTitleBar
Sachi 221 Reputation points

2022-04-26T10:56:03.887+00:00

ExtendsContentIntoTitleBar = true;
SetTitleBar(AppTitleBar);
this line disabling right side buttons like close,maximize and minimize

Castorix31 90,686

Are you on Windows 10 ?
As I said, on Windows 10, you must update the Manifest (I don't know if it is needed on Windows 11 too) :

To be added :

 <compatibility xmlns="urn:schemas-microsoft-com:compatibility.v1">
    <application>
      <!-- A list of the Windows versions that this application has been tested on and is
           is designed to work with. Uncomment the appropriate elements and Windows will 
           automatically selected the most compatible environment. -->

      <!-- Windows Vista -->
      <!--<supportedOS Id="{e2011457-1546-43c5-a5fe-008deee3d3f0}" />-->

      <!-- Windows 7 -->
      <!--<supportedOS Id="{35138b9a-5d96-4fbd-8e2d-a2440225f93a}" />-->

      <!-- Windows 8 -->
      <supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}" />

      <!-- Windows 8.1 -->
      <supportedOS Id="{1f676c76-80e1-4239-95bb-83d0f6d0da78}" />

      <!-- Windows 10 -->
      <maxversiontested Id="10.0.19041.0"/>
      <supportedOS Id="{8e0f7a12-bfb3-4fe8-b9a5-48fd50a15a9a}" />

    </application>
  </compatibility>

Sachi 221 Reputation points

2022-04-26T11:40:43.897+00:00

yes i am using windows 10
Sachi 221 Reputation points

2022-04-26T12:16:35.237+00:00

in particular where i need to add those above line in my manifest file
Castorix31 90,686 Reputation points

2022-04-26T12:22:27.793+00:00

My Manifest file for this test : app.manifest
Sachi 221 Reputation points

2022-04-27T04:57:58.757+00:00

Hi
Thank you so much its working now one more help
Can i add extra button to titlebar like close,maximize and minimize
i want to add an overlay button left side of minimize button how can i add?
please suggest me
Sachi 221 Reputation points

2022-04-27T14:00:22.513+00:00

@Castorix31 can u help me to add one more captionButton to titlebar like close,min,max i need to add compact overlay button and it should work(functinality)
Castorix31 90,686 Reputation points

2022-04-27T14:14:33.547+00:00

It does not seem to work anymore in WinUI 3 / Windows 10
I tested the method for WinUI 2 at : title-bar and it does not work for me (the Button ignores input)
and when I click on WinUI 3 Tab, they say :
This means that you can't interact with elements in the title bar area except through keyboard input and focus. We don't recommend this because it presents discoverability and accessibility issues.
Sachi 221 Reputation points

2022-04-28T11:30:00.097+00:00

So there is no way to create customized interactive button?
Castorix31 90,686 Reputation points

2022-04-28T12:56:02.957+00:00

On Windows 10, apparently no
You can see/particpate at this thread : TitleBar Interaction and functionality #6070
Sachi 221 Reputation points

2022-04-29T10:37:10.52+00:00

okay thank you
Sachi 221 Reputation points

2022-05-02T12:16:45.973+00:00

Hi, @Castorix31
iam running my app in unpackaged mode the window caption buttons not working in unpackaged mode but in packaged mode its working im using same customize title bar also updated manifest with urs code what causing the application not run in unpackaged i mean the caption buttons min,max,close?
Castorix31 90,686 Reputation points

2022-05-02T12:23:11.887+00:00

You say system buttons don't work in Unpackaged app ?
The only reason on Windows 10 is a missing/bad manifest
In particular the line for Windows 8
<supportedOS Id="{4a2f28e3-53b9-4441-ba9c-d69d4a4a6e38}" />

(I only tested in Unpackaged app, with the manifest I posted that I use for my tests)
Sachi 221 Reputation points

2022-05-02T12:49:27.453+00:00

but its not working for me in unpackaged mode of winui3 what to do?
Sachi 221 Reputation points

2022-05-02T12:54:38.95+00:00

Is there any dependency we need to add to make winui3 app run in unpackaged? may those dependency causing issue to not work buttons
Castorix31 90,686 Reputation points

2022-05-02T13:18:44.223+00:00
Are you sure you use a Manifest, with, in .csproj, the manifest name

<ApplicationManifest>app.manifest</ApplicationManifest>

and in code

ExtendsContentIntoTitleBar = true; SetTitleBar(AppTitleBar);

Then the System Buttons are available like in the GIF I posted
Sachi 221 Reputation points

2022-05-02T13:40:57.097+00:00

yes i am using that both code then also not working if i remove ExtendsContentIntoTitleBar=true then it works but customized not working
Sachi 221 Reputation points

2022-05-02T13:42:01.33+00:00

you can see this
https://github.com/microsoft/microsoft-ui-xaml/issues/6634
Castorix31 90,686 Reputation points

2022-05-02T14:01:37.93+00:00

They say that Manifest fixes it in the answer 1815
Sachi 221 Reputation points

2022-05-03T01:38:57.637+00:00

But even I have added it in my appmanifest file .
Castorix31 90,686 Reputation points

2022-05-03T06:28:09.733+00:00

Post a link to a minimal test project so that we can check...
If the Manifest is correct, it must work
Sachi 221 Reputation points

2022-05-09T06:04:25.183+00:00

the same manifest im using and tried in windows 11 its working fine the caption buttons working fine but in windows10 causing issue is there a way i can hide the default min/max/close and build custom?
Castorix31 90,686 Reputation points

2022-05-09T06:38:15.05+00:00

But Windows 11 seems different...
Otherwise, System buttons are defined in generic.xaml
So you can copy all the block <Style TargetType="ContentControl" x:Key="WindowChromeStyle">...
and paste in inside App.xaml, inside <ResourceDictionary>
Then you can modify anything
(I tested by just updating their position)
Sachi 221 Reputation points

2022-05-09T10:28:23.92+00:00

where i see this generic.xaml ? i mean under which folder
Sachi 221 Reputation points

2022-05-09T10:53:32.297+00:00

Getting access voilation exception after adding this style to App.xaml

<Style TargetType="ContentControl" x:Key="WindowChromeStyle">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Grid x:Name="LayoutRoot">
<Grid x:Name="TitleBarMinMaxCloseContainer" Visibility="Collapsed">
<Grid x:Name="MinMaxCloseContainer"/>
</Grid>
<ContentPresenter x:Name="ClientAreaPresenter"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Foreground="{TemplateBinding Foreground}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

refered: https://github.com/microsoft/microsoft-ui-xaml/issues/5730
Sachi 221 Reputation points

2022-05-09T12:06:30.793+00:00

Im getting exception as Access voilation after adding those styles in App.xaml can u please share me ur Test application once i wil try to run that in unpackage mode opf winui3 and see wether its works and any changes are there please do send me the test app project
it will be helpful for me.
Sachi 221 Reputation points

2022-06-17T05:52:35.357+00:00

Hi @Castorix31 can we change the titlename dynamically when we navigate to Pages in Winui3?
Castorix31 90,686 Reputation points

2022-06-17T06:38:14.553+00:00

You can just change the title of the Window class (this.Title if you're inside the class)
For example, with a NavigationView and SelectionChanged event :

Share via

How to set Icon and color for Winui3 Titlebar application?

0 additional answers

Your answer