ColorBrightness solution

[sonnemaf]

I'm playing with some experiments for changing the brightness of a Color using a correction factor.

Have a look at the following examples it shows two rows (horizontal StackPanels) of blue rectangles which start dark and light up for the next one. You can find this example on https://github.com/sonnemaf/ColorBrightnessDemoApp

The Xaml looks like this.

<?xml version="1.0" encoding="utf-8" ?>
<Window x:Class="App114.MainWindow"
        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:helpers="using:ReflectionIT.WinUI.Helpers"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        Title="App114"
        mc:Ignorable="d">

    <StackPanel HorizontalAlignment="Center"
                VerticalAlignment="Center"
                Spacing="20">

        <StackPanel Orientation="Horizontal"
                    Spacing="8">
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush helpers:BrushExtensions.ColorCorrectionFactor="-0.4"
                                     Color="{ThemeResource SystemAccentColor}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush helpers:BrushExtensions.ColorCorrectionFactor="-0.2"
                                     Color="{ThemeResource SystemAccentColor}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{ThemeResource SystemAccentColor}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush helpers:BrushExtensions.ColorCorrectionFactor="1.2"
                                     Color="{ThemeResource SystemAccentColor}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush helpers:BrushExtensions.ColorCorrectionFactor="1.4"
                                     Color="{ThemeResource SystemAccentColor}" />
                </Rectangle.Fill>
            </Rectangle>
        </StackPanel>

        <StackPanel Orientation="Horizontal"
                    Spacing="8">
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{helpers:ColorBrightness Color={StaticResource SystemAccentColor},  
                                                                     CorrectionFactor=-0.4}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{helpers:ColorBrightness Color={StaticResource SystemAccentColor}, 
                                                                     CorrectionFactor=-0.2}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{ThemeResource SystemAccentColor}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{helpers:ColorBrightness Color={StaticResource SystemAccentColor}, 
                                                                     CorrectionFactor=1.2}" />
                </Rectangle.Fill>
            </Rectangle>
            <Rectangle Width="40"
                       Height="40">
                <Rectangle.Fill>
                    <SolidColorBrush Color="{helpers:ColorBrightness Color={StaticResource SystemAccentColor}, 
                                                                     CorrectionFactor=1.4}" />
                </Rectangle.Fill>
            </Rectangle>
        </StackPanel>
    </StackPanel>
</Window>

I tried two different solutions.

Attached Property

In the first StackPanel I used an Attachted Property to Darken or Lighten the Color of a SolidColorBrush.

This solution works fine but uses a DispatcherQueue.TryEnqueue hack to postpone the color correction. This is necessary if the CorrectionFactor is set before the Color is set.

private static void OnColorCorrectionFactorChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    if (d is SolidColorBrush source) {
        source.DispatcherQueue.TryEnqueue(() => {
            if (e.NewValue is double value) {
                source.Color = value > 1 ? source.Color.Lighten((float)value) : source.Color.Darken(-(float)value);
            }
        });
    }
}

This solution is specific for the SolidColorBrush. A GradientBrush would need one too.

Markup extension

The second one is using a Markup Extension to Darken or Lighten a Color. Can be any Color. Also usable in a GradientBrush.

This solution has the limitation that it doesn't work with ThemeResources. It will just crash the app. See example below.

<Rectangle Width="40"
           Height="40">
    <Rectangle.Fill>
        <SolidColorBrush Color="{helpers:ColorBrightness Color={ThemeResource SystemAccentColor}, 
                                                         CorrectionFactor=-0.4}" />
    </Rectangle.Fill>
</Rectangle>

Questions

• Would this be a useful feature for the toolkit?
• What implementation should we go for? One of these or are there better alternatives?

Remark

To get this working I created a ColorHelper class with a Darken and Lighten extension methods on Color. Couldn't find the ColorHelper from the toolkit. Is it gone?

[niels9001]

I love this feature, especially if it works with ThemeResources: it can take a lot of time to manually colorpick similiar colors that are a bit lighter/darker and set those manually. With this solution you could just do that by adding a property!

I'll let @michael-hawker chime in on the best architecture

[AndrewKeepCoding]

I'd be great if this feature also worked with theme resources.
A while ago, I wanted to improve the color change on pointer events (pointer over, pressed, etc...) for some buttons.
At the beginning, I tried to create something for general controls, but visual states and theme resources made it extremely difficult (for me), and I ended up creating an extension just Buttons.

Buttons with the extension on the right side

Recording.2024-12-10.085913.mp4

<Button
    toolkit:ButtonExtensions.PointerOverBackgroundLightnessFactor="1.2"
    toolkit:ButtonExtensions.PressedBackgroundLightnessFactor="0.8"
    Background="Red"
    Content="Click" />
<Button
    toolkit:ButtonExtensions.PointerOverBackgroundLightnessFactor="1.2"
    toolkit:ButtonExtensions.PressedBackgroundLightnessFactor="0.8"
    Background="Green"
    Content="Click" />
<Button
    toolkit:ButtonExtensions.PointerOverBackgroundLightnessFactor="1.2"
    toolkit:ButtonExtensions.PressedBackgroundLightnessFactor="0.8"
    Background="Blue"
    Content="Click" />

[AndrewKeepCoding]

Now that "GeneratedAttachedProperty" is (might be) coming, we might be able to use it to generate attached properties for given theme resources.🤔

[michael-hawker]

For that type of scenario (somewhere) I had written a behavior for hooking into other controls VisualStateManagers...

It was just pretty verbose in terms of syntax, which folks didn't seem to like:

 <Button>
  <i:Interaction.Behaviors>
    <local:VisualStateTriggerBehavior>
      <local:VisualStateTriggerBehaviorStateTrigger GroupName="CommonStates" StateName="PointerOver">
        <VisualStateTriggerBehaviorStateTrigger.ToActions>
          <bani:StartAnimationAction Animation="{x:Bind FadeIn}"/>
        </local:VisualStateTriggerBehaviorStateTrigger.ToActions>
        <local:VisualStateTriggerBehaviorStateTrigger.FromActions>
          <bani:StartAnimationAction Animation="{x:Bind FadeOut}"/>
        </local:VisualStateTriggerBehaviorStateTrigger.FromActions>
      </local:VisualStateTriggerBehaviorStateTrigger>
    </local:VisualStateTriggerBehavior>
  </i:Interaction.Behaviors>
 </Button>
 <Polygon Fill="White" Points="0,30 30,60 30,0" VerticalAlignment="Center" Opacity="0" 
          ext:VisualExtensions.NormalizedCenterPoint="0.5">
   <ani:Explicit.Animations>
     <ani:AnimationSet x:Name="FadeIn">
       <ani:OpacityAnimation From="0" To="1"/>
     </ani:AnimationSet>
     <ani:AnimationSet x:Name="FadeOut">
       <ani:OpacityAnimation To="0"/>
     </ani:AnimationSet>
   </ani:Explicit.Animations>
  </Polygon>

The problem is trying to reduce the need to search/hook the VSM multiple times, if you only needed one hook, you could condense it:

    <local:VisualStateTriggerBehavior GroupName="CommonStates" StateName="PointerOver">
      <local:VisualStateTriggerBehavior.ToActions>
        <bani:StartAnimationAction Animation="{x:Bind FadeIn}"/>
      </local:VisualStateTriggerBehavior.ToActions>
      <local:VisualStateTriggerBehavior.FromActions>
        <bani:StartAnimationAction Animation="{x:Bind FadeOut}"/>
      </local:VisualStateTriggerBehavior.FromActions>
    </local:VisualStateTriggerBehavior>

Maybe I could think of a better solution these days, I'd have to go dig-up my code from somewhere... this was a personal thing I was tinkering with at the time. I also had the question of whether or not to hook into the completed events. It'd be nice if XAML could just let you do like <.ToActions> to represent a tree on the parent object as that's 90% of the time what you're doing, though don't think that's valid XML syntax anymore...

Link to discord messages

[AndrewKeepCoding]

Hooking into the visual state changed event? that seems to be useful in some cases.🙂

[michael-hawker]

I just wanted to find myself doing the MarkupExtension pass a resource for something else too... We should definitely create a small repro of that and follow-up on the WinUI repo.

[sonnemaf]

It is a pity that so many classes are sealed. Deriving from the SolidColorBrush would be so wonderful.

@michael-hawker How can I help to create that small repo?

[michael-hawker]

Oh, that'd be amazing. I haven't updated it to latest, but I have this template which would be appropriate for this as it could be good to know if it works on UWP or not (I discovered something else related to MarkupExtension which seems to have regressed from UWP times as well (using for IValueConverter)).

Basically just create a file new project with that. Implement a basic MarkupExtension that expects a brush as a property, and then show binding to that in the MainPage as you try to do above that fails where we'd expect it to accept the ThemeResource for the MarkupExtension property value.