[Preview 4] ExtendsContentIntoTitleBar puts control box on wrong side of window

Describe the bug

They say a picture is worth a thousand words.

Steps to reproduce the bug

1. File > New > Project, WinUI 3 blank desktop application
2. Add this.ExtendsContentIntoTitleBar = true; to the myButton_Click method
3. Run app and click the button
4. Observe control box in wrong location

Version Info

NuGet package version: Microsoft.WinUI 3.0.0-preview4.210210.4 Windows app type:

UWP	Win32
	Yes

Windows 10 version	Saw the problem?
Insider Build (21301)	Yes
October 2020 Update (19042)
May 2020 Update (19041)
November 2019 Update (18363)
May 2019 Update (18362)
October 2018 Update (17763)
April 2018 Update (17134)
Fall Creators Update (16299)
Creators Update (15063)

Device form factor	Saw the problem?
Desktop	Yes
Xbox
Surface Hub
IoT

[dotMorten]

Just to elaborate on @vitorgrs’s suggestion which works. Add the following XAML to app.xaml’s resources section:

 <Style TargetType="ContentControl" x:Key="WindowChromeStyle">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ContentControl">
                    <Grid x:Name="LayoutRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal">
                                    <VisualState.Setters>
                                        <Setter Target="TitleBarMinMaxCloseContainer.Background" Value="{ThemeResource WindowCaptionBackground}" />
                                        <Setter Target="MinimizeButton.Foreground" Value="{ThemeResource WindowCaptionForeground}" />
                                        <Setter Target="MinimizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
                                        <Setter Target="MaximizeButton.Foreground" Value="{ThemeResource WindowCaptionForeground}" />
                                        <Setter Target="MaximizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource WindowCaptionForeground}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
                                    </VisualState.Setters>
                                </VisualState>
                                <VisualState x:Name="WindowInactive">
                                    <VisualState.Setters>
                                        <Setter Target="TitleBarMinMaxCloseContainer.Background" Value="{ThemeResource WindowCaptionBackgroundDisabled}" />
                                        <Setter Target="MinimizeButton.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
                                        <Setter Target="MinimizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
                                        <Setter Target="MaximizeButton.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
                                        <Setter Target="MaximizeButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
                                        <Setter Target="CloseButton.Foreground" Value="{ThemeResource WindowCaptionForegroundDisabled}" />
                                        <Setter Target="CloseButton.Background" Value="{ThemeResource WindowCaptionButtonBackground}" />
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid x:Name="TitleBarMinMaxCloseContainer"
                            HorizontalAlignment="Right"
                            VerticalAlignment="Top"
                            Visibility="{Binding CaptionVisibility, RelativeSource={RelativeSource TemplatedParent}}">
                            <Grid x:Name="MinMaxCloseContainer"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                ColumnDefinitions="Auto,Auto,Auto">
                                <Button x:Name="MinimizeButton"
                                        Style="{StaticResource WindowCaptionButton}"
                                        AutomationProperties.Name="Minimize"
                                        AutomationProperties.AutomationId="_MinimizeButton"
                                        Grid.Column="0"
                                        Content="M 0 0 H 10">
                                </Button>

                                <Button x:Name="MaximizeButton"
                                        Style="{StaticResource WindowCaptionButton}"
                                        AutomationProperties.Name="Maximize"
                                        AutomationProperties.AutomationId="_MaximizeButton"
                                        Grid.Column="1"
                                        Content="M 0 0 H 10 V 10 H 0 V 0">
                                </Button>
                                <Button x:Name="CloseButton"
                                        Style="{StaticResource WindowCaptionButton}"
                                        AutomationProperties.Name="Close"
                                        AutomationProperties.AutomationId="_CloseButton"
                                        Grid.Column="2"
                                        Content="M 0 0 L 10 10 M 10 0 L 0 10">
                                    <Button.Resources>
                                        <ResourceDictionary>
                                            <ResourceDictionary.ThemeDictionaries>
                                                <ResourceDictionary x:Key="Light">
                                                    <StaticResource x:Key="WindowCaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver"/>
                                                    <StaticResource x:Key="WindowCaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed"/>
                                                    <StaticResource x:Key="WindowCaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver"/>
                                                    <StaticResource x:Key="WindowCaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed"/>
                                                </ResourceDictionary>
                                                <ResourceDictionary x:Key="Dark">
                                                    <StaticResource x:Key="WindowCaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver"/>
                                                    <StaticResource x:Key="WindowCaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed"/>
                                                    <StaticResource x:Key="WindowCaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver"/>
                                                    <StaticResource x:Key="WindowCaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed"/>
                                                </ResourceDictionary>
                                                <ResourceDictionary x:Key="HighContrast">
                                                    <StaticResource x:Key="WindowCaptionButtonBackgroundPointerOver" ResourceKey="CloseButtonBackgroundPointerOver"/>
                                                    <StaticResource x:Key="WindowCaptionButtonBackgroundPressed" ResourceKey="CloseButtonBackgroundPressed"/>
                                                    <StaticResource x:Key="WindowCaptionButtonStrokePointerOver" ResourceKey="CloseButtonStrokePointerOver"/>
                                                    <StaticResource x:Key="WindowCaptionButtonStrokePressed" ResourceKey="CloseButtonStrokePressed"/>
                                                </ResourceDictionary>
                                            </ResourceDictionary.ThemeDictionaries>
                                        </ResourceDictionary>
                                    </Button.Resources>
                                </Button>
                            </Grid>
                        </Grid>
                        <ContentPresenter x:Name="ClientAreaPresenter"
                            Content="{TemplateBinding Content}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            Foreground="{TemplateBinding Foreground}"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

You can move ClientAreaPresenter above TitleBarMinMaxCloseContainer to get the content under the buttons

[marb2000]

As @dotMorten highlights, using the SetTitleBar(UIElement) is a requirement for this Preview 4. ExtendsContentIntoTitleBar removes the system Title Bar, so there is no draggable area anymore. SetTitleBar does this work, it allows to set a draggable area.

But I still do see here a bug, the window caption buttons should be on the right or left depending on the orientation of the Window (although, like @riverar pointed, the Window object doesn’t have a RTL property), regardless the SetTitleBar was set.