✨ Continue adding embedded monitor settings to the UI.

src/Exo/Ui/Exo.Settings.Ui/App.xaml.cs

@@ -26,6 +26,7 @@
 using Windows.Storage.Pickers;
 using Windows.Storage;
 using System.Collections.Immutable;
+using Exo.Ui;
 
 namespace Exo.Settings.Ui;
 
@@ -57,7 +58,9 @@ public App()
 
 		GrpcClientFactory.AllowUnencryptedHttp2 = true;
 
-		Services = ConfigureServices();
+		_rasterizationScaleController = new();
+
+		Services = ConfigureServices(_rasterizationScaleController);
 
 		InitializeComponent();
 	}
@@ -76,19 +79,35 @@ protected override void OnLaunched(Microsoft.UI.Xaml.LaunchActivatedEventArgs ar
 		_window.AppWindow.SetIcon(Win32Interop.GetIconIdFromIcon(icon));
 		_window.SystemBackdrop = new MicaBackdrop();
 		_window.ExtendsContentIntoTitleBar = true;
-		_window.Content = new RootPage(_window);
+		var rootPage = new RootPage(_window);
+		_window.Content = rootPage;
 		_window.Activate();
+		// Setup logic to track DPI so that we can properly scale images in the UI.
+		rootPage.Loaded += (sender, e) =>
+		{
+			var xamlRoot = _window.Content.XamlRoot;
+			_rasterizationScaleController.RasterizationScale = xamlRoot.RasterizationScale;
+			xamlRoot.Changed += OnXamlRootChanged;
+		};
+	}
+
+	private void RootPage_Loaded(object sender, RoutedEventArgs e) => throw new NotImplementedException();
+
+	private void OnXamlRootChanged(XamlRoot sender, XamlRootChangedEventArgs args)
+	{
+		_rasterizationScaleController.RasterizationScale = sender.RasterizationScale;
 	}
 
 	private Window? _window;
+	private readonly RasterizationScaleController _rasterizationScaleController;
 
 	public new static App Current => (App)Application.Current;
 
 	public Window? MainWindow => _window;
 
 	public IServiceProvider Services { get; }
 
-	private static IServiceProvider ConfigureServices()
+	private static IServiceProvider ConfigureServices(IRasterizationScaleProvider rasterizationScaleProvider)
 	{
 		var services = new ServiceCollection();
 
@@ -98,6 +117,8 @@ private static IServiceProvider ConfigureServices()
 
 		services.AddSingleton<ConnectionViewModel>();
 
+		services.AddSingleton(rasterizationScaleProvider);
+
 		services.AddSingleton<ISettingsMetadataService, MetadataService>();
 
 		services.AddSingleton<IFileOpenDialog, FileOpenDialog>();
@@ -153,4 +174,15 @@ public PickedFile(StorageFile file)
 		public string? Path => _file.Path;
 		public Task<Stream> OpenForReadAsync() => _file.OpenStreamForReadAsync();
 	}
+
+	private sealed class RasterizationScaleController : BindableObject, IRasterizationScaleProvider
+	{
+		private double _rasterizationScale = 1;
+
+		public double RasterizationScale
+		{
+			get => _rasterizationScale;
+			set => SetValue(ref _rasterizationScale, value, ChangedProperty.RasterizationScale);
+		}
+	}
 }

src/Exo/Ui/Exo.Settings.Ui/ChangedProperty.cs

@@ -6,6 +6,7 @@ namespace Exo.Settings.Ui;
 // While this is more useful for properties that are updated often, all properties can be registered in there with the only overhead of a permanent object instance.
 internal static class ChangedProperty
 {
+	public static readonly PropertyChangedEventArgs RasterizationScale = new(nameof(RasterizationScale));
 	public static readonly PropertyChangedEventArgs SelectedNavigationPage = new(nameof(SelectedNavigationPage));
 	public static readonly PropertyChangedEventArgs CurrentPage = new(nameof(CurrentPage));
 	public static readonly PropertyChangedEventArgs CanNavigateBack = new(nameof(CanNavigateBack));
@@ -67,4 +68,6 @@ internal static class ChangedProperty
 	public static readonly PropertyChangedEventArgs LoadedImageData = new (nameof(LoadedImageData));
 	public static readonly PropertyChangedEventArgs Shape = new (nameof(Shape));
 	public static readonly PropertyChangedEventArgs ImageSize = new (nameof(ImageSize));
+	public static readonly PropertyChangedEventArgs DisplayWidth = new (nameof(DisplayWidth));
+	public static readonly PropertyChangedEventArgs DisplayHeight = new (nameof(DisplayHeight));
 }

src/Exo/Ui/Exo.Settings.Ui/CoolingPage.xaml

@@ -51,14 +51,14 @@
                                                 <ColumnDefinition Width="Auto" />
                                             </Grid.ColumnDefinitions>
                                             <TextBlock Grid.Row="0" Grid.Column="0" x:Uid="CoolerCoolingModeLabel" VerticalAlignment="Center" Margin="{StaticResource RowLabelMargin}" />
-                                            <ComboBox Grid.Row="0" Grid.Column="1" Margin="6,6,6,6" ItemsSource="{Binding CoolingModes}" SelectedItem="{Binding CurrentCoolingMode, Mode=TwoWay}" HorizontalAlignment="Stretch">
+                                            <ComboBox Grid.Row="0" Grid.Column="1" Margin="{StaticResource RowContentLabelMargin}" ItemsSource="{Binding CoolingModes}" SelectedItem="{Binding CurrentCoolingMode, Mode=TwoWay}" HorizontalAlignment="Stretch">
                                                 <ComboBox.ItemTemplate>
                                                     <DataTemplate>
                                                         <TextBlock Text="{Binding CoolingMode, Converter={StaticResource StringResourceConverter}, ConverterParameter=CoolingModes}" />
                                                     </DataTemplate>
                                                 </ComboBox.ItemTemplate>
                                             </ComboBox>
-                                            <Button Grid.Row="0" Grid.Column="2" Margin="6,0,6,0" HorizontalAlignment="Right" Command="{Binding ResetCommand}">
+                                            <Button Grid.Row="0" Grid.Column="2" Margin="{StaticResource RowContentMargin}" HorizontalAlignment="Right" Command="{Binding ResetCommand}">
                                                 <FontIcon Glyph="&#xE777;" />
                                             </Button>
                                         </Grid>

src/Exo/Ui/Exo.Settings.Ui/CustomMenuPage.xaml

@@ -65,7 +65,7 @@
         <ListView
             Grid.Row="2"
             Style="{StaticResource MenuPreviewStyle}"
-            Margin="0,6,0,6"
+            Margin="{StaticResource RowLabelMargin}"
             Background="{ThemeResource AcrylicBackgroundFillColorDefaultBrush}"
             ItemsSource="{Binding EditedMenu.MenuItems, Mode=OneWay}"
             SelectedItem="{Binding SelectedMenuItem, Mode=TwoWay}"

src/Exo/Ui/Exo.Settings.Ui/DataTemplates.xaml

@@ -273,14 +273,14 @@
             <Slider
                 Grid.Row="0"
                 Grid.Column="1"
-                Margin="6,6,6,6"
+                Margin="{StaticResource RowContentLabelMargin}"
                 Maximum="100"
                 Minimum="{Binding MinimumPower, Mode=OneTime}"
                 Value="{Binding Power, Mode=TwoWay, Converter={StaticResource ByteToDoubleConverter}}"
                 HorizontalContentAlignment="Stretch"
                 HorizontalAlignment="Stretch"
                 ThumbToolTipValueConverter="{StaticResource IntegerPercentValueConverter}" />
-            <Button Grid.Row="0" Grid.Column="2" Margin="6,0,6,0" HorizontalAlignment="Right" Command="{Binding ResetPowerCommand}" CommandParameter="{Binding}">
+            <Button Grid.Row="0" Grid.Column="2" Margin="{StaticResource RowContentMargin}" HorizontalAlignment="Right" Command="{Binding ResetPowerCommand}" CommandParameter="{Binding}">
                 <FontIcon Glyph="&#xE777;" />
             </Button>
         </Grid>
@@ -309,14 +309,14 @@
                 HorizontalContentAlignment="Stretch"
                 HorizontalAlignment="Stretch"
                 ThumbToolTipValueConverter="{StaticResource IntegerPercentValueConverter}" />
-            <Button Grid.Row="0" Grid.Column="2" Margin="6,0,6,0" HorizontalAlignment="Right" Command="{Binding ResetFallbackPowerCommand}" CommandParameter="{Binding}">
+            <Button Grid.Row="0" Grid.Column="2" Margin="{StaticResource RowContentMargin}" HorizontalAlignment="Right" Command="{Binding ResetFallbackPowerCommand}" CommandParameter="{Binding}">
                 <FontIcon Glyph="&#xE777;" />
             </Button>
             <TextBlock Grid.Row="1" Grid.Column="0" x:Uid="CoolingInputSensorLabel" VerticalAlignment="Center" Margin="{StaticResource RowLabelMargin}" />
             <ComboBox
                 Grid.Row="1"
                 Grid.Column="1"
-                Margin="6,6,6,6"
+                Margin="{StaticResource RowContentLabelMargin}"
                 ItemsSource="{Binding SensorsAvailableForCoolingControlCurves, Mode=OneTime}"
                 SelectedItem="{Binding InputSensor, Mode=TwoWay}"
                 HorizontalContentAlignment="Stretch"
@@ -327,7 +327,7 @@
                     </DataTemplate>
                 </ComboBox.ItemTemplate>
             </ComboBox>
-            <Button Grid.Row="1" Grid.Column="2" Margin="6,0,6,0" HorizontalAlignment="Right" Command="{Binding ResetInputSensorCommand}" CommandParameter="{Binding}">
+            <Button Grid.Row="1" Grid.Column="2" Margin="{StaticResource RowContentMargin}" HorizontalAlignment="Right" Command="{Binding ResetInputSensorCommand}" CommandParameter="{Binding}">
                 <FontIcon Glyph="&#xE777;" />
             </Button>
             <lcontrols:PowerControlCurveEditor
@@ -359,7 +359,7 @@
             <ComboBox
                 Grid.Row="0"
                 Grid.Column="1"
-                Margin="6,6,6,6"
+                Margin="{StaticResource RowContentLabelMargin}"
                 ItemsSource="{Binding SensorsAvailableForCoolingControlCurves, Mode=OneTime}"
                 SelectedItem="{Binding InputSensor, Mode=TwoWay}"
                 HorizontalContentAlignment="Stretch"
@@ -370,7 +370,7 @@
                     </DataTemplate>
                 </ComboBox.ItemTemplate>
             </ComboBox>
-            <Button Grid.Row="0" Grid.Column="2" Margin="6,0,6,0" HorizontalAlignment="Right" Command="{Binding ResetInputSensorCommand}" CommandParameter="{Binding}">
+            <Button Grid.Row="0" Grid.Column="2" Margin="{StaticResource RowContentMargin}" HorizontalAlignment="Right" Command="{Binding ResetInputSensorCommand}" CommandParameter="{Binding}">
                 <FontIcon Glyph="&#xE777;" />
             </Button>
             <lcontrols:PowerControlCurveEditor

src/Exo/Ui/Exo.Settings.Ui/EditionToolbar.xaml

@@ -12,7 +12,7 @@
 
     <StackPanel
         Grid.Row="1"
-        Margin="0,6,0,6"
+        Margin="{StaticResource RowLabelMargin}"
         Orientation="Horizontal">
         <FontIcon VerticalAlignment="Center" Margin="{StaticResource RowLabelMargin}" Glyph="&#xE790;" />
         <controls:ColorPickerButton

src/Exo/Ui/Exo.Settings.Ui/EmbeddedMonitorSettingsControl.xaml

@@ -11,8 +11,8 @@
     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
     mc:Ignorable="d"
     d:DataContext="{d:DesignInstance vm:EmbeddedMonitorFeaturesViewModel, IsDesignTimeCreatable=False}">
-    <ContentPresenter Content="{Binding}" HorizontalAlignment="Stretch">
-        <ContentPresenter.ContentTemplateSelector>
+    <ContentControl Content="{Binding}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch">
+        <ContentControl.ContentTemplateSelector>
             <lts:EmbeddedMonitorSettingTemplateSelector>
                 <lts:EmbeddedMonitorSettingTemplateSelector.SingleMonitorTemplate>
                     <DataTemplate x:DataType="vm:EmbeddedMonitorFeaturesViewModel">
@@ -27,14 +27,37 @@
                                     <ColumnDefinition Width="*" />
                                     <ColumnDefinition Width="Auto" />
                                 </Grid.ColumnDefinitions>
+                                <TextBlock Text="A" Margin="{StaticResource RowLabelMargin}"></TextBlock>
+                                <ComboBox Grid.Column="1" Margin="{StaticResource RowContentLabelMargin}" />
+                                <Button Grid.Column="2" Margin="{StaticResource RowContentMargin}" HorizontalAlignment="Right" Command="{Binding ResetCommand}">
+                                    <FontIcon Glyph="&#xE777;" />
+                                </Button>
+                            </Grid>
+                            <Grid Grid.Row="1" MinWidth="{Binding DisplayWidth}" MinHeight="{Binding DisplayHeight}" Background="Black" BorderBrush="White">
+                                <Image HorizontalAlignment="Center" />
                             </Grid>
-                            <Image Grid.Row="1" Width="{Binding ImageSize.Width}" Height="{Binding ImageSize.Height}" />
                         </Grid>
                     </DataTemplate>
                 </lts:EmbeddedMonitorSettingTemplateSelector.SingleMonitorTemplate>
                 <lts:EmbeddedMonitorSettingTemplateSelector.MonitorMatrixTemplate>
                     <DataTemplate x:DataType="vm:EmbeddedMonitorFeaturesViewModel">
-                        <Grid></Grid>
+                        <Grid>
+                            <!-- TODO: Create a Control to display items in a fixed grid -->
+                            <ItemsView ItemsSource="{Binding EmbeddedMonitors}">
+                                <ItemsView.ItemTemplate>
+                                    <DataTemplate x:DataType="vm:EmbeddedMonitorViewModel">
+                                        <ItemContainer>
+                                            <Grid Width="{Binding DisplayWidth}" Height="{Binding DisplayHeight}" Background="Black" Margin="3">
+                                                <Image></Image>
+                                            </Grid>
+                                        </ItemContainer>
+                                    </DataTemplate>
+                                </ItemsView.ItemTemplate>
+                                <ItemsView.Layout>
+                                    <UniformGridLayout MaximumRowsOrColumns="8" />
+                                </ItemsView.Layout>
+                            </ItemsView>
+                        </Grid>
                     </DataTemplate>
                 </lts:EmbeddedMonitorSettingTemplateSelector.MonitorMatrixTemplate>
                 <lts:EmbeddedMonitorSettingTemplateSelector.MultiMonitorTemplate>
@@ -43,6 +66,6 @@
                     </DataTemplate>
                 </lts:EmbeddedMonitorSettingTemplateSelector.MultiMonitorTemplate>
             </lts:EmbeddedMonitorSettingTemplateSelector>
-        </ContentPresenter.ContentTemplateSelector>
-    </ContentPresenter>
+        </ContentControl.ContentTemplateSelector>
+    </ContentControl>
 </UserControl>

src/Exo/Ui/Exo.Settings.Ui/HomePage.xaml

@@ -22,10 +22,10 @@
         <TextBlock x:Uid="WelcomeTextBlock" />
         <StackPanel
             Grid.Row="1"
-            Margin="0,6,0,6"
+            Margin="{StaticResource RowLabelMargin}"
             Orientation="Vertical"
             Visibility="{Binding BatteryDevices.ConnectedBatteryDevices.Count, Converter={StaticResource IntegerToVisibilityConverter}}">
-            <TextBlock x:Uid="BatteryLevelsTitleTextBlock" Style="{ThemeResource SubtitleTextBlockStyle}" Margin="0,6,0,6" />
+            <TextBlock x:Uid="BatteryLevelsTitleTextBlock" Style="{ThemeResource SubtitleTextBlockStyle}" Margin="{StaticResource RowLabelMargin}" />
             <Border Padding="6" HorizontalAlignment="Stretch" Background="{ThemeResource SolidBackgroundFillColorBaseBrush}" BorderBrush="{ThemeResource CardStrokeColorDefaultSolidBrush}" BorderThickness="{ThemeResource ToolTipBorderThemeThickness}" CornerRadius="{ThemeResource OverlayCornerRadius}">
                 <ItemsRepeater ItemsSource="{Binding BatteryDevices.ConnectedBatteryDevices}">
                     <ItemsRepeater.Layout>

src/Exo/Ui/Exo.Settings.Ui/LightingZoneControl.xaml

@@ -16,29 +16,29 @@
                 <ColumnDefinition Width="Auto" />
             </Grid.ColumnDefinitions>
             <TextBlock Grid.Column="0" x:Uid="LightingEffectLabel" VerticalAlignment="Center" Margin="{StaticResource RowLabelMargin}" />
-            <ComboBox Grid.Column="1" Margin="6,6,6,6" ItemsSource="{Binding SupportedEffects}" SelectedItem="{Binding CurrentEffect, Mode=TwoWay}" HorizontalAlignment="Stretch">
+            <ComboBox Grid.Column="1" Margin="{StaticResource RowContentLabelMargin}" ItemsSource="{Binding SupportedEffects}" SelectedItem="{Binding CurrentEffect, Mode=TwoWay}" HorizontalAlignment="Stretch">
                 <ComboBox.ItemTemplate>
                     <DataTemplate>
                         <TextBlock Text="{Binding DisplayName}" />
                     </DataTemplate>
                 </ComboBox.ItemTemplate>
             </ComboBox>
-            <Button Grid.Column="2" Margin="6,0,6,0" HorizontalAlignment="Right" Command="{Binding ResetCommand}">
+            <Button Grid.Column="2" Margin="{StaticResource RowContentMargin}" HorizontalAlignment="Right" Command="{Binding ResetCommand}">
                 <FontIcon Glyph="&#xE777;" />
             </Button>
         </Grid>
         <ItemsControl ItemsSource="{Binding Properties}">
             <ItemsControl.ItemTemplate>
                 <DataTemplate>
-                    <Grid Margin="0,6,0,6" HorizontalAlignment="Stretch">
+                    <Grid Margin="{StaticResource RowLabelMargin}" HorizontalAlignment="Stretch">
                         <Grid.ColumnDefinitions>
                             <ColumnDefinition Width="{StaticResource PropertyLabelColumnWidth}" />
                             <ColumnDefinition Width="*" />
                             <ColumnDefinition Width="Auto" />
                         </Grid.ColumnDefinitions>
                         <TextBlock Grid.Column="0" VerticalAlignment="Center" Margin="{StaticResource RowLabelMargin}" Text="{Binding DisplayName}" />
                         <ContentControl Grid.Column="1" VerticalAlignment="Center" Margin="{StaticResource RowContentMargin}" Content="{Binding Mode=OneWay}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ContentTemplateSelector="{StaticResource EffectPropertyTemplateSelector}" />
-                        <Button Grid.Column="2" Margin="6,0,6,0" Command="{Binding ResetCommand}">
+                        <Button Grid.Column="2" Margin="{StaticResource RowContentMargin}" Command="{Binding ResetCommand}">
                             <FontIcon Glyph="&#xE777;" />
                         </Button>
                     </Grid>

src/Exo/Ui/Exo.Settings.Ui/MonitorSettingControl.xaml

@@ -10,7 +10,7 @@
     mc:Ignorable="d"
     d:DataContext="{d:DesignInstance vm:MonitorDeviceSettingViewModel, IsDesignTimeCreatable=False}">
 
-    <Grid Margin="0,6,0,6" HorizontalAlignment="Stretch">
+    <Grid Margin="{StaticResource RowLabelMargin}" HorizontalAlignment="Stretch">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="200" />
             <ColumnDefinition Width="*" />

src/Exo/Ui/Exo.Settings.Ui/RootPage.xaml

@@ -139,7 +139,7 @@
                     <FontIcon Glyph="{Binding CurrentPage.Icon}" Margin="6,4,6,0" />
                     <TextBlock
                         Grid.Column="1"
-                        Margin="6,0,6,0"
+                        Margin="{StaticResource RowContentMargin}"
                         Text="{Binding CurrentPage.DisplayName}"
                         Style="{StaticResource TitleTextBlockStyle}"
                         TextTrimming="CharacterEllipsis"

src/Exo/Ui/Exo.Settings.Ui/Services/IPickedFile.cs

@@ -1,4 +1,4 @@
-namespace Exo.Settings.Ui.Services;
+namespace Exo.Settings.Ui.Services;
 
 public interface IPickedFile
 {

src/Exo/Ui/Exo.Settings.Ui/Services/IRasterizationScaleProvider.cs

@@ -0,0 +1,8 @@
+using System.ComponentModel;
+
+namespace Exo.Settings.Ui.Services;
+
+internal interface IRasterizationScaleProvider : INotifyPropertyChanged
+{
+	double RasterizationScale { get; }
+}

src/Exo/Ui/Exo.Settings.Ui/ViewModels/DeviceViewModel.cs

@@ -6,14 +6,15 @@
 
 namespace Exo.Settings.Ui.ViewModels;
 
-internal class DeviceViewModel : BindableObject
+internal class DeviceViewModel : BindableObject, IDisposable
 {
 	public DeviceViewModel
 	(
 		SettingsServiceConnectionManager connectionManager,
 		ISettingsMetadataService metadataService,
 		IPowerService powerService,
 		IMouseService mouseService,
+		IRasterizationScaleProvider rasterizationScaleProvider,
 		DeviceInformation deviceInformation
 	)
 	{
@@ -44,12 +45,17 @@ DeviceInformation deviceInformation
 				}
 				else if (featureId == WellKnownGuids.EmbeddedMonitorDeviceFeature)
 				{
-					EmbeddedMonitorFeatures ??= new(this);
+					EmbeddedMonitorFeatures ??= new(this, rasterizationScaleProvider);
 				}
 			}
 		}
 	}
 
+	public void Dispose()
+	{
+		EmbeddedMonitorFeatures?.Dispose();
+	}
+
 	public Guid Id { get; }
 
 	private string _friendlyName;