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.

Sign up for GitHub

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

RadialGradientBrush API review #67

Open
wants to merge 12 commits into
base: master
Choose a base branch
from
Open

RadialGradientBrush API review #67

Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
12fb244
radial gradient API review PR
jesbis Feb 13, 2020
8e8aed5
Background updates (#68)
MikeHillberg Feb 15, 2020
5cd65b0
Make RadialGradientBrush updates to the correct file
MikeHillberg Feb 15, 2020
641a39b
Update GradientOriginOffset to GradientOrigin
MikeHillberg Mar 30, 2020
f3bed50
Updates for mapping mode, WPF comparison
MikeHillberg Apr 1, 2020
e2ee88d
Update GradientOrigin API note
MikeHillberg Apr 1, 2020
aa25347
IDL: Renamed EllipseCenter to Center and broke up EllipseRadius into …
SavoySchuler Apr 27, 2020
f503159
Replaced EllipseCenter to Center throughout spec.
SavoySchuler Apr 27, 2020
cc30b6f
Broke up EllipseRadius into RadiusX and RadiusY throughout spec.
SavoySchuler Apr 27, 2020
96c5d09
Brush's rendered bounds -> element bounds
SavoySchuler Apr 28, 2020
7b5c3c1
Fix radius type
MikeHillberg Dec 17, 2020
a8fe70c
Formatting
MikeHillberg Dec 17, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 9 additions & 7 deletions api_review/RadialGradientBrush/RadialGradientBrush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ XAML
</Page>
```

This example creates a radial gradient that uses Absolute mapping mode with custom values for `Center`, `EllipseRadius` and `GradientOrigin`:
This example creates a radial gradient that uses Absolute mapping mode with custom values for `Center`, `RadiusX`, `RadiusY` and `GradientOrigin`:

![A rectangle filled with an offset radial gradient.](images/OffsetRadialGradientBrush.png)

Expand All @@ -94,7 +94,8 @@ This example creates a radial gradient that uses Absolute mapping mode with cust
<media:RadialGradientBrush
MappingMode="Absolute"
Center="50,50"
EllipseRadius="100,100"
RadiusX="100"
RadiusY="100"
GradientOrigin="100,50"
>
<GradientStop Color="Yellow" Offset="0.0" />
Expand All @@ -110,15 +111,15 @@ This example creates a radial gradient that uses Absolute mapping mode with cust

## Gradient layout

The gradient is drawn within an ellipse that is defined by the `Center` and `EllipseRadius` properties. Colors for the gradient start at the center of the ellipse and end at the radius.
The gradient is drawn within an ellipse that is defined by the `Center`, `RadiusX`, and `RadiusY` properties. Colors for the gradient start at the center of the ellipse and end at the radius.

The colors for the radial gradient are defined by color stops added to the `GradientStops` collection property. Each gradient stop specifies a color and an offset along the gradient.

The gradient origin defaults to center and can be offset using the `GradientOrigin` property.

`MappingMode` defines whether `Center`, `EllipseRadius` and `GradientOrigin` represent relative or absolute coordinates.
`MappingMode` defines whether `Center`, `RadiusX`, `RadiusY`, and `GradientOrigin` represent relative or absolute coordinates.

When `MappingMode` is set to `RelativeToBoundingBox`, the X and Y values of the three properties are treated as relative to the brush's rendered bounds, where `(0,0)` represents the top left and `(1,1)` represents the bottom right of the brush's rendered bounds for the `Center` and `EllipseRadius` properties and `(0,0)` represents the center for the `GradientOrigin` property.
SavoySchuler marked this conversation as resolved.
Show resolved Hide resolved
When `MappingMode` is set to `RelativeToBoundingBox`, the X and Y values of the three properties are treated as relative to the brush's rendered bounds, where `(0,0)` represents the top left and `(1,1)` represents the bottom right of the brush's rendered bounds for the `Center`, `RadiusX`, and `RadiusY` properties and `(0,0)` represents the center for the `GradientOrigin` property.

When `MappingMode` is set to `Absolute`, the X and Y values of the three properties are treated as absolute coordinates within the brush's rendered bounds.

Expand All @@ -139,11 +140,12 @@ Gradient rendering is supported on Windows 10 version 1903 (v10.0.18362.0) and h
| | |
| - | - |
| Center | The center of the ellipse that contains the gradient. The default is `(0.5, 0.5)`. |
| EllipseRadius | The radius of the ellipse that contains the gradient. The default is `(0.5, 0.5)`. |
| RadiusX | The X axis radius of the ellipse that contains the gradient. The default is `0.5`. |
| RadiusY | The Y axis radius of the ellipse that contains the gradient. The default is `0.5`. |
| GradientOrigin | The gradient's origin (relative to the top left corner). The default is `(0.5, 0,5)`.|
| GradientStops | A collection of [GradientStop](https://docs.microsoft.com/uwp/api/windows.ui.xaml.media.gradientstop) objects that define the gradient. |
| InterpolationSpace | The color space used to interpolate the gradient's colors. The default is `Auto`. For supported values, see [CompositionRadialGradientBrush.InterpolationSpace](https://docs.microsoft.com/uwp/api/windows.ui.composition.compositiongradientbrush.interpolationspace#Windows_UI_Composition_CompositionGradientBrush_InterpolationSpace) |
| MappingMode | Defines whether `Center`, `EllipseRadius` and `GradientOrigin` represent relative coordinates in the range 0 to 1 or absolute coordinates. The default is `RelativeToBoundingBox`. |
| MappingMode | Defines whether `Center`, `RadiusX`, `RadiusY`, and `GradientOrigin` represent relative coordinates in the range 0 to 1 or absolute coordinates. The default is `RelativeToBoundingBox`. |
| SpreadMethod | Gets or sets the type of spread method that specifies how to draw a gradient that starts or ends inside the bounds of the object to be painted. The default is `Pad`. |

# API Details
Expand Down