From ddac7fe9a1b4c2a6d2e7690f572aaef499555134 Mon Sep 17 00:00:00 2001
From: Nguyen Duy <wuuyi123@gmail.com>
Date: Tue, 11 Mar 2025 09:26:30 +0700
Subject: [PATCH] fix(ui): update visual, fix xaml logic

---
 app/App.xaml                    | 19 +++++++++++
 app/Components/Button.xaml      | 59 ++++++++++++++++-----------------
 app/Components/Button.xaml.cs   |  5 ++-
 app/Components/CustomPage.xaml  | 20 +++++------
 app/Components/DisplayItem.xaml | 28 ++++++++++------
 app/MainWindow.xaml             | 47 +++++---------------------
 app/Tray.cs                     |  6 ++--
 7 files changed, 89 insertions(+), 95 deletions(-)

diff --git a/app/App.xaml b/app/App.xaml
index 21b93c6..92377ad 100644
--- a/app/App.xaml
+++ b/app/App.xaml
@@ -9,6 +9,25 @@
             <ResourceDictionary.MergedDictionaries>
                 <ResourceDictionary Source="Languages/en.xaml"/>
             </ResourceDictionary.MergedDictionaries>
+
+            <CornerRadius x:Key="ButtonCornerRadius">4</CornerRadius>
+            <CornerRadius x:Key="DisplayCornerRadius">8</CornerRadius>
+
+            <Style TargetType="Label">
+                <Style.Triggers>
+                    <Trigger Property="Tag" Value="link">
+                        <Setter Property="Foreground" Value="White" />
+                    </Trigger>
+                    <MultiTrigger>
+                        <MultiTrigger.Conditions>
+                            <Condition Property="Tag" Value="link" />
+                            <Condition Property="IsMouseOver" Value="True" />
+                        </MultiTrigger.Conditions>
+                        <Setter Property="Foreground" Value="#66b3ff" />
+                    </MultiTrigger>
+                </Style.Triggers>
+            </Style>
+
         </ResourceDictionary>
     </Application.Resources>
 </Application>
\ No newline at end of file
diff --git a/app/Components/Button.xaml b/app/Components/Button.xaml
index 5e43b8d..866ff38 100644
--- a/app/Components/Button.xaml
+++ b/app/Components/Button.xaml
@@ -6,38 +6,8 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:ParsecVDisplay.Components"
     mc:Ignorable="d" 
-    d:DesignHeight="120" d:DesignWidth="216"
-    d:Background="Black"
+    d:DesignHeight="40" d:DesignWidth="120"
 >
-    <Border BorderThickness="1" BorderBrush="#FFF">
-        <Button Foreground="White" Click="Button_Click">
-            <Button.Content>
-                <ContentPresenter Content="{Binding Children}" />
-            </Button.Content>
-            <Button.Style>
-                <Style TargetType="{x:Type Button}">
-                    <Setter Property="Background" Value="#1FFF"/>
-                    <Setter Property="Template">
-                        <Setter.Value>
-                            <ControlTemplate TargetType="{x:Type Button}">
-                                <Border Background="{TemplateBinding Background}">
-                                    <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
-                                </Border>
-                            </ControlTemplate>
-                        </Setter.Value>
-                    </Setter>
-                    <Style.Triggers>
-                        <Trigger Property="IsMouseOver" Value="True">
-                            <Setter Property="Background" Value="#4FFF"/>
-                        </Trigger>
-                        <Trigger Property="IsPressed" Value="True">
-                            <Setter Property="Background" Value="#8FFF"/>
-                        </Trigger>
-                    </Style.Triggers>
-                </Style>
-            </Button.Style>
-        </Button>
-    </Border>
     <UserControl.Style>
         <Style TargetType="{x:Type UserControl}">
             <Style.Triggers>
@@ -50,4 +20,31 @@
             </Style.Triggers>
         </Style>
     </UserControl.Style>
+
+    <Button Foreground="White" Click="Button_Click">
+        <Button.Style>
+            <Style TargetType="{x:Type Button}">
+                <Setter Property="Background" Value="#1FFF" />
+                <Setter Property="Template">
+                    <Setter.Value>
+                        <ControlTemplate TargetType="{x:Type Button}">
+                            <Border Background="{TemplateBinding Background}" BorderThickness="1" BorderBrush="#6FFF" CornerRadius="{DynamicResource ButtonCornerRadius}">
+                                <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
+                            </Border>
+                        </ControlTemplate>
+                    </Setter.Value>
+                </Setter>
+                <Style.Triggers>
+                    <Trigger Property="IsMouseOver" Value="True">
+                        <Setter Property="Background" Value="#2FFF"/>
+                    </Trigger>
+                    <Trigger Property="IsPressed" Value="True">
+                        <Setter Property="Background" Value="#4FFF"/>
+                    </Trigger>
+                </Style.Triggers>
+            </Style>
+        </Button.Style>
+        <ContentPresenter Content="{Binding Content}" />
+    </Button>
+    
 </UserControl>
\ No newline at end of file
diff --git a/app/Components/Button.xaml.cs b/app/Components/Button.xaml.cs
index 3eb78c7..b157bef 100644
--- a/app/Components/Button.xaml.cs
+++ b/app/Components/Button.xaml.cs
@@ -7,7 +7,10 @@ namespace ParsecVDisplay.Components
     public partial class Button : UserControl
     {
         public event EventHandler Click;
-        public object Children { get; set; }
+        public new object Content { get; set; }
+
+        public static readonly new DependencyProperty ContentProperty =
+            DependencyProperty.Register("Content", typeof(object), typeof(Button), new PropertyMetadata(null));
 
         public Button()
         {
diff --git a/app/Components/CustomPage.xaml b/app/Components/CustomPage.xaml
index 41a4eea..a979284 100644
--- a/app/Components/CustomPage.xaml
+++ b/app/Components/CustomPage.xaml
@@ -89,17 +89,15 @@
         </StackPanel>
         <StackPanel HorizontalAlignment="Right" VerticalAlignment="Bottom" Orientation="Horizontal" Margin="0,0,25,25">
             <local:Button Click="ApplyChanges" Width="120" Height="36" Foreground="White">
-                <local:Button.Children>
-                    <Grid>
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition Width="*" />
-                            <ColumnDefinition Width="auto" />
-                            <ColumnDefinition />
-                        </Grid.ColumnDefinitions>
-                        <Image Source="../Resources/admin.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
-                        <TextBlock Grid.Column="1" Text="{DynamicResource t_apply}" Margin="6,0,0,0" />
-                    </Grid>
-                </local:Button.Children>
+                <Grid>
+                    <Grid.ColumnDefinitions>
+                        <ColumnDefinition Width="*" />
+                        <ColumnDefinition Width="auto" />
+                        <ColumnDefinition />
+                    </Grid.ColumnDefinitions>
+                    <Image Source="../Resources/admin.png" Width="16" Height="16" HorizontalAlignment="Center" VerticalAlignment="Center" />
+                    <TextBlock Grid.Column="1" Text="{DynamicResource t_apply}" Margin="6,0,0,0" VerticalAlignment="Center" />
+                </Grid>
             </local:Button>
         </StackPanel>
     </Grid>
diff --git a/app/Components/DisplayItem.xaml b/app/Components/DisplayItem.xaml
index f121612..78b98c5 100644
--- a/app/Components/DisplayItem.xaml
+++ b/app/Components/DisplayItem.xaml
@@ -6,24 +6,31 @@
     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
     xmlns:local="clr-namespace:ParsecVDisplay.Components"
     mc:Ignorable="d" 
-    Width="160" Height="100"
+    Width="180" Height="110"
     d:Background="Black"
 >
-    <Grid Margin="5" MouseDown="UserControl_MouseDown" MouseUp="UserControl_MouseUp">
-        <Rectangle StrokeThickness="2" Stroke="#FFF" />
-        <TextBlock x:Name="xDeg" d:Text="90°" Foreground="White" Margin="8,4,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
-        <TextBlock Text="{Binding DisplayNum}" d:Text="1" FontSize="24" FontWeight="SemiBold" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,5" />
-        <TextBlock Grid.Row="1" Text="{Binding DisplayMode}" d:Text="1920 x 1080 @ 60 Hz" FontSize="12" Foreground="White" TextAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,8" />
-        <Grid.Style>
-            <Style TargetType="{x:Type Grid}">
+    <Border Margin="4"
+            MouseDown="UserControl_MouseDown" MouseUp="UserControl_MouseUp"
+            BorderThickness="2" CornerRadius="{DynamicResource DisplayCornerRadius}">
+        <Border.Style>
+            <Style TargetType="{x:Type Border}">
+                <Setter Property="Background" Value="#1FFF"/>
+                <Setter Property="BorderBrush" Value="#8FFF"/>
                 <Style.Triggers>
                     <Trigger Property="IsMouseOver" Value="True">
                         <Setter Property="Background" Value="#3FFF"/>
+                        <Setter Property="BorderBrush" Value="#AFFF"/>
                     </Trigger>
                 </Style.Triggers>
             </Style>
-        </Grid.Style>
-    </Grid>
+        </Border.Style>
+        <Grid>
+            <TextBlock x:Name="xDeg" d:Text="90°" Foreground="White" Margin="8,4,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
+            <TextBlock Text="{Binding DisplayNum}" d:Text="1" FontSize="24" FontWeight="SemiBold" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0,0,0,5" />
+            <TextBlock Grid.Row="1" Text="{Binding DisplayMode}" d:Text="1920 x 1080 @ 60 Hz" FontSize="12" Foreground="White" TextAlignment="Center" VerticalAlignment="Bottom" Margin="0,0,0,8" />
+        </Grid>
+    </Border>
+
     <UserControl.ContextMenu>
         <ContextMenu>
             <MenuItem Header="{Binding DisplayName}" />
@@ -53,4 +60,5 @@
             <MenuItem Click="RemoveDisplay" Header="{DynamicResource t_remove}" />
         </ContextMenu>
     </UserControl.ContextMenu>
+    
 </UserControl>
\ No newline at end of file
diff --git a/app/MainWindow.xaml b/app/MainWindow.xaml
index 67ac7ec..e43db5b 100644
--- a/app/MainWindow.xaml
+++ b/app/MainWindow.xaml
@@ -32,60 +32,29 @@
         </WrapPanel>
 
         <StackPanel x:Name="xButtons" Margin="0,0,25,25"  Orientation="Horizontal" Height="36" VerticalAlignment="Bottom" HorizontalAlignment="Right">
-            <components:Button FontSize="14" Width="40" Click="OpenDisplaySettings">
-                <components:Button.Children>
-                    <Image Source="Resources/settings.png" Width="24" Height="24" />
-                </components:Button.Children>
+            <components:Button Width="42" Click="OpenDisplaySettings">
+                <Image Source="Resources/settings.png" Width="24" Height="24" />
             </components:Button>
-
-            <components:Button FontSize="14" Width="40" Margin="10,0,0,0" Click="SyncSettings">
-                <components:Button.Children>
-                    <Image Source="Resources/sync.png" Width="24" Height="24" />
-                </components:Button.Children>
+            <components:Button Width="42" Margin="10,0,0,0" Click="SyncSettings">
+                <Image Source="Resources/sync.png" Width="24" Height="24" />
             </components:Button>
 
             <components:Button Click="OpenCustom" FontSize="14" Margin="10,0,0,0" Width="100">
-                <components:Button.Children>
-                    <TextBlock Text="{DynamicResource t_custom}" />
-                </components:Button.Children>
+                <TextBlock Text="{DynamicResource t_custom}" />
             </components:Button>
             <components:Button x:Name="xAdd" Click="AddDisplay" FontSize="14" Margin="25,0,0,0" Width="120">
-                <components:Button.Children>
-                    <TextBlock Text="{DynamicResource t_add_display}" />
-                </components:Button.Children>
+                <TextBlock Text="{DynamicResource t_add_display}" />
             </components:Button>
         </StackPanel>
 
         <StackPanel Margin="25,0,0,20" VerticalAlignment="Bottom" HorizontalAlignment="Left" Width="230">
             <StackPanel Orientation="Horizontal">
                 <Image Source="./Resources/icon.ico" Width="20" Height="18" Margin="0,0,5,0" />
-                <Label x:Name="xDriver" Content="Parsec Virtual Display" FontSize="14" Cursor="Hand" MouseDown="QueryStatus">
-                    <Label.Style>
-                        <Style TargetType="Label">
-                            <Setter Property="Foreground" Value="White" />
-                            <Style.Triggers>
-                                <Trigger Property="IsMouseOver" Value="True">
-                                    <Setter Property="Foreground" Value="#66b3ff" />
-                                </Trigger>
-                            </Style.Triggers>
-                        </Style>
-                    </Label.Style>
-                </Label>
+                <Label x:Name="xDriver" Content="Parsec Virtual Display" Tag="link" FontSize="14" Cursor="Hand" MouseDown="QueryStatus" />
             </StackPanel>
             <StackPanel Orientation="Horizontal">
                 <Image Source="Resources/github.png" Width="20" Height="20" Margin="0,0,5,0" />
-                <Label Content="@github/parsec-vdd" FontSize="14" Cursor="Hand" MouseDown="OpenRepoLink">
-                    <Label.Style>
-                        <Style TargetType="Label">
-                            <Setter Property="Foreground" Value="White" />
-                            <Style.Triggers>
-                                <Trigger Property="IsMouseOver" Value="True">
-                                    <Setter Property="Foreground" Value="#66b3ff" />
-                                </Trigger>
-                            </Style.Triggers>
-                        </Style>
-                    </Label.Style>
-                </Label>
+                <Label Content="@github/parsec-vdd" Tag="link" FontSize="14" Cursor="Hand" MouseDown="OpenRepoLink" />
             </StackPanel>
         </StackPanel>
 
diff --git a/app/Tray.cs b/app/Tray.cs
index 39661a6..9774868 100644
--- a/app/Tray.cs
+++ b/app/Tray.cs
@@ -257,9 +257,9 @@ namespace ParsecVDisplay
             var caption = $"{Program.AppName} v{Program.AppVersion}";
 
             MessageBox.Show(Owner,
-                $"{Vdd.Core.ADAPTER}\n" +
-                $"Version: {version}\n" +
-                $"{App.GetTranslation("t_msg_driver_status")}: {status}",
+                $"{Vdd.Core.ADAPTER}\n\n" +
+                $"- Version: {version}\n" +
+                $"- {App.GetTranslation("t_msg_driver_status")}: {status}",
                 caption, MessageBoxButtons.OK, MessageBoxIcon.Information);
         }