microsoft / microsoft/microsoft-ui-xaml

Rounded corner Border with animatable gradient properties?

Open
#10,166 7 comments 0 reactions 0 assignees View on GitHub
needs-triage
Dominant language
C++
Stars
8.4k
Forks
942
Avg merge
2d 7h
Merged PRs (30d)
105

Description

I've been stuck on trying to solve this for a while. It seems like a simple problem that has a simple solution, but I'm not sure it does yet.

I'm attempting to apply an animatable gradient to a Border or border-like composition.

The closest I was able to get was applying `Microsoft.UI.Xaml.Media.RadialGradientBrush` to `Border.BorderBrush` but it doesn't seem like the gradient properties or gradient-stop properties can be animated. It seems only the entire gradient can be transformed. Is this correct?

I can achieve what I want using a PNG file to represent the border and use composition to apply `Microsoft.UI.Composition.CompositionRadialGradientBrush` using a `CompositionMaskBrush`. However, this doesn't really seem scalable.

I was able to get close using a `NineGridBrush` with `IsCenterHollow` set to `true` but I don't see a way to round the inner corners.

**Problems I've run into:**
1. Composition doesn't seem to allow "inner" geometry clipping.
2. `Microsoft.UI.Xaml.Media.RadialGradientBrush` properties can't be animated?

**Possible solutions:**
1. Something easy I'm missing?
2. Using `CompositionPathGeometry` to create rounded border, feed into `CreateSpriteShape` and use `CompositionRadialGradientBrush`
3. Layering visuals and adjusting `CompositionMode`
4. Using `RedirectVisual` of an underlying Border element and somehow use a `CompositionMaskBrush` to apply the gradient.

Hope this isn't too much of an edge case 😉

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the rounded-border scenario with RadialGradientBrush and the listed Composition approaches. Compare whether gradient or gradient-stop properties can be animated and whether rounded inner clipping is possible. The issue identifies no file or test, so the scope and completion criteria need clarification before implementation.

Written by the indexing model from the issue text.

Assessment

Tech stack
cpp
Domain
desktop, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.