From 0e62fe101efb4332eeeef322d3deffa19a87af9c Mon Sep 17 00:00:00 2001
From: Kalakoi <kalakoi10046@gmail.com>
Date: Fri, 30 May 2025 01:33:10 -0400
Subject: [PATCH] First attempt at making the UI fancier.

---
 osrs-toolbox/Views/HomePageView.xaml    | 111 +++++++++++++++++++++---
 osrs-toolbox/Views/HomePageView.xaml.cs |  30 +++++++
 osrs-toolbox/osrs-toolbox.csproj        |  28 +++++-
 3 files changed, 154 insertions(+), 15 deletions(-)

diff --git a/osrs-toolbox/Views/HomePageView.xaml b/osrs-toolbox/Views/HomePageView.xaml
index 482815f..41459dc 100644
--- a/osrs-toolbox/Views/HomePageView.xaml
+++ b/osrs-toolbox/Views/HomePageView.xaml
@@ -5,12 +5,34 @@
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:osrs_toolbox"
         mc:Ignorable="d"
-        Title="OSRS Toolbox" d:Height="450" d:Width="800" SizeToContent="WidthAndHeight" Closed="Window_Closed">
+        Title="OSRS Toolbox" Height="630" Width="500" Closed="Window_Closed" WindowStyle="None" Background="Transparent" AllowsTransparency="True">
     <Window.DataContext>
         <local:HomePageViewModel/>
     </Window.DataContext>
+    <Window.Resources>
+        <ControlTemplate x:Key="NoMouseOverButtonTemplate"   
+                 TargetType="Button">
+            <Border Background="{TemplateBinding Background}"  
+          BorderBrush="{TemplateBinding BorderBrush}"  
+          BorderThickness="{TemplateBinding BorderThickness}">
+                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"  
+                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
+            </Border>
+
+            <ControlTemplate.Triggers>
+                <Trigger Property="IsEnabled"  
+             Value="False">
+                    <Setter Property="Background"  
+              Value="{x:Static SystemColors.ControlLightBrush}" />
+                    <Setter Property="Foreground"  
+              Value="{x:Static SystemColors.GrayTextBrush}" />
+                </Trigger>
+            </ControlTemplate.Triggers>
+        </ControlTemplate>
+    </Window.Resources>
     <Grid>
         <Grid.RowDefinitions>
+            <RowDefinition Height="Auto"/>
             <RowDefinition Height="Auto"/>
             <RowDefinition Height="*"/>
             <RowDefinition Height="Auto"/>
@@ -20,18 +42,81 @@
             <ColumnDefinition Width="*"/>
             <ColumnDefinition Width="Auto"/>
         </Grid.ColumnDefinitions>
-        <Rectangle Width="8" Height="8" Fill="Black" Grid.Row="0" Grid.Column="0" VerticalAlignment="Bottom" HorizontalAlignment="Right"/>
-        <Image Source="/Resources/Panel/panel_top_left.png" Grid.Row="0" Grid.Column="0" Width="16" StretchDirection="Both" Stretch="UniformToFill"/>
-        <StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="1">
-            <StackPanel Orientation="Horizontal">
-                <Button Command="{Binding OpenCompetitionOverlaySettings, UpdateSourceTrigger=PropertyChanged}" Content="Open Competition Overlay Settings" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
-                <Button Command="{Binding OpenDropChanceCalculator, UpdateSourceTrigger=PropertyChanged}" Content="Open Drop Chance Calculator" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
+        <Image Source="/Resources/Panel/panel-background.png" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Stretch="Fill" Margin="-3"/>
+        <Image Source="/Resources/Panel/panel-left.png" Grid.Row="2" Grid.Column="0" Margin="0,-8,0,-8" Width="40" StretchDirection="Both" HorizontalAlignment="Stretch" VerticalAlignment="Top" Stretch="Fill"/>
+        <Image Source="/Resources/Panel/panel-bottom.png" Grid.Row="3" Margin="-8,0,-8,0" Grid.Column="1" Height="40" StretchDirection="Both" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill"/>
+        <Image Source="/Resources/Panel/panel-right.png" Grid.Row="2" Grid.Column="2" Margin="0,-8,0,-8" Width="40" StretchDirection="Both" HorizontalAlignment="Left" VerticalAlignment="Top" Stretch="Fill"/>
+        <Image Source="/Resources/Panel/panel-top.png" Grid.Row="1" Margin="-8,0,-8,0" Grid.Column="1" Height="40" StretchDirection="Both" HorizontalAlignment="Left" VerticalAlignment="Bottom" Stretch="Fill" MouseDown="Move_Window"/>
+        <Image Source="/Resources/Panel/panel-top-left.png" Grid.Row="1" Grid.Column="0" Width="40" StretchDirection="Both" HorizontalAlignment="Right" VerticalAlignment="Bottom" MouseDown="Move_Window"/>
+        <Image Source="/Resources/Panel/panel-bottom-left.png" Grid.Row="3" Grid.Column="0" Height="40" StretchDirection="Both" HorizontalAlignment="Right" VerticalAlignment="Top"/>
+        <Image Source="/Resources/Panel/panel-bottom-right.png" Grid.Row="3" Grid.Column="2" Width="40" StretchDirection="Both" HorizontalAlignment="Left" VerticalAlignment="Top"/>
+        <Image Source="/Resources/Panel/panel-top-right.png" Grid.Row="1" Grid.Column="2" Width="40" StretchDirection="Both" HorizontalAlignment="Left" VerticalAlignment="Bottom" MouseDown="Move_Window"/>
+        <Image Source="/Resources/main-banner.png" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" Width="360" Margin="0,0,0,-30" StretchDirection="Both" HorizontalAlignment="Center" VerticalAlignment="Bottom" Stretch="Uniform" MouseDown="Move_Window"/>
+        <Rectangle Grid.Row="1" Grid.Column="2" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="25" Height="25" Fill="White" Margin="8,0,0,8" MouseDown="Close_App" MouseEnter="Exit_Hovered" MouseLeave="Exit_Unhovered"/>
+        <Image Source="/Resources/close-button.png" Grid.Row="1" Grid.Column="2" StretchDirection="Both" Width="30" Margin="5,0,0,5" Stretch="Uniform" VerticalAlignment="Bottom" HorizontalAlignment="Left" IsHitTestVisible="False"/>
+        <Border Grid.Row="2" Grid.Column="1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
+            <StackPanel Orientation="Vertical">
+                <Button Command="{Binding OpenCompetitionOverlaySettings, UpdateSourceTrigger=PropertyChanged}" Template="{StaticResource NoMouseOverButtonTemplate}" Width="350" Height="90" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
+                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+                        <Image Source="/Resources/wood-button.png" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StretchDirection="Both" Stretch="Fill" MouseEnter="Button_Hovered" MouseLeave="Button_Unhovered"/>
+                        <local:OutlinedTextBlock Text="Open Competition Overlay Settings" VerticalAlignment="Center" HorizontalAlignment="Center" Stroke="Black" Fill="Yellow" FontSize="30" StrokeThickness="1.2" IsHitTestVisible="False" TextWrapping="Wrap" TextAlignment="Center"/>
+                    </Grid>
+                </Button>
+                <Button Command="{Binding OpenDropChanceCalculator, UpdateSourceTrigger=PropertyChanged}" Template="{StaticResource NoMouseOverButtonTemplate}" Width="350" Height="90" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
+                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+                        <Image Source="/Resources/wood-button.png" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StretchDirection="Both" Stretch="Fill" MouseEnter="Button_Hovered" MouseLeave="Button_Unhovered"/>
+                        <local:OutlinedTextBlock Text="Open Drop Chance Calculator" VerticalAlignment="Center" HorizontalAlignment="Center" Stroke="Black" Fill="Yellow" FontSize="30" StrokeThickness="1.2" IsHitTestVisible="False" TextWrapping="Wrap" TextAlignment="Center"/>
+                    </Grid>
+                </Button>
+                <Button Command="{Binding OpenCombatLevelCalculator, UpdateSourceTrigger=PropertyChanged}" Template="{StaticResource NoMouseOverButtonTemplate}" Width="350" Height="90" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
+                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+                        <Image Source="/Resources/wood-button.png" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StretchDirection="Both" Stretch="Fill" MouseEnter="Button_Hovered" MouseLeave="Button_Unhovered"/>
+                        <local:OutlinedTextBlock Text="Open Combat Level Calculator" VerticalAlignment="Center" HorizontalAlignment="Center" Stroke="Black" Fill="Yellow" FontSize="30" StrokeThickness="1.2" IsHitTestVisible="False" TextWrapping="Wrap" TextAlignment="Center"/>
+                    </Grid>
+                </Button>
+                <Button Command="{Binding OpenShopBuyoutCalculator, UpdateSourceTrigger=PropertyChanged}" Template="{StaticResource NoMouseOverButtonTemplate}" Width="350" Height="90" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
+                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+                        <Image Source="/Resources/wood-button.png" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StretchDirection="Both" Stretch="Fill" MouseEnter="Button_Hovered" MouseLeave="Button_Unhovered"/>
+                        <local:OutlinedTextBlock Text="Open Shop Buyout Calculator" VerticalAlignment="Center" HorizontalAlignment="Center" Stroke="Black" Fill="Yellow" FontSize="30" StrokeThickness="1.2" IsHitTestVisible="False" TextWrapping="Wrap" TextAlignment="Center"/>
+                    </Grid>
+                </Button>
+                <Button Command="{Binding OpenAPITest, UpdateSourceTrigger=PropertyChanged}" Template="{StaticResource NoMouseOverButtonTemplate}" Width="350" Height="50" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center" Background="Transparent" BorderBrush="Transparent" BorderThickness="0">
+                    <Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition Height="*"/>
+                        </Grid.RowDefinitions>
+                        <Image Source="/Resources/wood-button.png" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" StretchDirection="Both" Stretch="Fill" MouseEnter="Button_Hovered" MouseLeave="Button_Unhovered"/>
+                        <local:OutlinedTextBlock Text="Open API Test" VerticalAlignment="Center" HorizontalAlignment="Center" Stroke="Black" Fill="Yellow" FontSize="30" StrokeThickness="1.2" IsHitTestVisible="False" TextWrapping="Wrap" TextAlignment="Center"/>
+                    </Grid>
+                </Button>
             </StackPanel>
-            <StackPanel Orientation="Horizontal">
-                <Button Command="{Binding OpenCombatLevelCalculator, UpdateSourceTrigger=PropertyChanged}" Content="Open Combat Level Calculator" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
-                <Button Command="{Binding OpenShopBuyoutCalculator, UpdateSourceTrigger=PropertyChanged}" Content="Open Shop Buyout Calculator" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
-            </StackPanel>
-            <Button Command="{Binding OpenAPITest, UpdateSourceTrigger=PropertyChanged}" Content="Open API Test" Margin="3" Padding="3" VerticalAlignment="Center" HorizontalAlignment="Center"/>
-        </StackPanel>
+        </Border>
     </Grid>
 </Window>
diff --git a/osrs-toolbox/Views/HomePageView.xaml.cs b/osrs-toolbox/Views/HomePageView.xaml.cs
index 8f634ae..c3e0d69 100644
--- a/osrs-toolbox/Views/HomePageView.xaml.cs
+++ b/osrs-toolbox/Views/HomePageView.xaml.cs
@@ -33,5 +33,35 @@ namespace osrs_toolbox
                 w.Close();
             Application.Current.Shutdown();
         }
+
+        private void Move_Window(object sender, MouseButtonEventArgs e)
+        {
+            if (e.LeftButton == MouseButtonState.Pressed) { this.DragMove(); }
+        }
+
+        private void Close_App(object sender, MouseButtonEventArgs e)
+        {
+            if (e.LeftButton == MouseButtonState.Pressed) { Window_Closed(sender, e); }
+        }
+
+        private void Button_Hovered(object sender, MouseEventArgs e)
+        {
+            (sender as Image).Source = new BitmapImage(new Uri(@"/Resources/wood-button-pressed.png", UriKind.Relative));
+        }
+
+        private void Button_Unhovered(object sender, MouseEventArgs e)
+        {
+            (sender as Image).Source = new BitmapImage(new Uri(@"/Resources/wood-button.png", UriKind.Relative));
+        }
+
+        private void Exit_Hovered(object sender, MouseEventArgs e)
+        {
+            (sender as Rectangle).Fill = new SolidColorBrush(Colors.Red);
+        }
+
+        private void Exit_Unhovered(object sender, MouseEventArgs e)
+        {
+            (sender as Rectangle).Fill = new SolidColorBrush(Colors.White);
+        }
     }
 }
diff --git a/osrs-toolbox/osrs-toolbox.csproj b/osrs-toolbox/osrs-toolbox.csproj
index 9ec060e..a0b04c6 100644
--- a/osrs-toolbox/osrs-toolbox.csproj
+++ b/osrs-toolbox/osrs-toolbox.csproj
@@ -11,8 +11,20 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <None Remove="Resources\Panel\panel_top_left.png" />
+    <None Remove="Resources\close-button.png" />
+    <None Remove="Resources\main-banner.png" />
+    <None Remove="Resources\Panel\panel-background.png" />
+    <None Remove="Resources\Panel\panel-bottom-left.png" />
+    <None Remove="Resources\Panel\panel-bottom-right.png" />
+    <None Remove="Resources\Panel\panel-bottom.png" />
+    <None Remove="Resources\Panel\panel-left.png" />
+    <None Remove="Resources\Panel\panel-right.png" />
+    <None Remove="Resources\Panel\panel-top-left.png" />
+    <None Remove="Resources\Panel\panel-top-right.png" />
+    <None Remove="Resources\Panel\panel-top.png" />
     <None Remove="Resources\SplashScreenLogo.png" />
+    <None Remove="Resources\wood-button-pressed.png" />
+    <None Remove="Resources\wood-button.png" />
   </ItemGroup>
 
   <ItemGroup>
@@ -24,8 +36,20 @@
   </ItemGroup>
 
   <ItemGroup>
-    <Resource Include="Resources\Panel\panel_top_left.png" />
+    <Resource Include="Resources\close-button.png" />
+    <Resource Include="Resources\main-banner.png" />
+    <Resource Include="Resources\Panel\panel-background.png" />
+    <Resource Include="Resources\Panel\panel-bottom-left.png" />
+    <Resource Include="Resources\Panel\panel-bottom-right.png" />
+    <Resource Include="Resources\Panel\panel-bottom.png" />
+    <Resource Include="Resources\Panel\panel-left.png" />
+    <Resource Include="Resources\Panel\panel-right.png" />
+    <Resource Include="Resources\Panel\panel-top-left.png" />
+    <Resource Include="Resources\Panel\panel-top-right.png" />
+    <Resource Include="Resources\Panel\panel-top.png" />
     <Resource Include="Resources\SplashScreenLogo.png" />
+    <Resource Include="Resources\wood-button-pressed.png" />
+    <Resource Include="Resources\wood-button.png" />
   </ItemGroup>
 
   <ItemGroup>