From 84f8c45733f495dab4a4f9266cb887ed82139798 Mon Sep 17 00:00:00 2001
From: Niels Laute <niels.laute@live.nl>
Date: Wed, 26 Nov 2025 18:07:20 +0100
Subject: [PATCH] UX tweaks

---
 .../PowerDisplayXAML/MainWindow.xaml          | 257 +++++++++++-------
 .../PowerDisplayXAML/MainWindow.xaml.cs       |   2 +-
 .../PowerDisplayXAML/MonitorIcon.xaml         |  63 +++++
 .../PowerDisplayXAML/MonitorIcon.xaml.cs      |  45 +++
 .../ViewModels/MonitorViewModel.cs            |   4 +-
 5 files changed, 264 insertions(+), 107 deletions(-)
 create mode 100644 src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml
 create mode 100644 src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml.cs

diff --git a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml
index c28a4116cd..bd81debf9e 100644
--- a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml
+++ b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml
@@ -4,18 +4,19 @@
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
     xmlns:animatedVisuals="using:Microsoft.UI.Xaml.Controls.AnimatedVisuals"
     xmlns:animations="using:CommunityToolkit.WinUI.Animations"
+    xmlns:local="using:PowerDisplay"
     xmlns:toolkit="using:CommunityToolkit.WinUI.Controls"
     xmlns:ui="using:CommunityToolkit.WinUI"
     xmlns:vm="using:PowerDisplay.ViewModels"
     xmlns:winuiex="using:WinUIEx"
+    MinWidth="0"
+    MinHeight="0"
     IsAlwaysOnTop="True"
     IsMaximizable="False"
     IsMinimizable="False"
     IsResizable="False"
     IsShownInSwitchers="False"
-    IsTitleBarVisible="False"
-    MinHeight="0"
-    MinWidth="0">
+    IsTitleBarVisible="False">
     <winuiex:WindowEx.SystemBackdrop>
         <DesktopAcrylicBackdrop />
     </winuiex:WindowEx.SystemBackdrop>
@@ -81,10 +82,10 @@
                         <ScrollViewer
                             x:Name="MainScrollViewer"
                             Padding="16,16,16,16"
+                            VerticalAlignment="Stretch"
                             HorizontalScrollBarVisibility="Disabled"
                             HorizontalScrollMode="Disabled"
                             VerticalScrollBarVisibility="Auto"
-                            VerticalAlignment="Stretch"
                             ZoomMode="Disabled">
                             <!--  Monitors List with modern card design  -->
                             <ItemsRepeater
@@ -99,119 +100,148 @@
                                     <DataTemplate x:DataType="vm:MonitorViewModel">
                                         <StackPanel HorizontalAlignment="Stretch" Spacing="4">
                                             <!--  Monitor Name with Icon  -->
-                                            <Grid HorizontalAlignment="Stretch">
+                                            <Grid Margin="2,0,0,0" HorizontalAlignment="Stretch">
                                                 <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="16" />
+                                                    <ColumnDefinition Width="22" />
                                                     <ColumnDefinition Width="16" />
                                                     <!--  Spacing  -->
                                                     <ColumnDefinition Width="*" />
                                                 </Grid.ColumnDefinitions>
-                                                <FontIcon
-                                                    x:Uid="MonitorTooltip"
+                                                <local:MonitorIcon
                                                     VerticalAlignment="Center"
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    FontSize="14"
-                                                    Glyph="{x:Bind MonitorIconGlyph, Mode=OneWay}" />
+                                                    IsBuiltIn="{x:Bind IsInternal, Mode=OneWay}"
+                                                    MonitorNumber="{x:Bind MonitorNumber, Mode=OneWay}" />
                                                 <TextBlock
                                                     Grid.Column="2"
+                                                    Margin="0,0,0,2"
                                                     VerticalAlignment="Center"
-                                                    FontWeight="SemiBold"
                                                     Text="{x:Bind DisplayName, Mode=OneWay}" />
-                                            </Grid>
-                                            <!--  Brightness Control  -->
-                                            <Grid Margin="0,8,0,0" HorizontalAlignment="Stretch">
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="16" />
-                                                    <ColumnDefinition Width="16" />
-                                                    <!--  Spacing  -->
-                                                    <ColumnDefinition Width="*" />
-                                                </Grid.ColumnDefinitions>
-                                                <FontIcon
-                                                    x:Uid="BrightnessTooltip"
-                                                    VerticalAlignment="Center"
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    FontSize="14"
-                                                    Glyph="&#xE706;" />
-                                                <Slider
-                                                    x:Uid="BrightnessAutomation"
-                                                    DataContext="{x:Bind}"
+                                                <Button
                                                     Grid.Column="2"
-                                                    HorizontalAlignment="Stretch"
-                                                    VerticalAlignment="Center"
-                                                    IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
-                                                    Maximum="{x:Bind MaxBrightness, Mode=OneWay}"
-                                                    Minimum="{x:Bind MinBrightness, Mode=OneWay}"
-                                                    PointerCaptureLost="Slider_PointerCaptureLost"
-                                                    Tag="Brightness"
-                                                    ValueChanged="Slider_ValueChanged"
-                                                    Value="{x:Bind Brightness, Mode=OneWay}" />
+                                                    HorizontalAlignment="Right"
+                                                    Content="{ui:FontIcon Glyph=&#xE712;,
+                                                                          FontSize=16}"
+                                                    Style="{StaticResource SubtleButtonStyle}">
+                                                    <Button.Flyout>
+                                                        <Flyout>
+                                                            <StackPanel Orientation="Vertical">
+                                                                <ListView SelectedIndex="2">
+                                                                    <ListView.Header>
+                                                                        <TextBlock
+                                                                            Margin="16,0,8,0"
+                                                                            FontSize="12"
+                                                                            Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                                            Text="Input source" />
+                                                                    </ListView.Header>
+                                                                    <ListViewItem Content="Source 1" />
+                                                                    <ListViewItem Content="Source 2" />
+                                                                    <ListViewItem Content="Source 3" />
+                                                                </ListView>
+                                                            </StackPanel>
+                                                        </Flyout>
+                                                    </Button.Flyout>
+                                                </Button>
                                             </Grid>
-
-                                            <!--  Contrast Control  -->
-                                            <Grid
+                                            <StackPanel
                                                 Margin="0,8,0,0"
-                                                HorizontalAlignment="Stretch"
-                                                Visibility="{x:Bind ConvertBoolToVisibility(ShowContrast), Mode=OneWay}">
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="16" />
-                                                    <ColumnDefinition Width="16" />
-                                                    <!--  Spacing  -->
-                                                    <ColumnDefinition Width="*" />
-                                                </Grid.ColumnDefinitions>
+                                                Padding="8,0,16,8"
+                                                Background="{ThemeResource LayerOnAcrylicFillColorDefaultBrush}"
+                                                BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
+                                                BorderThickness="1"
+                                                CornerRadius="{StaticResource OverlayCornerRadius}">
+                                                <!--  Brightness Control  -->
+                                                <Grid Margin="0,8,0,0" HorizontalAlignment="Stretch">
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="16" />
+                                                        <ColumnDefinition Width="16" />
+                                                        <!--  Spacing  -->
+                                                        <ColumnDefinition Width="*" />
+                                                    </Grid.ColumnDefinitions>
+                                                    <FontIcon
+                                                        x:Uid="BrightnessTooltip"
+                                                        VerticalAlignment="Center"
+                                                        AutomationProperties.AccessibilityView="Raw"
+                                                        FontSize="18"
+                                                        Glyph="&#xEC8A;" />
+                                                    <Slider
+                                                        x:Uid="BrightnessAutomation"
+                                                        Grid.Column="2"
+                                                        HorizontalAlignment="Stretch"
+                                                        VerticalAlignment="Center"
+                                                        DataContext="{x:Bind}"
+                                                        IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
+                                                        Maximum="{x:Bind MaxBrightness, Mode=OneWay}"
+                                                        Minimum="{x:Bind MinBrightness, Mode=OneWay}"
+                                                        PointerCaptureLost="Slider_PointerCaptureLost"
+                                                        Tag="Brightness"
+                                                        ValueChanged="Slider_ValueChanged"
+                                                        Value="{x:Bind Brightness, Mode=OneWay}" />
+                                                </Grid>
 
-                                                <FontIcon
-                                                    x:Uid="ContrastTooltip"
-                                                    VerticalAlignment="Center"
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    FontSize="14"
-                                                    Glyph="&#xE7A1;" />
-
-                                                <Slider
-                                                    x:Uid="ContrastAutomation"
-                                                    DataContext="{x:Bind}"
-                                                    Grid.Column="2"
-                                                    VerticalAlignment="Center"
-                                                    IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
-                                                    Maximum="100"
-                                                    Minimum="0"
-                                                    PointerCaptureLost="Slider_PointerCaptureLost"
-                                                    Tag="Contrast"
-                                                    ValueChanged="Slider_ValueChanged"
-                                                    Value="{x:Bind ContrastPercent, Mode=OneWay}" />
-                                            </Grid>
-
-                                            <!--  Volume Control  -->
-                                            <Grid
-                                                Margin="0,8,0,0"
-                                                HorizontalAlignment="Stretch"
-                                                Visibility="{x:Bind ConvertBoolToVisibility(ShowVolume), Mode=OneWay}">
-                                                <Grid.ColumnDefinitions>
-                                                    <ColumnDefinition Width="16" />
-                                                    <ColumnDefinition Width="16" />
-                                                    <!--  Spacing  -->
-                                                    <ColumnDefinition Width="*" />
-                                                </Grid.ColumnDefinitions>
-
-                                                <FontIcon
-                                                    x:Uid="VolumeTooltip"
-                                                    VerticalAlignment="Center"
-                                                    AutomationProperties.AccessibilityView="Raw"
-                                                    FontSize="14"
-                                                    Glyph="&#xE767;" />
-                                                <Slider
-                                                    x:Uid="VolumeAutomation"
-                                                    DataContext="{x:Bind}"
-                                                    Grid.Column="2"
+                                                <!--  Contrast Control {x:Bind ConvertBoolToVisibility(ShowContrast), Mode=OneWay}"  -->
+                                                <Grid
+                                                    Margin="0,8,0,0"
                                                     HorizontalAlignment="Stretch"
-                                                    VerticalAlignment="Center"
-                                                    IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
-                                                    Maximum="{x:Bind MaxVolume, Mode=OneWay}"
-                                                    Minimum="{x:Bind MinVolume, Mode=OneWay}"
-                                                    PointerCaptureLost="Slider_PointerCaptureLost"
-                                                    Tag="Volume"
-                                                    ValueChanged="Slider_ValueChanged"
-                                                    Value="{x:Bind Volume, Mode=OneWay}" />
-                                            </Grid>
+                                                    Visibility="Visible">
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="16" />
+                                                        <ColumnDefinition Width="16" />
+                                                        <!--  Spacing  -->
+                                                        <ColumnDefinition Width="*" />
+                                                    </Grid.ColumnDefinitions>
+
+                                                    <FontIcon
+                                                        x:Uid="ContrastTooltip"
+                                                        VerticalAlignment="Center"
+                                                        AutomationProperties.AccessibilityView="Raw"
+                                                        FontSize="12"
+                                                        Glyph="&#xE7A1;" />
+
+                                                    <Slider
+                                                        x:Uid="ContrastAutomation"
+                                                        Grid.Column="2"
+                                                        VerticalAlignment="Center"
+                                                        DataContext="{x:Bind}"
+                                                        IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
+                                                        Maximum="100"
+                                                        Minimum="0"
+                                                        PointerCaptureLost="Slider_PointerCaptureLost"
+                                                        Tag="Contrast"
+                                                        ValueChanged="Slider_ValueChanged"
+                                                        Value="{x:Bind ContrastPercent, Mode=OneWay}" />
+                                                </Grid>
+
+                                                <!--  Volume Control Visibility="{x:Bind ConvertBoolToVisibility(ShowVolume), Mode=OneWay}"  -->
+                                                <Grid Margin="0,8,0,0" HorizontalAlignment="Stretch">
+                                                    <Grid.ColumnDefinitions>
+                                                        <ColumnDefinition Width="16" />
+                                                        <ColumnDefinition Width="16" />
+                                                        <!--  Spacing  -->
+                                                        <ColumnDefinition Width="*" />
+                                                    </Grid.ColumnDefinitions>
+
+                                                    <FontIcon
+                                                        x:Uid="VolumeTooltip"
+                                                        Margin="2,0,0,0"
+                                                        VerticalAlignment="Center"
+                                                        AutomationProperties.AccessibilityView="Raw"
+                                                        FontSize="16"
+                                                        Glyph="&#xE993;" />
+                                                    <Slider
+                                                        x:Uid="VolumeAutomation"
+                                                        Grid.Column="2"
+                                                        HorizontalAlignment="Stretch"
+                                                        VerticalAlignment="Center"
+                                                        DataContext="{x:Bind}"
+                                                        IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
+                                                        Maximum="{x:Bind MaxVolume, Mode=OneWay}"
+                                                        Minimum="{x:Bind MinVolume, Mode=OneWay}"
+                                                        PointerCaptureLost="Slider_PointerCaptureLost"
+                                                        Tag="Volume"
+                                                        ValueChanged="Slider_ValueChanged"
+                                                        Value="{x:Bind Volume, Mode=OneWay}" />
+                                                </Grid>
+                                            </StackPanel>
                                         </StackPanel>
                                     </DataTemplate>
                                 </ItemsRepeater.ItemTemplate>
@@ -219,14 +249,33 @@
                         </ScrollViewer>
                     </Grid>
                 </Border>
-                <!--  Status Bar with modern design  -->
-                <Grid x:Name="StatusBar" Grid.Row="1" Padding="12,8,12,8" MaxHeight="48">
+
+                <Grid x:Name="StatusBar" Grid.Row="1">
                     <!--  Action Buttons  -->
                     <StackPanel
+                        Margin="0,0,8,8"
                         HorizontalAlignment="Right"
                         VerticalAlignment="Center"
                         Orientation="Horizontal"
                         Spacing="8">
+                        <Button Content="{ui:FontIcon Glyph=&#xE748;, FontSize=16}" Style="{StaticResource SubtleButtonStyle}">
+                            <Button.Flyout>
+                                <Flyout>
+                                    <ListView SelectedIndex="2">
+                                        <ListView.Header>
+                                            <TextBlock
+                                                Margin="16,0,8,0"
+                                                FontSize="12"
+                                                Foreground="{ThemeResource TextFillColorSecondaryBrush}"
+                                                Text="Profiles" />
+                                        </ListView.Header>
+                                        <ListViewItem Content="Profile 1" />
+                                        <ListViewItem Content="Profile 2" />
+                                        <ListViewItem Content="Profile 3" />
+                                    </ListView>
+                                </Flyout>
+                            </Button.Flyout>
+                        </Button>
                         <Button
                             x:Name="LinkButton"
                             x:Uid="SyncAllMonitorsTooltip"
diff --git a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs
index 7f985d38ea..43737a5224 100644
--- a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs
+++ b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MainWindow.xaml.cs
@@ -157,7 +157,7 @@ namespace PowerDisplay
             // Auto-hide window when it loses focus (deactivated)
             if (args.WindowActivationState == WindowActivationState.Deactivated)
             {
-                HideWindow();
+                // HideWindow();
             }
         }
 
diff --git a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml
new file mode 100644
index 0000000000..10244cee6c
--- /dev/null
+++ b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml
@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<UserControl
+    x:Class="PowerDisplay.MonitorIcon"
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:local="using:PowerDisplay"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    mc:Ignorable="d">
+
+    <Grid>
+        <Viewbox>
+            <Grid>
+                <Grid x:Name="MonitorGrid">
+                    <FontIcon
+                        x:Uid="MonitorTooltip"
+                        VerticalAlignment="Center"
+                        AutomationProperties.AccessibilityView="Raw"
+                        FontSize="22"
+                        Glyph="&#xE7F4;" />
+                    <TextBlock
+                        Margin="0,0,0,4"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        FontSize="10"
+                        FontWeight="SemiBold"
+                        Text="{x:Bind MonitorNumber, Mode=OneWay}" />
+                </Grid>
+
+                <Grid
+                    x:Name="BuiltInDisplayGrid"
+                    Padding="0,0,0,-4"
+                    Visibility="Collapsed">
+                    <FontIcon
+                        x:Uid="MonitorTooltip"
+                        Margin="0,0,0,0"
+                        VerticalAlignment="Center"
+                        AutomationProperties.AccessibilityView="Raw"
+                        FontSize="22"
+                        Glyph="&#xE7FB;" />
+                    <TextBlock
+                        Margin="0,0,0,6"
+                        HorizontalAlignment="Center"
+                        VerticalAlignment="Center"
+                        FontSize="10"
+                        FontWeight="SemiBold"
+                        Text="{x:Bind MonitorNumber, Mode=OneWay}" />
+                </Grid>
+            </Grid>
+        </Viewbox>
+        <VisualStateManager.VisualStateGroups>
+            <VisualStateGroup x:Name="CommonStates">
+                <VisualState x:Name="Monitor" />
+                <VisualState x:Name="BuiltIn">
+                    <VisualState.Setters>
+                        <Setter Target="BuiltInDisplayGrid.Visibility" Value="Visible" />
+                        <Setter Target="MonitorGrid.Visibility" Value="Collapsed" />
+                    </VisualState.Setters>
+                </VisualState>
+            </VisualStateGroup>
+        </VisualStateManager.VisualStateGroups>
+    </Grid>
+</UserControl>
diff --git a/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml.cs b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml.cs
new file mode 100644
index 0000000000..3948332d0b
--- /dev/null
+++ b/src/modules/powerdisplay/PowerDisplay/PowerDisplayXAML/MonitorIcon.xaml.cs
@@ -0,0 +1,45 @@
+// Copyright (c) Microsoft Corporation
+// The Microsoft Corporation licenses this file to you under the MIT license.
+// See the LICENSE file in the project root for more information.
+
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Controls;
+
+namespace PowerDisplay;
+
+public sealed partial class MonitorIcon : UserControl
+{
+    public MonitorIcon()
+    {
+        InitializeComponent();
+    }
+
+    public bool IsBuiltIn
+    {
+        get => (bool)GetValue(IsBuiltInProperty);
+        set => SetValue(IsBuiltInProperty, value);
+    }
+
+    public static readonly DependencyProperty IsBuiltInProperty = DependencyProperty.Register(nameof(IsBuiltIn), typeof(bool), typeof(MonitorIcon), new PropertyMetadata(false, OnPropertyChanged));
+
+    public int MonitorNumber
+    {
+        get => (int)GetValue(MonitorNumberProperty);
+        set => SetValue(MonitorNumberProperty, value);
+    }
+
+    public static readonly DependencyProperty MonitorNumberProperty = DependencyProperty.Register(nameof(MonitorNumber), typeof(int), typeof(MonitorIcon), new PropertyMetadata(0, OnPropertyChanged));
+
+    private static void OnPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
+    {
+        var monIcon = (MonitorIcon)d;
+        if (monIcon.IsBuiltIn)
+        {
+            VisualStateManager.GoToState(monIcon, "BuiltIn", true);
+        }
+        else
+        {
+            VisualStateManager.GoToState(monIcon, "Monitor", true);
+        }
+    }
+}
diff --git a/src/modules/powerdisplay/PowerDisplay/ViewModels/MonitorViewModel.cs b/src/modules/powerdisplay/PowerDisplay/ViewModels/MonitorViewModel.cs
index cace286b8d..06d7694b3c 100644
--- a/src/modules/powerdisplay/PowerDisplay/ViewModels/MonitorViewModel.cs
+++ b/src/modules/powerdisplay/PowerDisplay/ViewModels/MonitorViewModel.cs
@@ -281,10 +281,10 @@ public partial class MonitorViewModel : INotifyPropertyChanged, IDisposable
         {
             // Check if there's more than one visible monitor and MonitorNumber is valid
             // Set the limit to zero for debugging.
-            if (_mainViewModel != null && _mainViewModel.Monitors.Count > 0 && MonitorNumber > 0)
+            /* if (_mainViewModel != null && _mainViewModel.Monitors.Count > 0 && MonitorNumber > 0)
             {
                 return $"{Name} {MonitorNumber}";
-            }
+            } */
 
             return Name;
         }