Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Relative Transform to Brushes #8031

Closed
amwx opened this issue Apr 22, 2022 · 0 comments · Fixed by #8036
Closed

Add Relative Transform to Brushes #8031

amwx opened this issue Apr 22, 2022 · 0 comments · Fixed by #8036

Comments

@amwx
Copy link
Contributor

amwx commented Apr 22, 2022

Is your feature request related to a problem? Please describe.
Adding on to #6344, that solution works in absolute coordinates and isn't very extensible unless you know the exact size of the visual the brush is applied to (if you're trying to achieve a specific effect). WPF & UWP/WinUI split up transforms on brushes into Transform and RelativeTransform to solve this, Transform is equivalent to what's implemented in #6344, RelativeTransform allows applying transforms in (as the name implies) relative coordinates

In both cases, as an separate point, we also need the ability to set the transform origin (for both cases) as using a TranslateTransform is not extensible nor the same thing. WinUI/WPF have the CenterX and CenterY properties on the different Transform types, Avalonia does not.

See the following brush from WinUI:

 <LinearGradientBrush x:Key="TextControlElevationBorderFocusedBrush" MappingMode="Absolute" StartPoint="0,0" EndPoint="0,2">
    <LinearGradientBrush.RelativeTransform>
        <ScaleTransform ScaleY="-1" CenterY="0.5"/>
    </LinearGradientBrush.RelativeTransform>
    <LinearGradientBrush.GradientStops>
        <GradientStop Offset="1.0" Color="{ThemeResource SystemAccentColorLight2}"/>
        <GradientStop Offset="1.0" Color="{StaticResource ControlStrokeColorDefault}"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

In Avalonia:

<LinearGradientBrush StartPoint="0,0" EndPoint="0,2">
    <LinearGradientBrush.Transform>
        <ScaleTransform ScaleY="-1" />
    </LinearGradientBrush.Transform>
    <LinearGradientBrush.GradientStops>
        <GradientStop Offset="1.0" Color="{DynamicResource SystemAccentColorDark1}"/>
        <GradientStop Offset="1.0" Color="{DynamicResource ControlStrokeColorDefault}"/>
    </LinearGradientBrush.GradientStops>
</LinearGradientBrush>

Which produces the following:
image

The transform is applying at (0,0) of the visual the brush is applied on, which essentially flips the gradient in place and is leading to the incorrect behavior.

A simple solution, if not wanting to adopt the WPF/WinUI API, might be to follow existing RenderTransform/RenderTransformOrigin and add a GradientTransformOrigin property that is a RelativePoint and automatically determine relative vs. absolute.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant