#63 Configure UI for transparency, figure out stuff

src/PicView/App.axaml

@@ -7,9 +7,4 @@
         <local:ViewLocator />
     </Application.DataTemplates>
 
-    <Application.Styles>
-        <StyleInclude Source="/Styles/Text.xaml" />
-        <StyleInclude Source="/Styles/Button.xaml" />
-    </Application.Styles>
-
 </Application>

src/PicView/CustomControls/PicBox.axaml

@@ -0,0 +1,10 @@
+<UserControl
+    x:Class="PicView.CustomControls.PicBox"
+    xmlns="https://github.com/avaloniaui"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+    <ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
+        <Border x:Name="ImageBorder">
+            <Image />
+        </Border>
+    </ScrollViewer>
+</UserControl>

src/PicView/UserControls/PicBox.axaml.cs → src/PicView/CustomControls/PicBox.axaml.cs

@@ -1,7 +1,7 @@
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;
 
-namespace PicView.UserControls
+namespace PicView.CustomControls
 {
     public partial class PicBox : UserControl
     {

src/PicView/Styles/Button.xaml

@@ -1,6 +1,13 @@
 <Styles xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <Style Selector="Button.accent:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-        <Setter Property="Background" Value="{DynamicResource AccentColorBrush}" />
+    <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
+        <Setter Property="Background" Value="{StaticResource BackgroundHoverHighlight}" />
+        <Style.Animations>
+            <Animation Duration="0:0:0.45">
+                <KeyFrame Cue="100%">
+                    <Setter Property="Background" Value="{StaticResource BackgroundHoverHighlight}" />
+                </KeyFrame>
+            </Animation>
+        </Style.Animations>
     </Style>
 </Styles>

src/PicView/Styles/Text.xaml

@@ -4,4 +4,9 @@
         <Setter Property="FontSize" Value="12" />
         <Setter Property="FontFamily" Value="avares://PicView/Assets/Fonts#Roboto" />
     </Style>
+    <Style Selector="TextBlock">
+        <Setter Property="FontSize" Value="12" />
+        <Setter Property="Foreground" Value="{StaticResource MainColorBrush}" />
+        <Setter Property="FontFamily" Value="avares://PicView/Assets/Fonts#Roboto" />
+    </Style>
 </Styles>

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

@@ -3,9 +3,6 @@
     xmlns="https://github.com/avaloniaui"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
-    <!--  Add Styles Here  -->
-    <FluentTheme Mode="Dark" />
-
     <Styles.Resources>
 
         <!--  Accent Color  -->
@@ -29,7 +26,7 @@
         <SolidColorBrush Color="{StaticResource BackgroundColorFade}" x:Key="BackgroundColorBrushFade" />
 
         <!--  Background Subtle Highlight  -->
-        <Color x:Key="BackgroundSubtleHighlight">#FF1F1C1C</Color>
+        <Color x:Key="BackgroundSubtleHighlight">#691F1C1C</Color>
         <SolidColorBrush Color="{StaticResource BackgroundSubtleHighlight}" x:Key="BackgroundSubtleHighlightBrush" />
 
         <!--  Background Color Fade  Subtle  -->
@@ -40,6 +37,11 @@
         <Color x:Key="WindowBackgroundColor">#CC161413</Color>
         <SolidColorBrush Color="{StaticResource WindowBackgroundColor}" x:Key="WindowBackgroundColorBrush" />
 
+        <!--  Background Hover Highlight  -->
+        <Color x:Key="BackgroundHoverHighlight">#644B4B4B</Color>
+        <SolidColorBrush Color="{StaticResource BackgroundHoverHighlight}" x:Key="BackgroundHoverHighlightBrush" />
+
+
         <ImageBrush
             BitmapInterpolationMode="HighQuality"
             DestinationRect="0,0,100,100"
@@ -53,4 +55,8 @@
 
     </Styles.Resources>
 
+    <StyleInclude Source="avares://Avalonia.Themes.Default/DefaultTheme.xaml" />
+    <StyleInclude Source="/Styles/Text.xaml" />
+    <StyleInclude Source="/Styles/Button.xaml" />
+
 </Styles>

src/PicView/UserControls/PicBox.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"
-             x:Class="PicView.UserControls.PicBox">
-	<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
-		<Border x:Name="ImageBorder">
-			<Image />
-		</Border>
-	</ScrollViewer>
-</UserControl>

src/PicView/Views/CustomTitleBars/WinTitleBar.axaml

@@ -1,27 +1,32 @@
 <UserControl
-    Background="{StaticResource WindowBackgroundColor}"
     x:Class="PicView.Views.CustomTitleBars.WinTitleBar"
     xmlns="https://github.com/avaloniaui"
     xmlns:vm="using:PicView.ViewModels"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
+
     <Design.DataContext>
         <vm:MainWindowViewModel />
     </Design.DataContext>
+
     <DockPanel LastChildFill="True">
-        <Image
-            DockPanel.Dock="Left"
-            Height="25"
-            Margin="7,1,7,1"
-            Source="avares://PicView/Assets/PicView/icon__Q6k_icon.ico"
-            Width="30" />
-        <Rectangle
-            DockPanel.Dock="Left"
-            Fill="{StaticResource BorderBrush}"
-            Height="30"
-            Width="1" />
+
+        <Border
+            Background="{StaticResource BackgroundSubtleHighlightBrush}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="0,0,1,0"
+            Height="30">
+            <Image
+                DockPanel.Dock="Left"
+                Height="25"
+                Margin="7,1,7,1"
+                Source="avares://PicView/Assets/PicView/icon__Q6k_icon.ico"
+                Width="30" />
+        </Border>
 
         <Button
-            Background="Transparent"
+            Background="{StaticResource BackgroundSubtleHighlightBrush}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="0,0,1,0"
             DockPanel.Dock="Left"
             Height="30"
             Name="GalleryButton"
@@ -34,14 +39,11 @@
                 </DrawingImage>
             </Image>
         </Button>
-        <Rectangle
-            DockPanel.Dock="Left"
-            Fill="{StaticResource BorderBrush}"
-            Height="30"
-            Width="1" />
 
         <Button
-            Background="Transparent"
+            Background="{StaticResource BackgroundSubtleHighlightBrush}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="0,0,1,0"
             DockPanel.Dock="Left"
             Height="30"
             Margin="0"
@@ -54,40 +56,29 @@
                 Stretch="Fill"
                 Width="15" />
         </Button>
-        <Rectangle
-            DockPanel.Dock="Left"
-            Fill="{StaticResource BorderBrush}"
-            Height="30"
-            Width="1" />
 
         <Button
-            Background="Transparent"
+            Background="{StaticResource BackgroundSubtleHighlightBrush}"
             Command="{Binding ExitCommand}"
             DockPanel.Dock="Right"
-            Height="30">
+            Height="30"
+            Width="30">
             <Path
                 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"
                 Fill="{StaticResource IconColor}"
                 Height="12"
                 Stretch="Fill"
                 Width="12" />
-            <Button.Styles>
-                <Style Selector="Button:pointerover /template/ ContentPresenter#PART_ContentPresenter">
-                    <Setter Property="Background" Value="#BFE61918" />
-                </Style>
-            </Button.Styles>
         </Button>
-        <Rectangle
-            DockPanel.Dock="Right"
-            Fill="{StaticResource BorderBrush}"
-            Height="30"
-            Width="1" />
 
         <Button
-            Background="Transparent"
+            Background="{StaticResource BackgroundSubtleHighlightBrush}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="0,0,1,0"
             DockPanel.Dock="Right"
             Height="30"
-            Name="RestoreButton">
+            Name="RestoreButton"
+            Width="30">
             <Path
                 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"
                 Fill="{StaticResource IconColor}"
@@ -95,17 +86,15 @@
                 Stretch="Fill"
                 Width="12" />
         </Button>
-        <Rectangle
-            DockPanel.Dock="Right"
-            Fill="{StaticResource BorderBrush}"
-            Height="30"
-            Width="1" />
 
         <Button
-            Background="Transparent"
+            Background="{StaticResource BackgroundSubtleHighlightBrush}"
+            BorderBrush="{StaticResource BorderBrush}"
+            BorderThickness="1,0,1,0"
             Command="{Binding MinimizeCommand}"
             DockPanel.Dock="Right"
-            Height="30">
+            Height="30"
+            Width="30">
             <Viewbox Height="12" Width="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"
@@ -113,11 +102,6 @@
                     Stretch="Fill" />
             </Viewbox>
         </Button>
-        <Rectangle
-            DockPanel.Dock="Right"
-            Fill="{StaticResource BorderBrush}"
-            Height="30"
-            Width="1" />
 
         <TextBlock
             Background="{StaticResource BackgroundSubtleHighlightBrush}"

src/PicView/Views/MainWindow.axaml

@@ -1,5 +1,5 @@
 <Window
-    Background="{StaticResource WindowBackgroundColor}"
+    Background="{StaticResource NoiseBg}"
     BorderThickness="0"
     ExtendClientAreaChromeHints="NoChrome"
     ExtendClientAreaTitleBarHeightHint="-1"
@@ -14,7 +14,7 @@
     x:Class="PicView.Views.MainWindow"
     xmlns="https://github.com/avaloniaui"
     xmlns:customTitleBars="clr-namespace:PicView.Views.CustomTitleBars"
-    xmlns:uc="using:PicView.UserControls"
+    xmlns:uc="using:PicView.CustomControls"
     xmlns:vm="using:PicView.ViewModels"
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
 
@@ -34,22 +34,22 @@
                 Height="1" />
 
             <Border
-                Background="{StaticResource WindowBackgroundColor}"
+                Background="Transparent"
                 BorderBrush="{StaticResource BorderBrush}"
                 BorderThickness="0,1,0,0"
                 DockPanel.Dock="Bottom"
                 Height="25">
                 <Grid x:Name="LowerBar">
                     <Canvas
-                        Background="{StaticResource BackgroundSubtleHighlightBrush}"
+                        Background="Transparent"
                         Height="25"
                         HorizontalAlignment="Center"
                         Width="397">
 
                         <Button
-                            Background="Transparent"
+                            Background="{StaticResource BackgroundSubtleHighlightBrush}"
                             BorderBrush="{StaticResource BorderBrush}"
-                            BorderThickness="1,0,1,0"
+                            BorderThickness="1,0,1,1"
                             Focusable="False"
                             Height="25"
                             Width="55">
@@ -57,15 +57,15 @@
                                 Data="M30.718,23.404l0.007-19.877c-0.003-0.611-0.499-1.107-1.109-1.107H15.597  c-0.433-0.01-0.771-0.807-0.771-1.111V1.182c0-0.648-0.528-1.182-1.18-1.182h-7.46C5.535,0,5.008,0.533,5.008,1.182v0.127  c0,0.309-0.341,1.117-0.784,1.117h0.013c-0.604,0.008-1.094,0.5-1.094,1.105l0.005,5.754H0.763c0,0-1.056-0.057-0.683,1.199  l2.516,12.92c0,0.65,0.453,1.176,1.104,1.176h26.474C30.824,24.58,30.718,23.404,30.718,23.404z M29.359,10.949l-0.014,12.975  l-2.502-13.908c-0.212-0.764-1.075-0.711-1.075-0.711H4.51V4.891h24.85V10.949z"
                                 Fill="{StaticResource IconColor}"
                                 Height="19"
-                                Margin="0,1,0,0"
+                                Margin="0,1,0,1"
                                 Stretch="Fill"
                                 Width="24" />
                         </Button>
 
                         <Button
-                            Background="Transparent"
+                            Background="{StaticResource BackgroundSubtleHighlightBrush}"
                             BorderBrush="{StaticResource BorderBrush}"
-                            BorderThickness="0,0,1,0"
+                            BorderThickness="0,0,1,1"
                             Canvas.Left="55"
                             Focusable="False"
                             Height="25"
@@ -110,7 +110,7 @@
                             <Button
                                 Background="Transparent"
                                 BorderBrush="{StaticResource BorderBrush}"
-                                BorderThickness="0,0,1,0"
+                                BorderThickness="0,0,1,1"
                                 Focusable="False"
                                 Height="25"
                                 Width="90">
@@ -125,7 +125,7 @@
                             <Button
                                 Background="Transparent"
                                 BorderBrush="{StaticResource BorderBrush}"
-                                BorderThickness="0,0,1,0"
+                                BorderThickness="0,0,1,1"
                                 Canvas.Left="90"
                                 Focusable="False"
                                 Height="25"
@@ -140,9 +140,9 @@
                         </Canvas>
 
                         <Button
-                            Background="Transparent"
+                            Background="{StaticResource BackgroundSubtleHighlightBrush}"
                             BorderBrush="{StaticResource BorderBrush}"
-                            BorderThickness="0,0,1,0"
+                            BorderThickness="0,0,1,1"
                             Canvas.Left="289"
                             Focusable="False"
                             Height="25"
@@ -156,9 +156,9 @@
                         </Button>
 
                         <Button
-                            Background="Transparent"
+                            Background="{StaticResource BackgroundSubtleHighlightBrush}"
                             BorderBrush="{StaticResource BorderBrush}"
-                            BorderThickness="0,0,1,0"
+                            BorderThickness="0,0,1,1"
                             Canvas.Left="343"
                             Focusable="False"
                             Height="25"
@@ -189,7 +189,7 @@
 
 
 
-            <uc:PicBox Background="{StaticResource NoiseBg}" />
+            <uc:PicBox />
         </DockPanel>
     </Border>
 </Window>

src/PicView/Views/MainWindow.axaml.cs

@@ -1,4 +1,5 @@
 using Avalonia;
+using Avalonia.Animation.Animators;
 using Avalonia.Controls;
 using Avalonia.Markup.Xaml;