[Find My Mouse] Adding transparency support for spotlight (#41701)

<!-- Enter a brief description/summary of your PR here. What does it
fix/what does it change/how was it tested (even manually, if necessary)?
-->
## Summary of the Pull Request
### Feature
Separate the find my mouse's spotlight area with the backdrop, so that
we could support the frequent ask - We should leave the circle
transparent in find my mouse

### Engineering:
1. Modernize the framework - From UWP composition to WASDK composition
api

<!-- Please review the items on the PR checklist before submitting-->
## PR Checklist

- [x] Closes: #15512
- [ ] **Communication:** I've discussed this with core contributors
already. If the work hasn't been agreed, this work might be rejected
- [ ] **Tests:** Added/updated and all pass
- [ ] **Localization:** All end-user-facing strings can be localized
- [ ] **Dev docs:** Added/updated
- [ ] **New binaries:** Added on the required places
- [ ] [JSON for
signing](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ESRPSigning_core.json)
for new binaries
- [ ] [WXS for
installer](https://github.com/microsoft/PowerToys/blob/main/installer/PowerToysSetup/Product.wxs)
for new binaries and localization folder
- [ ] [YML for CI
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/ci/templates/build-powertoys-steps.yml)
for new test projects
- [ ] [YML for signed
pipeline](https://github.com/microsoft/PowerToys/blob/main/.pipelines/release.yml)
- [ ] **Documentation updated:** If checked, please file a pull request
on [our docs
repo](https://github.com/MicrosoftDocs/windows-uwp/tree/docs/hub/powertoys)
and link it here: #xxx

<!-- Provide a more detailed description of the PR, other things fixed,
or any additional comments/features here -->
## Detailed Description of the Pull Request / Additional comments

<!-- Describe how you validated the behavior. Add automated tests
wherever possible, but list manual validation steps taken as well -->
## Validation Steps Performed
- [x] Data migration: Should nota break existing experience when upgrade
- [x] Should be able to configure the background and spotlight opacity 
- [x] Should be able to work with different settings


https://github.com/user-attachments/assets/6f311c03-fa79-41d3-94bb-589d853295f4

---------

Co-authored-by: Niels Laute <niels.laute@live.nl>
This commit is contained in:
Kai Tao
2025-09-26 13:03:00 +08:00
committed by GitHub
parent 08a3ae2dee
commit aef46481d9
21 changed files with 513 additions and 309 deletions

View File

@@ -31,9 +31,6 @@ namespace Microsoft.PowerToys.Settings.UI.Library
[JsonPropertyName("spotlight_color")]
public StringProperty SpotlightColor { get; set; }
[JsonPropertyName("overlay_opacity")]
public IntProperty OverlayOpacity { get; set; }
[JsonPropertyName("spotlight_radius")]
public IntProperty SpotlightRadius { get; set; }
@@ -61,9 +58,8 @@ namespace Microsoft.PowerToys.Settings.UI.Library
IncludeWinKey = new BoolProperty(false);
ActivationShortcut = DefaultActivationShortcut;
DoNotActivateOnGameMode = new BoolProperty(true);
BackgroundColor = new StringProperty("#000000");
SpotlightColor = new StringProperty("#FFFFFF");
OverlayOpacity = new IntProperty(50);
BackgroundColor = new StringProperty("#FF000000"); // ARGB (#AARRGGBB)
SpotlightColor = new StringProperty("#FFFFFFFF");
SpotlightRadius = new IntProperty(100);
AnimationDurationMs = new IntProperty(500);
SpotlightInitialZoom = new IntProperty(9);

View File

@@ -1,41 +0,0 @@
<UserControl
x:Class="Microsoft.PowerToys.Settings.UI.Controls.AlphaColorPickerButton"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
d:DesignHeight="300"
d:DesignWidth="400"
mc:Ignorable="d">
<Grid>
<!--TODO(stefan): ToDisplayName is no longer available in ColorHelper
<DropDownButton Padding="4,4,8,4" AutomationProperties.FullDescription="{x:Bind clr:ColorHelper.ToDisplayName(SelectedColor), Mode=OneWay }">
-->
<DropDownButton Padding="4,4,8,4">
<Border
x:Name="ColorPreviewBorder"
Width="48"
Height="24"
BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
BorderThickness="1"
CornerRadius="{ThemeResource ControlCornerRadius}">
<Border.Background>
<SolidColorBrush Color="{x:Bind SelectedColor, Mode=OneWay}" />
</Border.Background>
</Border>
<DropDownButton.Flyout>
<Flyout ShouldConstrainToRootBounds="False">
<ColorPicker
IsAlphaEnabled="True"
IsAlphaSliderVisible="True"
IsAlphaTextInputVisible="True"
IsColorChannelTextInputVisible="True"
IsColorSliderVisible="True"
IsHexInputVisible="True"
Color="{x:Bind SelectedColor, Mode=TwoWay}" />
</Flyout>
</DropDownButton.Flyout>
</DropDownButton>
</Grid>
</UserControl>

View File

@@ -1,59 +0,0 @@
// 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;
using Windows.UI;
namespace Microsoft.PowerToys.Settings.UI.Controls
{
public sealed partial class AlphaColorPickerButton : UserControl
{
private Color _selectedColor;
public Color SelectedColor
{
get
{
return _selectedColor;
}
set
{
if (_selectedColor != value)
{
_selectedColor = value;
SetValue(SelectedColorProperty, value);
}
}
}
public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color), typeof(AlphaColorPickerButton), new PropertyMetadata(null));
public AlphaColorPickerButton()
{
this.InitializeComponent();
IsEnabledChanged -= AlphaColorPickerButton_IsEnabledChanged;
SetEnabledState();
IsEnabledChanged += AlphaColorPickerButton_IsEnabledChanged;
}
private void AlphaColorPickerButton_IsEnabledChanged(object sender, DependencyPropertyChangedEventArgs e)
{
SetEnabledState();
}
private void SetEnabledState()
{
if (this.IsEnabled)
{
ColorPreviewBorder.Opacity = 1;
}
else
{
ColorPreviewBorder.Opacity = 0.2;
}
}
}
}

View File

@@ -27,9 +27,9 @@
<DropDownButton.Flyout>
<Flyout ShouldConstrainToRootBounds="False">
<ColorPicker
IsAlphaEnabled="False"
IsAlphaSliderVisible="False"
IsAlphaTextInputVisible="False"
IsAlphaEnabled="{x:Bind IsAlphaEnabled, Mode=OneWay}"
IsAlphaSliderVisible="{x:Bind IsAlphaEnabled, Mode=OneWay}"
IsAlphaTextInputVisible="{x:Bind IsAlphaEnabled, Mode=OneWay}"
IsColorChannelTextInputVisible="True"
IsColorSliderVisible="True"
IsHexInputVisible="True"

View File

@@ -2,6 +2,7 @@
// 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;
using Microsoft.UI.Xaml;
using Microsoft.UI.Xaml.Controls;
using Windows.UI;
@@ -29,7 +30,15 @@ namespace Microsoft.PowerToys.Settings.UI.Controls
}
}
public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register("SelectedColor", typeof(Color), typeof(ColorPickerButton), new PropertyMetadata(null));
public static readonly DependencyProperty SelectedColorProperty = DependencyProperty.Register(nameof(SelectedColor), typeof(Color), typeof(ColorPickerButton), new PropertyMetadata(null));
public static readonly DependencyProperty IsAlphaEnabledProperty = DependencyProperty.Register(nameof(IsAlphaEnabled), typeof(bool), typeof(ColorPickerButton), new PropertyMetadata(defaultValue: false));
public bool IsAlphaEnabled
{
get => (bool)GetValue(IsAlphaEnabledProperty);
set => SetValue(IsAlphaEnabledProperty, value);
}
public ColorPickerButton()
{

View File

@@ -117,19 +117,12 @@
IsEnabled="{x:Bind ViewModel.IsFindMyMouseEnabled, Mode=OneWay}"
IsExpanded="False">
<tkcontrols:SettingsExpander.Items>
<tkcontrols:SettingsCard Name="MouseUtilsFindMyMouseOverlayOpacity" x:Uid="MouseUtils_FindMyMouse_OverlayOpacity">
<Slider
MinWidth="{StaticResource SettingActionControlMinWidth}"
AutomationProperties.AutomationId="MouseUtils_FindMyMouseOverlayOpacityId"
Maximum="100"
Minimum="1"
Value="{x:Bind ViewModel.FindMyMouseOverlayOpacity, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<!-- Overlay opacity removed; alpha now encoded in colors -->
<tkcontrols:SettingsCard Name="MouseUtilsFindMyMouseBackgroundColor" x:Uid="MouseUtils_FindMyMouse_BackgroundColor">
<controls:ColorPickerButton AutomationProperties.AutomationId="MouseUtils_FindMyMouseBackgroundColorId" SelectedColor="{x:Bind Path=ViewModel.FindMyMouseBackgroundColor, Mode=TwoWay}" />
<controls:ColorPickerButton IsAlphaEnabled="True" SelectedColor="{x:Bind Path=ViewModel.FindMyMouseBackgroundColor, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard Name="MouseUtilsFindMyMouseSpotlightColor" x:Uid="MouseUtils_FindMyMouse_SpotlightColor">
<controls:ColorPickerButton AutomationProperties.AutomationId="MouseUtils_FindMyMouseSpotlightColorId" SelectedColor="{x:Bind Path=ViewModel.FindMyMouseSpotlightColor, Mode=TwoWay}" />
<controls:ColorPickerButton IsAlphaEnabled="True" SelectedColor="{x:Bind Path=ViewModel.FindMyMouseSpotlightColor, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard Name="MouseUtilsFindMyMouseSpotlightRadius" x:Uid="MouseUtils_FindMyMouse_SpotlightRadius">
<NumberBox
@@ -230,13 +223,13 @@
IsEnabled="{x:Bind ViewModel.IsMouseHighlighterEnabled, Mode=OneWay}">
<tkcontrols:SettingsExpander.Items>
<tkcontrols:SettingsCard x:Uid="MouseUtils_MouseHighlighter_PrimaryButtonClickColor" IsEnabled="{x:Bind ViewModel.IsSpotlightModeEnabled, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}">
<controls:AlphaColorPickerButton SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterLeftButtonClickColor, Mode=TwoWay}" />
<controls:ColorPickerButton IsAlphaEnabled="True" SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterLeftButtonClickColor, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard x:Uid="MouseUtils_MouseHighlighter_SecondaryButtonClickColor" IsEnabled="{x:Bind ViewModel.IsSpotlightModeEnabled, Mode=OneWay, Converter={StaticResource BoolNegationConverter}}">
<controls:AlphaColorPickerButton SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterRightButtonClickColor, Mode=TwoWay}" />
<controls:ColorPickerButton IsAlphaEnabled="True" SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterRightButtonClickColor, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard Name="MouseUtilsMouseHighlighterAlwaysColor" x:Uid="MouseUtils_MouseHighlighter_AlwaysColor">
<controls:AlphaColorPickerButton SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterAlwaysColor, Mode=TwoWay}" />
<controls:ColorPickerButton IsAlphaEnabled="True" SelectedColor="{x:Bind Path=ViewModel.MouseHighlighterAlwaysColor, Mode=TwoWay}" />
</tkcontrols:SettingsCard>
<tkcontrols:SettingsCard x:Uid="HighlightMode">
<ComboBox

View File

@@ -55,7 +55,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
string spotlightColor = FindMyMouseSettingsConfig.Properties.SpotlightColor.Value;
_findMyMouseSpotlightColor = !string.IsNullOrEmpty(spotlightColor) ? spotlightColor : "#FFFFFF";
_findMyMouseOverlayOpacity = FindMyMouseSettingsConfig.Properties.OverlayOpacity.Value;
_findMyMouseSpotlightRadius = FindMyMouseSettingsConfig.Properties.SpotlightRadius.Value;
_findMyMouseAnimationDurationMs = FindMyMouseSettingsConfig.Properties.AnimationDurationMs.Value;
_findMyMouseSpotlightInitialZoom = FindMyMouseSettingsConfig.Properties.SpotlightInitialZoom.Value;
@@ -279,7 +278,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
set
{
value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#000000";
value = (value != null) ? SettingsUtilities.ToARGBHex(value) : "#FF000000";
if (!value.Equals(_findMyMouseBackgroundColor, StringComparison.OrdinalIgnoreCase))
{
_findMyMouseBackgroundColor = value;
@@ -298,7 +297,7 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
set
{
value = (value != null) ? SettingsUtilities.ToRGBHex(value) : "#FFFFFF";
value = (value != null) ? SettingsUtilities.ToARGBHex(value) : "#FFFFFFFF";
if (!value.Equals(_findMyMouseSpotlightColor, StringComparison.OrdinalIgnoreCase))
{
_findMyMouseSpotlightColor = value;
@@ -308,24 +307,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
}
}
public int FindMyMouseOverlayOpacity
{
get
{
return _findMyMouseOverlayOpacity;
}
set
{
if (value != _findMyMouseOverlayOpacity)
{
_findMyMouseOverlayOpacity = value;
FindMyMouseSettingsConfig.Properties.OverlayOpacity.Value = value;
NotifyFindMyMousePropertyChanged();
}
}
}
public int FindMyMouseSpotlightRadius
{
get
@@ -978,7 +959,6 @@ namespace Microsoft.PowerToys.Settings.UI.ViewModels
private bool _findMyMouseDoNotActivateOnGameMode;
private string _findMyMouseBackgroundColor;
private string _findMyMouseSpotlightColor;
private int _findMyMouseOverlayOpacity;
private int _findMyMouseSpotlightRadius;
private int _findMyMouseAnimationDurationMs;
private int _findMyMouseSpotlightInitialZoom;