UX tweaks

This commit is contained in:
Niels Laute
2025-11-26 18:07:20 +01:00
parent 3598c2c126
commit 84f8c45733
5 changed files with 264 additions and 107 deletions

View File

@@ -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,25 +100,55 @@
<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}" />
<Button
Grid.Column="2"
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>
<StackPanel
Margin="0,8,0,0"
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>
@@ -130,14 +161,14 @@
x:Uid="BrightnessTooltip"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
FontSize="14"
Glyph="&#xE706;" />
FontSize="18"
Glyph="&#xEC8A;" />
<Slider
x:Uid="BrightnessAutomation"
DataContext="{x:Bind}"
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}"
@@ -147,11 +178,11 @@
Value="{x:Bind Brightness, Mode=OneWay}" />
</Grid>
<!-- Contrast Control -->
<!-- Contrast Control {x:Bind ConvertBoolToVisibility(ShowContrast), Mode=OneWay}" -->
<Grid
Margin="0,8,0,0"
HorizontalAlignment="Stretch"
Visibility="{x:Bind ConvertBoolToVisibility(ShowContrast), Mode=OneWay}">
Visibility="Visible">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="16" />
<ColumnDefinition Width="16" />
@@ -163,14 +194,14 @@
x:Uid="ContrastTooltip"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
FontSize="14"
FontSize="12"
Glyph="&#xE7A1;" />
<Slider
x:Uid="ContrastAutomation"
DataContext="{x:Bind}"
Grid.Column="2"
VerticalAlignment="Center"
DataContext="{x:Bind}"
IsEnabled="{x:Bind IsInteractionEnabled, Mode=OneWay}"
Maximum="100"
Minimum="0"
@@ -180,11 +211,8 @@
Value="{x:Bind ContrastPercent, Mode=OneWay}" />
</Grid>
<!-- Volume Control -->
<Grid
Margin="0,8,0,0"
HorizontalAlignment="Stretch"
Visibility="{x:Bind ConvertBoolToVisibility(ShowVolume), Mode=OneWay}">
<!-- 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" />
@@ -194,16 +222,17 @@
<FontIcon
x:Uid="VolumeTooltip"
Margin="2,0,0,0"
VerticalAlignment="Center"
AutomationProperties.AccessibilityView="Raw"
FontSize="14"
Glyph="&#xE767;" />
FontSize="16"
Glyph="&#xE993;" />
<Slider
x:Uid="VolumeAutomation"
DataContext="{x:Bind}"
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}"
@@ -213,20 +242,40 @@
Value="{x:Bind Volume, Mode=OneWay}" />
</Grid>
</StackPanel>
</StackPanel>
</DataTemplate>
</ItemsRepeater.ItemTemplate>
</ItemsRepeater>
</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"

View File

@@ -157,7 +157,7 @@ namespace PowerDisplay
// Auto-hide window when it loses focus (deactivated)
if (args.WindowActivationState == WindowActivationState.Deactivated)
{
HideWindow();
// HideWindow();
}
}

View File

@@ -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>

View File

@@ -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);
}
}
}

View File

@@ -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;
}