Made the titlebar part of the body

src/modules/colorPicker/ColorPickerUI/ColorEditorWindow.xaml

@@ -9,23 +9,41 @@
     xmlns:p="clr-namespace:ColorPicker.Properties"
     Width="440"
     Height="380"
-    Title="{x:Static p:Resources.CP_Title}"
     AutomationProperties.Name="{x:Static p:Resources.cp_editor}"
     ResizeMode="NoResize"
     Topmost="True"
     WindowStartupLocation="CenterScreen"
+    WindowStyle="None"
     mc:Ignorable="d">
     <e:Interaction.Behaviors>
         <behaviors:CloseZoomWindowBehavior />
     </e:Interaction.Behaviors>
-    <Grid>
-        <Grid.RowDefinitions>
-            <RowDefinition Height="Auto" />
-            <RowDefinition Height="*" />
-        </Grid.RowDefinitions>
-        <ContentPresenter
+    <Border x:Name="MainBorder" BorderBrush="{DynamicResource {x:Static SystemColors.ActiveBorderBrushKey}}">
+        <Grid>
+            <Grid.RowDefinitions>
+                <RowDefinition Height="Auto" />
+                <RowDefinition Height="*" />
+            </Grid.RowDefinitions>
+            <DockPanel Grid.Row="0" Background="Transparent" MouseLeftButtonDown="TitleBar_MouseDown">
+                <Image Source="pack://application:,,,/Assets/ColorPicker/icon.ico" 
+                   Width="20" Height="20"
+                   Margin="10,5,5,8"/>
+                <TextBlock Text="{x:Static p:Resources.CP_Title}" VerticalAlignment="Center" Margin="10"/>
+                <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                    <Button 
+                    Content="&#xE711;" 
+                    FontFamily="{StaticResource IconFontFamily}"
+                    Width="50" 
+                    Height="30"
+                    Margin="10,-10,-2,1"
+                    Style="{StaticResource TitleBarCloseButtonStyleIonut}"
+                    Click="Close_Click"/>
+                </StackPanel>
+            </DockPanel>
+            <ContentPresenter
             x:Name="contentPresenter"
             Grid.Row="1"
             Content="{Binding Content}" />
-    </Grid>
+        </Grid>
+    </Border>
 </Window>

src/modules/colorPicker/ColorPickerUI/ColorEditorWindow.xaml.cs

@@ -3,7 +3,10 @@
 // See the LICENSE file in the project root for more information.
 
 using System;
+using System.Runtime.InteropServices;
 using System.Windows;
+using System.Windows.Input;
+using System.Windows.Interop;
 using ColorPicker.Helpers;
 using ManagedCommon;
 
@@ -33,6 +36,54 @@ private void ColorEditorWindow_Closing(object sender, System.ComponentModel.Canc
         protected override void OnSourceInitialized(EventArgs e)
         {
             base.OnSourceInitialized(e);
+            if (OSVersionHelper.IsWindows11())
+            {
+                // ResizeMode="NoResize" removes rounded corners. So force them to rounded.
+                IntPtr hWnd = new WindowInteropHelper(GetWindow(this)).EnsureHandle();
+                DWMWINDOWATTRIBUTE attribute = DWMWINDOWATTRIBUTE.DWMWA_WINDOW_CORNER_PREFERENCE;
+                DWM_WINDOW_CORNER_PREFERENCE preference = DWM_WINDOW_CORNER_PREFERENCE.DWMWCP_ROUND;
+                DwmSetWindowAttribute(hWnd, attribute, ref preference, sizeof(uint));
+            }
+            else
+            {
+                // On Windows10 ResizeMode="NoResize" removes the border so we add a new one.
+                MainBorder.BorderThickness = new System.Windows.Thickness(0.5);
+            }
         }
+
+        private void Close_Click(object sender, RoutedEventArgs e)
+        {
+            Close();
+        }
+
+        private void TitleBar_MouseDown(object sender, MouseButtonEventArgs e)
+        {
+            if (e.ChangedButton == MouseButton.Left)
+            {
+                this.DragMove();
+            }
+        }
+
+        // The enum flag for DwmSetWindowAttribute's second parameter, which tells the function what attribute to set.
+        public enum DWMWINDOWATTRIBUTE
+        {
+            DWMWA_WINDOW_CORNER_PREFERENCE = 33,
+        }
+
+        public enum DWM_WINDOW_CORNER_PREFERENCE
+        {
+            DWMWCP_DEFAULT = 0,
+            DWMWCP_DONOTROUND = 1,
+            DWMWCP_ROUND = 2,
+            DWMWCP_ROUNDSMALL = 3,
+        }
+
+        // Import dwmapi.dll and define DwmSetWindowAttribute in C# corresponding to the native function.
+        [DllImport("dwmapi.dll", CharSet = CharSet.Unicode, PreserveSig = false)]
+        internal static extern void DwmSetWindowAttribute(
+            IntPtr hwnd,
+            DWMWINDOWATTRIBUTE attribute,
+            ref DWM_WINDOW_CORNER_PREFERENCE pvAttribute,
+            uint cbAttribute);
     }
 }

src/modules/colorPicker/ColorPickerUI/Resources/Styles.xaml

@@ -74,6 +74,36 @@
         </Setter>
     </Style>
 
+    <Style x:Key="TitleBarCloseButtonStyleIonut" TargetType="{x:Type Button}">
+        <Setter Property="Background" Value="Transparent" />
+        <Setter Property="BorderBrush" Value="Transparent" />
+        <Setter Property="Foreground" Value="{DynamicResource ButtonForeground}" />
+        <Setter Property="Template">
+            <Setter.Value>
+                <ControlTemplate TargetType="{x:Type Button}">
+                    <Border x:Name="ContentBorder" 
+                 Background="{TemplateBinding Background}" 
+                 BorderBrush="{TemplateBinding BorderBrush}" 
+                 BorderThickness="{TemplateBinding BorderThickness}" 
+                 CornerRadius="{TemplateBinding Border.CornerRadius}">
+                        <ContentPresenter x:Name="ContentPresenter" 
+                     HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
+                     VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 
+                     Content="{TemplateBinding Content}" 
+                     ContentTemplate="{TemplateBinding ContentTemplate}" 
+                     TextElement.Foreground="{TemplateBinding Foreground}" />
+                    </Border>
+                    <ControlTemplate.Triggers>
+                        <Trigger Property="IsMouseOver" Value="True">
+                            <Setter TargetName="ContentBorder" Property="Background" Value="Red" />
+                            <Setter TargetName="ContentPresenter" Property="TextElement.Foreground" Value="White" />
+                        </Trigger>
+                    </ControlTemplate.Triggers>
+                </ControlTemplate>
+            </Setter.Value>
+        </Setter>
+    </Style>
+
     <Style x:Key="SubtleButtonStyle" TargetType="{x:Type Button}">
         <Setter Property="FocusVisualStyle" Value="{DynamicResource DefaultControlFocusVisualStyle}" />
         <Setter Property="Foreground" Value="{DynamicResource TextFillColorPrimaryBrush}" />