Update UI

src/PicView/PicView.csproj

@@ -10,7 +10,6 @@
 		<PlatformTarget>AnyCPU</PlatformTarget>
 	</PropertyGroup>
 	<ItemGroup>
-		<Folder Include="Assets\Fonts\" />
 		<Folder Include="Assets\SvgIcons\" />
 		<Folder Include="Styles\Themes\Dark\" />
 		<Folder Include="Models\" />
@@ -18,9 +17,7 @@
 		<AvaloniaResource Include="Assets\Fonts\*" />
 	</ItemGroup>
 	<ItemGroup>
-	  <AvaloniaXaml Include="Styles\Text.xaml">
-	    <Generator>MSBuild:Compile</Generator>
-	  </AvaloniaXaml>
+	  <AvaloniaXaml Include="Styles\Text.xaml" />
 	</ItemGroup>
 	<ItemGroup>
 		<Content Include="Assets\PicView\icon__Q6k_icon.ico" />
@@ -36,6 +33,14 @@
 		<Resource Include="Assets\icon__Q6k_icon.ico" />
 		<Resource Include="Resources\icon__Q6k_icon.ico" />
 	</ItemGroup>
+	<ItemGroup>
+	  <Compile Update="UserControls\TitleBox.axaml.cs">
+	    <DependentUpon>TitleBox.axaml</DependentUpon>
+	  </Compile>
+	  <Compile Update="UserControls\PicBox.axaml.cs">
+	    <DependentUpon>PicBox.axaml</DependentUpon>
+	  </Compile>
+	</ItemGroup>
 	<ItemGroup>
 		<None Update="Assets\PicView\PicViewIcon.png">
 			<Pack>True</Pack>

src/PicView/Styles/Text.xaml

@@ -1,7 +1,12 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
     <Style Selector="TextBlock">
-        <Setter Property="FontSize" Value="14" />
-        <!--<Setter Property="FontFamily" Value="avares://PicView/Assets/Fonts#IBM Plex Mono SemiBold" />-->
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="FontFamily" Value="avares://PicView/Assets/Fonts/Aller.ttf" />
+    </Style>
+
+    <Style Selector="TextBox">
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="FontFamily" Value="avares://PicView/Assets/Fonts/Aller.ttf" />
     </Style>
 </Styles>

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

@@ -1,11 +1,15 @@
 <Styles xmlns="https://github.com/avaloniaui"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="PicView.Styles.Themes.DarkTheme">
-	<Design.PreviewWith>
-		<Border Padding="20">
-			<!-- Add Controls for Previewer Here -->
-		</Border>
-	</Design.PreviewWith>
 
 	<!-- Add Styles Here -->
 	<FluentTheme Mode="Dark"/>
+
+	<Styles.Resources>
+
+		<!--  Border Brush  -->
+		<Color x:Key="BorderColor">#FF3A3A3A</Color>
+		<SolidColorBrush x:Key="BorderBrush" Color="{StaticResource BorderColor}" />
+
+	</Styles.Resources>
+
 </Styles>

src/PicView/UserControls/PicBox.axaml

@@ -0,0 +1,11 @@
+<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"
+             x:Class="PicView.UserControls.PicBox">
+	<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+		<Border x:Name="ImageBorder">
+			<Image />
+		</Border>
+	</ScrollViewer>
+</UserControl>

src/PicView/UserControls/PicBox.axaml.cs

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

src/PicView/UserControls/TitleBox.axaml

@@ -0,0 +1,11 @@
+<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

@@ -0,0 +1,18 @@
+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/ViewModels/MainWindowViewModel.cs

@@ -6,6 +6,6 @@ namespace PicView.ViewModels
 {
     public class MainWindowViewModel : ViewModelBase
     {
-        public static string Title => "No image loaded - PicView";
+        public static string Title => "No image loaded";
     }
 }

src/PicView/Views/MainWindow.axaml

@@ -3,10 +3,9 @@
         xmlns:vm="using:PicView.ViewModels"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+		xmlns:uc="using:PicView.UserControls"
         mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
         x:Class="PicView.Views.MainWindow"
-		Width="462"
-		Height="400"
 		MinWidth="462"
 		MinHeight="400"
 		WindowStartupLocation="CenterScreen"
@@ -20,9 +19,11 @@
 		<vm:MainWindowViewModel/>
 	</Design.DataContext>
 
-	<DockPanel>
-		<TextBlock Text="{Binding Title}" HorizontalAlignment="Center" Margin="5"/>
-	</DockPanel>
-
-
+	<Border BorderBrush="{StaticResource BorderBrush}" BorderThickness="1" CornerRadius="4">
+		<DockPanel>
+			<uc:TitleBox DockPanel.Dock="Top" />
+			<Rectangle DockPanel.Dock="Top" Height="1" Fill="{StaticResource BorderBrush}" />
+			<uc:PicBox />
+		</DockPanel>
+	</Border>
 </Window>