Mouse Utils - Mouse Pointer Crosshair (#15633)

* Apply PowerToys template * Add CppWinRt package * Add Settings reference * Use proper output dir * Proper WindowsTargetPlatformVersion * Add filters to vcxproj * Proper resource file generation * Remove boilerplate code * Initial implementation of the mouse crosshair * Add enable module to settings page * Change hotkey in settings * Add color, opacity, thickness settings * Add telemetry * Add Oobe entry * Add installer instructions * Add dll to pipelines * Add crosshair borders * Fix settings case * Tweak defaults to make it look like the specs * fix spellchecker * Fix resources and binary info * Correct composition tree comment typo * Reduce argument copy * Start disabled by default * Add maximum to crosshair thickness and border size * Set minimum border size of 0 * Fix comment * Add maximum to radius * Add comment for non-localizable strings * Rename "Inclusive Mouse"-"Mouse Pointer Crosshair"
2026-04-05 02:36:19 +02:00 · 2022-01-24 13:29:16 +00:00
parent 453bb613af
commit 2e8dfa73d2
27 changed files with 1622 additions and 4 deletions
--- a/src/settings-ui/Settings.UI.Library/EnabledModules.cs
+++ b/src/settings-ui/Settings.UI.Library/EnabledModules.cs
@@ -223,6 +223,22 @@ namespace Microsoft.PowerToys.Settings.UI.Library
            }
        }

+        private bool mousePointerCrosshair = true;
+
+        [JsonPropertyName("MousePointerCrosshair")]
+        public bool MousePointerCrosshair
+        {
+            get => mousePointerCrosshair;
+            set
+            {
+                if (mousePointerCrosshair != value)
+                {
+                    LogTelemetryEvent(value);
+                    mousePointerCrosshair = value;
+                }
+            }
+        }
+
        public string ToJsonString()
        {
            return JsonSerializer.Serialize(this);
--- a/src/settings-ui/Settings.UI.Library/MousePointerCrosshairProperties.cs
+++ b/src/settings-ui/Settings.UI.Library/MousePointerCrosshairProperties.cs
@@ -0,0 +1,43 @@
+// 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 System.Text.Json.Serialization;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class MousePointerCrosshairProperties
+    {
+        [JsonPropertyName("activation_shortcut")]
+        public HotkeySettings ActivationShortcut { get; set; }
+
+        [JsonPropertyName("crosshair_color")]
+        public StringProperty CrosshairColor { get; set; }
+
+        [JsonPropertyName("crosshair_opacity")]
+        public IntProperty CrosshairOpacity { get; set; }
+
+        [JsonPropertyName("crosshair_radius")]
+        public IntProperty CrosshairRadius { get; set; }
+
+        [JsonPropertyName("crosshair_thickness")]
+        public IntProperty CrosshairThickness { get; set; }
+
+        [JsonPropertyName("crosshair_border_color")]
+        public StringProperty CrosshairBorderColor { get; set; }
+
+        [JsonPropertyName("crosshair_border_size")]
+        public IntProperty CrosshairBorderSize { get; set; }
+
+        public MousePointerCrosshairProperties()
+        {
+            ActivationShortcut = new HotkeySettings(false, true, true, false, 0x50); // Ctrl + Alt + P
+            CrosshairColor = new StringProperty("#FF0000");
+            CrosshairOpacity = new IntProperty(75);
+            CrosshairRadius = new IntProperty(20);
+            CrosshairThickness = new IntProperty(5);
+            CrosshairBorderColor = new StringProperty("#FFFFFF");
+            CrosshairBorderSize = new IntProperty(1);
+        }
+    }
+}
--- a/src/settings-ui/Settings.UI.Library/MousePointerCrosshairSettings.cs
+++ b/src/settings-ui/Settings.UI.Library/MousePointerCrosshairSettings.cs
@@ -0,0 +1,35 @@
+// 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 System.Text.Json.Serialization;
+using Microsoft.PowerToys.Settings.UI.Library.Interfaces;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class MousePointerCrosshairSettings : BasePTModuleSettings, ISettingsConfig
+    {
+        public const string ModuleName = "MousePointerCrosshair";
+
+        [JsonPropertyName("properties")]
+        public MousePointerCrosshairProperties Properties { get; set; }
+
+        public MousePointerCrosshairSettings()
+        {
+            Name = ModuleName;
+            Properties = new MousePointerCrosshairProperties();
+            Version = "1.0";
+        }
+
+        public string GetModuleName()
+        {
+            return Name;
+        }
+
+        // This can be utilized in the future if the settings.json file is to be modified/deleted.
+        public bool UpgradeSettingsConfiguration()
+        {
+            return false;
+        }
+    }
+}
--- a/src/settings-ui/Settings.UI.Library/MousePointerCrosshairSettingsIPCMessage.cs
+++ b/src/settings-ui/Settings.UI.Library/MousePointerCrosshairSettingsIPCMessage.cs
@@ -0,0 +1,29 @@
+// 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 System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class MousePointerCrosshairSettingsIPCMessage
+    {
+        [JsonPropertyName("powertoys")]
+        public SndMousePointerCrosshairSettings Powertoys { get; set; }
+
+        public MousePointerCrosshairSettingsIPCMessage()
+        {
+        }
+
+        public MousePointerCrosshairSettingsIPCMessage(SndMousePointerCrosshairSettings settings)
+        {
+            this.Powertoys = settings;
+        }
+
+        public string ToJsonString()
+        {
+            return JsonSerializer.Serialize(this);
+        }
+    }
+}
--- a/src/settings-ui/Settings.UI.Library/SndMousePointerCrosshairSettings.cs
+++ b/src/settings-ui/Settings.UI.Library/SndMousePointerCrosshairSettings.cs
@@ -0,0 +1,29 @@
+// 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 System.Text.Json;
+using System.Text.Json.Serialization;
+
+namespace Microsoft.PowerToys.Settings.UI.Library
+{
+    public class SndMousePointerCrosshairSettings
+    {
+        [JsonPropertyName("MousePointerCrosshair")]
+        public MousePointerCrosshairSettings MousePointerCrosshair { get; set; }
+
+        public SndMousePointerCrosshairSettings()
+        {
+        }
+
+        public SndMousePointerCrosshairSettings(MousePointerCrosshairSettings settings)
+        {
+            MousePointerCrosshair = settings;
+        }
+
+        public string ToJsonString()
+        {
+            return JsonSerializer.Serialize(this);
+        }
+    }
+}
--- a/src/settings-ui/Settings.UI.Library/ViewModels/MouseUtilsViewModel.cs
+++ b/src/settings-ui/Settings.UI.Library/ViewModels/MouseUtilsViewModel.cs
@@ -19,7 +19,9 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels

        private MouseHighlighterSettings MouseHighlighterSettingsConfig { get; set; }

-        public MouseUtilsViewModel(ISettingsUtils settingsUtils, ISettingsRepository<GeneralSettings> settingsRepository, ISettingsRepository<FindMyMouseSettings> findMyMouseSettingsRepository, ISettingsRepository<MouseHighlighterSettings> mouseHighlighterSettingsRepository, Func<string, int> ipcMSGCallBackFunc)
+        private MousePointerCrosshairSettings MousePointerCrosshairSettingsConfig { get; set; }
+
+        public MouseUtilsViewModel(ISettingsUtils settingsUtils, ISettingsRepository<GeneralSettings> settingsRepository, ISettingsRepository<FindMyMouseSettings> findMyMouseSettingsRepository, ISettingsRepository<MouseHighlighterSettings> mouseHighlighterSettingsRepository, ISettingsRepository<MousePointerCrosshairSettings> mousePointerCrosshairSettingsRepository, Func<string, int> ipcMSGCallBackFunc)
        {
            SettingsUtils = settingsUtils;

@@ -35,6 +37,8 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels

            _isMouseHighlighterEnabled = GeneralSettingsConfig.Enabled.MouseHighlighter;

+            _isMousePointerCrosshairEnabled = GeneralSettingsConfig.Enabled.MousePointerCrosshair;
+
            // To obtain the find my mouse settings, if the file exists.
            // If not, to create a file with the default settings and to return the default configurations.
            if (findMyMouseSettingsRepository == null)
@@ -73,6 +77,24 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
            _highlightFadeDelayMs = MouseHighlighterSettingsConfig.Properties.HighlightFadeDelayMs.Value;
            _highlightFadeDurationMs = MouseHighlighterSettingsConfig.Properties.HighlightFadeDurationMs.Value;

+            if (mousePointerCrosshairSettingsRepository == null)
+            {
+                throw new ArgumentNullException(nameof(mousePointerCrosshairSettingsRepository));
+            }
+
+            MousePointerCrosshairSettingsConfig = mousePointerCrosshairSettingsRepository.SettingsConfig;
+
+            string crosshairColor = MousePointerCrosshairSettingsConfig.Properties.CrosshairColor.Value;
+            _mousePointerCrosshairColor = !string.IsNullOrEmpty(crosshairColor) ? crosshairColor : "#FF0000";
+
+            string crosshairBorderColor = MousePointerCrosshairSettingsConfig.Properties.CrosshairBorderColor.Value;
+            _mousePointerCrosshairBorderColor = !string.IsNullOrEmpty(crosshairBorderColor) ? crosshairBorderColor : "#FFFFFF";
+
+            _mousePointerCrosshairOpacity = MousePointerCrosshairSettingsConfig.Properties.CrosshairOpacity.Value;
+            _mousePointerCrosshairRadius = MousePointerCrosshairSettingsConfig.Properties.CrosshairRadius.Value;
+            _mousePointerCrosshairThickness = MousePointerCrosshairSettingsConfig.Properties.CrosshairThickness.Value;
+            _mousePointerCrosshairBorderSize = MousePointerCrosshairSettingsConfig.Properties.CrosshairBorderSize.Value;
+
            // set the callback functions value to handle outgoing IPC message.
            SendConfigMSG = ipcMSGCallBackFunc;
        }
@@ -398,6 +420,169 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
            SettingsUtils.SaveSettings(MouseHighlighterSettingsConfig.ToJsonString(), MouseHighlighterSettings.ModuleName);
        }

+        public bool IsMousePointerCrosshairEnabled
+        {
+            get => _isMousePointerCrosshairEnabled;
+            set
+            {
+                if (_isMousePointerCrosshairEnabled != value)
+                {
+                    _isMousePointerCrosshairEnabled = value;
+
+                    GeneralSettingsConfig.Enabled.MousePointerCrosshair = value;
+                    OnPropertyChanged(nameof(_isMousePointerCrosshairEnabled));
+
+                    OutGoingGeneralSettings outgoing = new OutGoingGeneralSettings(GeneralSettingsConfig);
+                    SendConfigMSG(outgoing.ToString());
+
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public HotkeySettings MousePointerCrosshairActivationShortcut
+        {
+            get
+            {
+                return MousePointerCrosshairSettingsConfig.Properties.ActivationShortcut;
+            }
+
+            set
+            {
+                if (MousePointerCrosshairSettingsConfig.Properties.ActivationShortcut != value)
+                {
+                    MousePointerCrosshairSettingsConfig.Properties.ActivationShortcut = value;
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public string MousePointerCrosshairColor
+        {
+            get
+            {
+                return _mousePointerCrosshairColor;
+            }
+
+            set
+            {
+                // The fallback value is based on ToRGBHex's behavior, which returns
+                // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
+                // This extra handling is added here to deal with FxCop warnings.
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
+                if (!value.Equals(_mousePointerCrosshairColor, StringComparison.OrdinalIgnoreCase))
+                {
+                    _mousePointerCrosshairColor = value;
+                    MousePointerCrosshairSettingsConfig.Properties.CrosshairColor.Value = value;
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public int MousePointerCrosshairOpacity
+        {
+            get
+            {
+                return _mousePointerCrosshairOpacity;
+            }
+
+            set
+            {
+                if (value != _mousePointerCrosshairOpacity)
+                {
+                    _mousePointerCrosshairOpacity = value;
+                    MousePointerCrosshairSettingsConfig.Properties.CrosshairOpacity.Value = value;
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public int MousePointerCrosshairRadius
+        {
+            get
+            {
+                return _mousePointerCrosshairRadius;
+            }
+
+            set
+            {
+                if (value != _mousePointerCrosshairRadius)
+                {
+                    _mousePointerCrosshairRadius = value;
+                    MousePointerCrosshairSettingsConfig.Properties.CrosshairRadius.Value = value;
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public int MousePointerCrosshairThickness
+        {
+            get
+            {
+                return _mousePointerCrosshairThickness;
+            }
+
+            set
+            {
+                if (value != _mousePointerCrosshairThickness)
+                {
+                    _mousePointerCrosshairThickness = value;
+                    MousePointerCrosshairSettingsConfig.Properties.CrosshairThickness.Value = value;
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public string MousePointerCrosshairBorderColor
+        {
+            get
+            {
+                return _mousePointerCrosshairBorderColor;
+            }
+
+            set
+            {
+                // The fallback value is based on ToRGBHex's behavior, which returns
+                // #FFFFFF if any exceptions are encountered, e.g. from passing in a null value.
+                // This extra handling is added here to deal with FxCop warnings.
+                value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
+                if (!value.Equals(_mousePointerCrosshairBorderColor, StringComparison.OrdinalIgnoreCase))
+                {
+                    _mousePointerCrosshairBorderColor = value;
+                    MousePointerCrosshairSettingsConfig.Properties.CrosshairBorderColor.Value = value;
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public int MousePointerCrosshairBorderSize
+        {
+            get
+            {
+                return _mousePointerCrosshairBorderSize;
+            }
+
+            set
+            {
+                if (value != _mousePointerCrosshairBorderSize)
+                {
+                    _mousePointerCrosshairBorderSize = value;
+                    MousePointerCrosshairSettingsConfig.Properties.CrosshairBorderSize.Value = value;
+                    NotifyMousePointerCrosshairPropertyChanged();
+                }
+            }
+        }
+
+        public void NotifyMousePointerCrosshairPropertyChanged([CallerMemberName] string propertyName = null)
+        {
+            OnPropertyChanged(propertyName);
+
+            SndMousePointerCrosshairSettings outsettings = new SndMousePointerCrosshairSettings(MousePointerCrosshairSettingsConfig);
+            SndModuleSettings<SndMousePointerCrosshairSettings> ipcMessage = new SndModuleSettings<SndMousePointerCrosshairSettings>(outsettings);
+            SendConfigMSG(ipcMessage.ToJsonString());
+            SettingsUtils.SaveSettings(MousePointerCrosshairSettingsConfig.ToJsonString(), MousePointerCrosshairSettings.ModuleName);
+        }
+
        private Func<string, int> SendConfigMSG { get; }

        private bool _isFindMyMouseEnabled;
@@ -416,5 +601,13 @@ namespace Microsoft.PowerToys.Settings.UI.Library.ViewModels
        private int _highlighterRadius;
        private int _highlightFadeDelayMs;
        private int _highlightFadeDurationMs;
+
+        private bool _isMousePointerCrosshairEnabled;
+        private string _mousePointerCrosshairColor;
+        private int _mousePointerCrosshairOpacity;
+        private int _mousePointerCrosshairRadius;
+        private int _mousePointerCrosshairThickness;
+        private string _mousePointerCrosshairBorderColor;
+        private int _mousePointerCrosshairBorderSize;
    }
 }
--- a/src/settings-ui/Settings.UI/OOBE/Views/OobeMouseUtils.xaml
+++ b/src/settings-ui/Settings.UI/OOBE/Views/OobeMouseUtils.xaml
@@ -22,6 +22,10 @@
                           Style="{ThemeResource OobeSubtitleStyle}" />
                <toolkitcontrols:MarkdownTextBlock Background="Transparent" x:Uid="Oobe_MouseUtils_MouseHighlighter_Description" />

+                <TextBlock x:Uid="Oobe_MouseUtils_MousePointerCrosshair"
+                           Style="{ThemeResource OobeSubtitleStyle}" />
+                <toolkitcontrols:MarkdownTextBlock Background="Transparent" x:Uid="Oobe_MouseUtils_MousePointerCrosshair_Description" />
+
                <StackPanel Orientation="Horizontal" Spacing="12" Margin="0,24,0,0">
                    <Button x:Uid="OOBE_Settings"
                            Click="SettingsLaunchButton_Click"/>
--- a/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
+++ b/src/settings-ui/Settings.UI/Strings/en-us/Resources.resw
@@ -1651,6 +1651,14 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
    <value>Use a keyboard shortcut highlight left and right mouse clicks.</value>
    <comment>Mouse as in the hardware peripheral.</comment>
  </data>
+  <data name="Oobe_MouseUtils_MousePointerCrosshair.Text" xml:space="preserve">
+    <value>Mouse Pointer Crosshair</value>
+    <comment>Mouse as in the hardware peripheral.</comment>
+  </data>
+  <data name="Oobe_MouseUtils_MousePointerCrosshair_Description.Text" xml:space="preserve">
+    <value>Draw a crosshair centered around the mouse pointer.</value>
+    <comment>Mouse as in the hardware peripheral.</comment>
+  </data>
  <data name="Launch_Run.Content" xml:space="preserve">
    <value>Launch PowerToys Run</value>
  </data>
@@ -1821,6 +1829,45 @@ From there, simply click on a Markdown file, PDF file or SVG icon in the File Ex
    <value>Duration of the disappear animation (ms)</value>
 	<comment>ms = milliseconds</comment>
  </data>
+  <data name="MouseUtils_MousePointerCrosshair.Header" xml:space="preserve">
+    <value>Mouse Pointer Crosshair</value>
+    <comment>Refers to the utility name</comment>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair.Description" xml:space="preserve">
+    <value>Mouse Pointer Crosshair draws a crosshair centered on the mouse pointer.</value>
+    <comment>"Mouse Pointer Crosshair" is the name of the utility. Mouse is the hardware mouse.</comment>
+  </data>
+  <data name="MouseUtils_Enable_MousePointerCrosshair.Header" xml:space="preserve">
+    <value>Enable Mouse Pointer Crosshair</value>
+    <comment>"Mouse Pointer Crosshair" is the name of the utility.</comment>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_ActivationShortcut.Header" xml:space="preserve">
+    <value>Activation shortcut</value>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_ActivationShortcut.Description" xml:space="preserve">
+    <value>Customize the shortcut to show/hide the crosshair</value>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_CrosshairColor.Header" xml:space="preserve">
+    <value>Crosshair color</value>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_CrosshairOpacity.Header" xml:space="preserve">
+    <value>Crosshair opacity (%)</value>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_CrosshairRadius.Header" xml:space="preserve">
+    <value>Crosshair center radius (px)</value>
+	  <comment>px = pixels</comment>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_CrosshairThickness.Header" xml:space="preserve">
+    <value>Crosshair thickness (px)</value>
+	  <comment>px = pixels</comment>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_CrosshairBorderColor.Header" xml:space="preserve">
+    <value>Crosshair border color</value>
+  </data>
+  <data name="MouseUtils_MousePointerCrosshair_CrosshairBorderSize.Header" xml:space="preserve">
+    <value>Crosshair border size (px)</value>
+	  <comment>px = pixels</comment>
+  </data>
  <data name="FancyZones_Radio_Custom_Colors.Content" xml:space="preserve">
    <value>Custom colors</value>
  </data>
--- a/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml
+++ b/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml
@@ -175,7 +175,89 @@
            </controls:SettingExpander.Content>
            </controls:SettingExpander>
                </controls:SettingsGroup>
-            
+
+                <controls:SettingsGroup x:Uid="MouseUtils_MousePointerCrosshair">
+                    <controls:Setting x:Uid="MouseUtils_Enable_MousePointerCrosshair" Icon="&#xE710;">
+                        <!-- TODO: Uncomment once an icon is added.
+                        <controls:Setting.Icon>
+                            <BitmapIcon UriSource="ms-appx:///Assets/FluentIcons/FluentIconsMousePointerCrosshair.png" ShowAsMonochrome="False" />
+                        </controls:Setting.Icon>
+                        -->
+                        <controls:Setting.ActionContent>
+                            <ToggleSwitch IsOn="{x:Bind ViewModel.IsMousePointerCrosshairEnabled, Mode=TwoWay}" x:Uid="ToggleSwitch"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                    <controls:Setting x:Uid="MouseUtils_MousePointerCrosshair_ActivationShortcut" Icon="&#xEDA7;" IsEnabled="{x:Bind ViewModel.IsMousePointerCrosshairEnabled, Mode=OneWay}">
+                        <controls:Setting.ActionContent>
+                            <controls:ShortcutControl HotkeySettings="{x:Bind Path=ViewModel.MousePointerCrosshairActivationShortcut, Mode=TwoWay}"
+                                                            MinWidth="{StaticResource SettingActionControlMinWidth}"/>
+                        </controls:Setting.ActionContent>
+                    </controls:Setting>
+                    <controls:SettingExpander IsEnabled="{x:Bind ViewModel.IsMousePointerCrosshairEnabled, Mode=OneWay}" IsExpanded="False" >
+                        <controls:SettingExpander.Header>
+                            <controls:Setting x:Uid="ShortcutGuide_Appearance_Behavior" Icon="&#xE790;" />
+                        </controls:SettingExpander.Header>
+                        <controls:SettingExpander.Content>
+                            <StackPanel>
+                                <controls:Setting x:Uid="MouseUtils_MousePointerCrosshair_CrosshairColor" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMousePointerCrosshairEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.MousePointerCrosshairColor, Mode=TwoWay}" />
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <controls:Setting x:Uid="MouseUtils_MousePointerCrosshair_CrosshairOpacity" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMousePointerCrosshairEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <Slider Minimum="1"
+                                            Maximum="100"
+                                            MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                            Value="{x:Bind Mode=TwoWay, Path=ViewModel.MousePointerCrosshairOpacity}"
+                                            HorizontalAlignment="Right"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <controls:Setting x:Uid="MouseUtils_MousePointerCrosshair_CrosshairRadius" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMousePointerCrosshairEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <muxc:NumberBox Minimum="1"
+                                                    Maximum="500"
+                                                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.MousePointerCrosshairRadius}"
+                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                    SpinButtonPlacementMode="Compact"
+                                                    HorizontalAlignment="Left"
+                                                    SmallChange="1"
+                                                    LargeChange="10"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <controls:Setting x:Uid="MouseUtils_MousePointerCrosshair_CrosshairThickness" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMousePointerCrosshairEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <muxc:NumberBox Minimum="1"
+                                                    Maximum="50"
+                                                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.MousePointerCrosshairThickness}"
+                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                    SpinButtonPlacementMode="Compact"
+                                                    HorizontalAlignment="Left"
+                                                    SmallChange="1"
+                                                    LargeChange="10"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <controls:Setting x:Uid="MouseUtils_MousePointerCrosshair_CrosshairBorderColor" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMousePointerCrosshairEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <controls:ColorPickerButton SelectedColor="{x:Bind Path=ViewModel.MousePointerCrosshairBorderColor, Mode=TwoWay}" />
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                                <controls:Setting x:Uid="MouseUtils_MousePointerCrosshair_CrosshairBorderSize" IsEnabled="{x:Bind Mode=OneWay, Path=ViewModel.IsMousePointerCrosshairEnabled}" Style="{StaticResource ExpanderContentSettingStyle}">
+                                    <controls:Setting.ActionContent>
+                                        <muxc:NumberBox Minimum="0"
+                                                    Maximum="50"
+                                                    Value="{x:Bind Mode=TwoWay, Path=ViewModel.MousePointerCrosshairBorderSize}"
+                                                    MinWidth="{StaticResource SettingActionControlMinWidth}"
+                                                    SpinButtonPlacementMode="Compact"
+                                                    HorizontalAlignment="Left"
+                                                    SmallChange="1"
+                                                    LargeChange="2"/>
+                                    </controls:Setting.ActionContent>
+                                </controls:Setting>
+                            </StackPanel>
+                        </controls:SettingExpander.Content>
+                    </controls:SettingExpander>
+                </controls:SettingsGroup>
            </StackPanel>
        </controls:SettingsPageControl.ModuleContent>
        <controls:SettingsPageControl.PrimaryLinks>
--- a/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml.cs
+++ b/src/settings-ui/Settings.UI/Views/MouseUtilsPage.xaml.cs
@@ -33,7 +33,14 @@ namespace Microsoft.PowerToys.Settings.UI.Views
            }

            var settingsUtils = new SettingsUtils();
-            ViewModel = new MouseUtilsViewModel(settingsUtils, SettingsRepository<GeneralSettings>.GetInstance(settingsUtils), SettingsRepository<FindMyMouseSettings>.GetInstance(settingsUtils), SettingsRepository<MouseHighlighterSettings>.GetInstance(settingsUtils), ShellPage.SendDefaultIPCMessage);
+            ViewModel = new MouseUtilsViewModel(
+                settingsUtils,
+                SettingsRepository<GeneralSettings>.GetInstance(settingsUtils),
+                SettingsRepository<FindMyMouseSettings>.GetInstance(settingsUtils),
+                SettingsRepository<MouseHighlighterSettings>.GetInstance(settingsUtils),
+                SettingsRepository<MousePointerCrosshairSettings>.GetInstance(settingsUtils),
+                ShellPage.SendDefaultIPCMessage);
+
            DataContext = ViewModel;
            InitializeComponent();
        }