Updates to UI and title bar

src/PicView/PicView.csproj

@@ -34,8 +34,8 @@
 		<Resource Include="Resources\icon__Q6k_icon.ico" />
 	</ItemGroup>
 	<ItemGroup>
-	  <Compile Update="UserControls\TitleBox.axaml.cs">
-	    <DependentUpon>TitleBox.axaml</DependentUpon>
+	  <Compile Update="Views\CustomTitleBars\WinTitleBar.axaml.cs">
+	    <DependentUpon>WinTitleBar.axaml</DependentUpon>
 	  </Compile>
 	  <Compile Update="UserControls\PicBox.axaml.cs">
 	    <DependentUpon>PicBox.axaml</DependentUpon>

src/PicView/Styles/Themes/Dark/DarkTheme.axaml

@@ -6,10 +6,22 @@
 
 	<Styles.Resources>
 
+		<!--  Main Color  -->
+		<Color x:Key="MainColor">#FFf6f4f4</Color>
+		<SolidColorBrush x:Key="MainColorBrush" Color="{StaticResource MainColor}" />
+
+		<!--  Icon Color  -->
+		<Color x:Key="IconColor">#eeebebeb</Color>
+		<SolidColorBrush x:Key="IconColorBrush" Color="{StaticResource IconColor}" />
+
 		<!--  Border Brush  -->
 		<Color x:Key="BorderColor">#FF3A3A3A</Color>
 		<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource BorderColor}" />
 
+		<!--  Background Color Fade  -->
+		<Color x:Key="BackgroundColorFade">#A5171717</Color>
+		<SolidColorBrush x:Key="BackgroundColorBrushFade" Color="{StaticResource BackgroundColorFade}" />
+
 	</Styles.Resources>
 
 </Styles>

src/PicView/UserControls/TitleBox.axaml

@@ -1,11 +0,0 @@
-<UserControl xmlns="https://github.com/avaloniaui"
-             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
-             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
-             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
-			 xmlns:vm="using:PicView.ViewModels"
-             x:Class="PicView.UserControls.TitleBox">
-	<Design.DataContext>
-		<vm:MainWindowViewModel/>
-	</Design.DataContext>
-	<TextBlock Text="{Binding Title}" TextAlignment="Center" Margin="5" FontWeight="Bold" FontSize="14"/>
-</UserControl>

src/PicView/UserControls/TitleBox.axaml.cs

@@ -1,18 +0,0 @@
-using Avalonia.Controls;
-using Avalonia.Markup.Xaml;
-
-namespace PicView.UserControls
-{
-    public partial class TitleBox : UserControl
-    {
-        public TitleBox()
-        {
-            InitializeComponent();
-        }
-
-        void InitializeComponent()
-        {
-            AvaloniaXamlLoader.Load(this);
-        }
-    }
-}

src/PicView/Views/CustomTitleBars/WinTitleBar.axaml

@@ -0,0 +1,79 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+			 xmlns:vm="using:PicView.ViewModels"
+             x:Class="PicView.UserControls.WinTitleBar">
+	<Design.DataContext>
+		<vm:MainWindowViewModel/>
+	</Design.DataContext>
+	<DockPanel LastChildFill="True">
+		<Image
+			DockPanel.Dock="Left"
+			Source="avares://PicView/Assets/PicView/icon__Q6k_icon.ico"
+			Width="25"
+			Height="25"
+			Margin="10,1,10,1">
+		</Image>
+		<Rectangle
+			Width="1"
+			Height="30"
+			DockPanel.Dock="Left"
+			Fill="{StaticResource BorderBrush}" />
+
+		<Button Name="CloseButton" DockPanel.Dock="Right" Height="30" Background="Transparent">
+			<Path
+				Width="12"
+				Height="12"
+				Data="M443.6,387.1L312.4,255.4l131.5-130c5.4-5.4,5.4-14.2,0-19.6l-37.4-37.6c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4  L256,197.8L124.9,68.3c-2.6-2.6-6.1-4-9.8-4c-3.7,0-7.2,1.5-9.8,4L68,105.9c-5.4,5.4-5.4,14.2,0,19.6l131.5,130L68.4,387.1  c-2.6,2.6-4.1,6.1-4.1,9.8c0,3.7,1.4,7.2,4.1,9.8l37.4,37.6c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1L256,313.1l130.7,131.1  c2.7,2.7,6.2,4.1,9.8,4.1c3.5,0,7.1-1.3,9.8-4.1l37.4-37.6c2.6-2.6,4.1-6.1,4.1-9.8C447.7,393.2,446.2,389.7,443.6,387.1z"
+				Stretch="Fill"
+				Fill="{StaticResource IconColor}">
+			</Path>
+		</Button>
+		<Rectangle
+			Width="1"
+			Height="30"
+			DockPanel.Dock="Right"
+			Fill="{StaticResource BorderBrush}" />
+
+		<Button Name="RestoreButton" DockPanel.Dock="Right" Height="30" Background="Transparent">
+			<Path
+				Width="12"
+				Height="12"
+				Data="M405.34 405.332H106.66V106.668H240V64H106.66C83.191 64 64 83.197 64 106.668v298.664C64 428.803 83.191 448 106.66 448h298.68c23.469 0 42.66-19.197 42.66-42.668V272h-42.66v133.332zM288 64v42.668h87.474L159.999 322.133l29.866 29.866 215.476-215.47V224H448V64H288z"
+				Stretch="Fill"
+				Fill="{StaticResource IconColor}">
+			</Path>
+		</Button>
+		<Rectangle
+			Width="1"
+			Height="30"
+			DockPanel.Dock="Right"
+			Fill="{StaticResource BorderBrush}" />
+
+		<Button Name="MinimizeButton" DockPanel.Dock="Right" Height="30" Background="Transparent">
+			<Viewbox Width="12" Height="12">
+				<Path
+					Data="M24,11c0-0.6-0.4-1-1-1H1c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h22c0.6,0,1-0.4,1-1V11z"
+					Stretch="Fill"
+					Fill="{StaticResource IconColor}">
+				</Path>
+			</Viewbox>
+		</Button>
+		<Rectangle
+			Width="1"
+			Height="30"
+			DockPanel.Dock="Right"
+			Fill="{StaticResource BorderBrush}" />
+
+		<TextBox Text="{Binding Title}"
+				 TextAlignment="Center"
+				 FontWeight="Bold"
+				 FontSize="12"
+				 IsTabStop="False"
+				 Background="{StaticResource BackgroundColorFade}"
+				 BorderThickness="0"
+				 AcceptsReturn="True"
+				 AcceptsTab="False"/>
+	</DockPanel>
+</UserControl>

src/PicView/Views/CustomTitleBars/WinTitleBar.axaml.cs

@@ -0,0 +1,38 @@
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using Avalonia.Input;
+
+namespace PicView.UserControls
+{
+    public partial class WinTitleBar : UserControl
+    {
+        private Button closeButton;
+
+        public WinTitleBar()
+        {
+            InitializeComponent();
+            closeButton = this.FindControl<Button>("CloseButton");
+
+            closeButton.Click += (_, _) => CloseWindow();
+
+            PointerPressed += (_, e) => MoveWindow(e);
+        }
+
+        private void CloseWindow()
+        {
+            Window hostWindow = (Window)VisualRoot;
+            hostWindow.Close();
+        }
+
+        private void MoveWindow(PointerPressedEventArgs e)
+        {
+            Window hostWindow = (Window)VisualRoot;
+            hostWindow.BeginMoveDrag(e);
+        }
+
+        void InitializeComponent()
+        {
+            AvaloniaXamlLoader.Load(this);
+        }
+    }
+}

src/PicView/Views/MainWindow.axaml

@@ -13,7 +13,9 @@
         Title="{Binding Title}"
 		TransparencyLevelHint="AcrylicBlur"
 		Background="Transparent"
-		ExtendClientAreaToDecorationsHint="True">
+		ExtendClientAreaToDecorationsHint="True"
+		ExtendClientAreaChromeHints="NoChrome"
+		ExtendClientAreaTitleBarHeightHint="-1">
 
 	<Design.DataContext>
 		<vm:MainWindowViewModel/>
@@ -21,7 +23,7 @@
 
 	<Border BorderBrush="{StaticResource BorderBrush}" BorderThickness="1" CornerRadius="4">
 		<DockPanel>
-			<uc:TitleBox DockPanel.Dock="Top" />
+			<uc:WinTitleBar DockPanel.Dock="Top" />
 			<Rectangle DockPanel.Dock="Top" Height="1" Fill="{StaticResource BorderBrush}" />
 			<uc:PicBox />
 		</DockPanel>