Skip to content

Commit 3d873d3

Browse files
Merge pull request #21886 from unoplatform/dev/mazi/extend-titlebar-iii
2 parents c99bf83 + 411a4ab commit 3d873d3

File tree

25 files changed

+886
-33
lines changed

25 files changed

+886
-33
lines changed

src/SamplesApp/UITests.Shared/Microsoft_UI_Windowing/AppWindowPositionAndSize.xaml

Lines changed: 49 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,54 @@
99
x:DefaultBindMode="TwoWay"
1010
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"
1111
mc:Ignorable="d">
12+
<Grid>
13+
<Grid.ColumnDefinitions>
14+
<ColumnDefinition Width="*" />
15+
<ColumnDefinition Width="*" />
16+
</Grid.ColumnDefinitions>
1217

13-
<StackPanel Padding="8" Spacing="8">
14-
<controls:NumberBox Header="X" Value="{x:Bind ViewModel.X}" />
15-
<controls:NumberBox Header="Y" Value="{x:Bind ViewModel.Y}" />
16-
<Button Click="{x:Bind ViewModel.Move}">Move</Button>
17-
<controls:NumberBox Header="Width" Value="{x:Bind ViewModel.Width}" />
18-
<controls:NumberBox Header="Height" Value="{x:Bind ViewModel.Height}" />
19-
<Button Click="{x:Bind ViewModel.Resize}">Resize</Button>
20-
</StackPanel>
18+
<StackPanel Padding="8" Spacing="8">
19+
<controls:NumberBox Header="X" Value="{x:Bind ViewModel.X}" />
20+
<controls:NumberBox Header="Y" Value="{x:Bind ViewModel.Y}" />
21+
<Button Click="{x:Bind ViewModel.Move}">Move</Button>
22+
<controls:NumberBox Header="Width" Value="{x:Bind ViewModel.Width}" />
23+
<controls:NumberBox Header="Height" Value="{x:Bind ViewModel.Height}" />
24+
<Button Click="{x:Bind ViewModel.Resize}">Resize</Button>
25+
</StackPanel>
26+
<StackPanel
27+
Grid.Column="1"
28+
Padding="8"
29+
Spacing="8">
30+
<Button Click="{x:Bind ViewModel.ToggleTitleBar}">Toggle title bar</Button>
31+
<Button Click="{x:Bind ViewModel.ToggleExtendIntoTitleBar}">Toggle extend into titlebar</Button>
32+
<TextBlock>
33+
<Run FontWeight="Bold">ClientWidth:</Run>
34+
<Run Text="{x:Bind ViewModel.ClientWidth, Mode=OneWay}" />
35+
</TextBlock>
36+
<TextBlock>
37+
<Run FontWeight="Bold">ClientHeight:</Run>
38+
<Run Text="{x:Bind ViewModel.ClientHeight, Mode=OneWay}" />
39+
</TextBlock>
40+
41+
<TextBlock Margin="0,8,0,0" Text="XAML Window sizing" />
42+
<TextBlock>
43+
<Run FontWeight="Bold">Width:</Run>
44+
<Run Text="{x:Bind ViewModel.XamlWindowWidth, Mode=OneWay}" />
45+
</TextBlock>
46+
<TextBlock>
47+
<Run FontWeight="Bold">Height:</Run>
48+
<Run Text="{x:Bind ViewModel.XamlWindowHeight, Mode=OneWay}" />
49+
</TextBlock>
50+
51+
<TextBlock Margin="0,8,0,0" Text="XamlRoot content sizing" />
52+
<TextBlock>
53+
<Run FontWeight="Bold">Width:</Run>
54+
<Run Text="{x:Bind ViewModel.XamlRootWidth, Mode=OneWay}" />
55+
</TextBlock>
56+
<TextBlock>
57+
<Run FontWeight="Bold">Height:</Run>
58+
<Run Text="{x:Bind ViewModel.XamlRootHeight, Mode=OneWay}" />
59+
</TextBlock>
60+
</StackPanel>
61+
</Grid>
2162
</Page>

src/SamplesApp/UITests.Shared/Microsoft_UI_Windowing/AppWindowPositionAndSize.xaml.cs

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,21 @@ public AppWindowPositionAndSizeViewModel()
5353
UpdateProperties();
5454
}
5555

56+
public void ToggleTitleBar()
57+
{
58+
var presenter = App.MainWindow.AppWindow.Presenter;
59+
if (presenter is OverlappedPresenter overlappedPresenter)
60+
{
61+
overlappedPresenter.SetBorderAndTitleBar(hasBorder: true, hasTitleBar: !overlappedPresenter.HasTitleBar);
62+
}
63+
}
64+
65+
public void ToggleExtendIntoTitleBar()
66+
{
67+
App.MainWindow.AppWindow.TitleBar.ExtendsContentIntoTitleBar =
68+
!App.MainWindow.AppWindow.TitleBar.ExtendsContentIntoTitleBar;
69+
}
70+
5671
private void OnAppWindowChanged(AppWindow sender, AppWindowChangedEventArgs args) => UpdateProperties();
5772

5873
private void UpdateProperties()
@@ -65,6 +80,12 @@ private void UpdateProperties()
6580
RaisePropertyChanged(nameof(Y));
6681
RaisePropertyChanged(nameof(Width));
6782
RaisePropertyChanged(nameof(Height));
83+
RaisePropertyChanged(nameof(ClientWidth));
84+
RaisePropertyChanged(nameof(ClientHeight));
85+
RaisePropertyChanged(nameof(XamlWindowWidth));
86+
RaisePropertyChanged(nameof(XamlWindowHeight));
87+
RaisePropertyChanged(nameof(XamlRootWidth));
88+
RaisePropertyChanged(nameof(XamlRootHeight));
6889
}
6990

7091
internal XamlRoot XamlRoot { get; set; }
@@ -125,6 +146,18 @@ internal int Height
125146

126147
internal SizeInt32 Size => _size;
127148

149+
internal int ClientWidth => _appWindow.ClientSize.Width;
150+
151+
internal int ClientHeight => _appWindow.ClientSize.Height;
152+
153+
internal double XamlRootWidth => XamlRoot.Size.Width;
154+
155+
internal double XamlRootHeight => XamlRoot.Size.Height;
156+
157+
internal double XamlWindowWidth => App.MainWindow.Bounds.Width;
158+
159+
internal double XamlWindowHeight => App.MainWindow.Bounds.Height;
160+
128161
internal async void Move()
129162
{
130163
try
Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<Window
3+
x:Class="WindowingSamples.CustomTitleBarWindow"
4+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
6+
xmlns:controls="using:WindowingSamples.Controls"
7+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
8+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
9+
mc:Ignorable="d">
10+
11+
<Grid>
12+
<Grid.RowDefinitions>
13+
<RowDefinition Height="Auto" />
14+
<RowDefinition Height="*" />
15+
</Grid.RowDefinitions>
16+
17+
<!-- Custom title bar with fully custom caption buttons -->
18+
<Grid
19+
x:Name="CustomTitleBar"
20+
Grid.Row="0"
21+
Height="40"
22+
Background="{ThemeResource SystemControlAcrylicElementBrush}">
23+
<Grid.ColumnDefinitions>
24+
<ColumnDefinition Width="Auto" />
25+
<ColumnDefinition Width="*" />
26+
<ColumnDefinition Width="Auto" />
27+
</Grid.ColumnDefinitions>
28+
29+
<StackPanel
30+
Grid.Column="0"
31+
Margin="12,0,0,0"
32+
VerticalAlignment="Center"
33+
Orientation="Horizontal"
34+
Spacing="8">
35+
<FontIcon FontSize="16" Glyph="&#xE161;" />
36+
<TextBlock
37+
VerticalAlignment="Center"
38+
FontWeight="SemiBold"
39+
Style="{ThemeResource CaptionTextBlockStyle}"
40+
Text="Custom Caption Buttons" />
41+
</StackPanel>
42+
43+
<Grid x:Name="DraggableBar" Grid.ColumnSpan="2" />
44+
45+
<!-- Custom caption buttons -->
46+
<StackPanel
47+
Grid.Column="2"
48+
Orientation="Horizontal"
49+
Spacing="0">
50+
<Button
51+
x:Name="MinimizeButton"
52+
Width="48"
53+
Height="40"
54+
Background="Transparent"
55+
BorderThickness="0"
56+
Click="MinimizeClick"
57+
ToolTipService.ToolTip="Minimize">
58+
<FontIcon FontSize="10" Glyph="&#xE921;" />
59+
</Button>
60+
<Button
61+
x:Name="MaximizeRestoreButton"
62+
Width="48"
63+
Height="40"
64+
Background="Transparent"
65+
BorderThickness="0"
66+
Click="MaximizeRestoreClick"
67+
ToolTipService.ToolTip="Maximize">
68+
<FontIcon
69+
x:Name="MaximizeRestoreIcon"
70+
FontSize="10"
71+
Glyph="&#xE922;" />
72+
</Button>
73+
<Button
74+
x:Name="CloseButton"
75+
Width="48"
76+
Height="40"
77+
Background="Transparent"
78+
BorderThickness="0"
79+
Click="CloseClick"
80+
ToolTipService.ToolTip="Close">
81+
<Button.Resources>
82+
<SolidColorBrush x:Key="ButtonBackgroundPointerOver" Color="#C42B1C" />
83+
<SolidColorBrush x:Key="ButtonBackgroundPressed" Color="#A22A1B" />
84+
</Button.Resources>
85+
<FontIcon FontSize="10" Glyph="&#xE106;" />
86+
</Button>
87+
</StackPanel>
88+
</Grid>
89+
90+
<ScrollViewer
91+
Grid.Row="1"
92+
Padding="24"
93+
VerticalScrollBarVisibility="Auto">
94+
<StackPanel
95+
MaxWidth="700"
96+
HorizontalAlignment="Center"
97+
VerticalAlignment="Top"
98+
Spacing="16">
99+
<TextBlock
100+
HorizontalAlignment="Center"
101+
FontSize="18"
102+
TextWrapping="Wrap">
103+
<Run FontWeight="Bold">SetBorderAndTitleBar(true, false) Demo</Run>
104+
<LineBreak />
105+
<LineBreak />
106+
This window demonstrates the SetBorderAndTitleBar API with parameters (true, false) to completely extend the client area and hide the system caption buttons. The window has fully custom caption buttons that you can style as needed.</TextBlock>
107+
108+
<Border
109+
Padding="16"
110+
Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
111+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
112+
BorderThickness="1"
113+
CornerRadius="8">
114+
<StackPanel Spacing="12">
115+
<TextBlock
116+
FontSize="16"
117+
FontWeight="SemiBold"
118+
Text="Key Features:" />
119+
<TextBlock TextWrapping="Wrap">• Full control over window appearance</TextBlock>
120+
<TextBlock TextWrapping="Wrap">• Custom caption buttons (minimize, maximize/restore, close)</TextBlock>
121+
<TextBlock TextWrapping="Wrap">• SetBorderAndTitleBar(true, false) hides system buttons</TextBlock>
122+
<TextBlock TextWrapping="Wrap">• Custom button styling and behavior</TextBlock>
123+
</StackPanel>
124+
</Border>
125+
126+
<Border
127+
Padding="16"
128+
Background="{ThemeResource AccentFillColorDefaultBrush}"
129+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
130+
BorderThickness="1"
131+
CornerRadius="8">
132+
<StackPanel Spacing="12">
133+
<TextBlock
134+
FontSize="16"
135+
FontWeight="SemiBold"
136+
Foreground="White"
137+
Text="InputNonClientPointerSource for Maximize:" />
138+
<TextBlock Foreground="White" TextWrapping="Wrap">
139+
The Maximize button uses InputNonClientPointerSource.SetRegionRects to support the Snap Layouts menu on Windows 11. When you hover over the maximize button, you'll see the snap layout options appear.
140+
</TextBlock>
141+
<TextBlock
142+
FontStyle="Italic"
143+
Foreground="White"
144+
TextWrapping="Wrap">
145+
Note: This feature requires Windows 11 and will be a no-op on other platforms.
146+
</TextBlock>
147+
</StackPanel>
148+
</Border>
149+
150+
<Border
151+
Padding="16"
152+
Background="{ThemeResource LayerFillColorDefaultBrush}"
153+
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
154+
BorderThickness="1"
155+
CornerRadius="8">
156+
<StackPanel Spacing="8">
157+
<TextBlock
158+
FontSize="16"
159+
FontWeight="SemiBold"
160+
Text="Try it out:" />
161+
<TextBlock TextWrapping="Wrap">• Click the minimize button to minimize the window</TextBlock>
162+
<TextBlock TextWrapping="Wrap">• Click the maximize button to maximize or restore the window</TextBlock>
163+
<TextBlock TextWrapping="Wrap">• Hover over maximize button on Windows 11 to see Snap Layouts</TextBlock>
164+
<TextBlock TextWrapping="Wrap">• Click the close button (red on hover) to close the window</TextBlock>
165+
<TextBlock TextWrapping="Wrap">• Drag the title bar to move the window</TextBlock>
166+
</StackPanel>
167+
</Border>
168+
</StackPanel>
169+
</ScrollViewer>
170+
</Grid>
171+
</Window>

0 commit comments

Comments
 (0)