CODEWITHSUNDEEP
xamluwp
Arun NA
Arun NA

Reputation: 41

Get Radial Gradient in UWP XAML

Linear Gradient in UWP XAML works fine but I need to convert it to Radial Gradient brush.

Here is my current UWP XAML code

<Page
    x:Class="button_radious.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:button_radious"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid>
      <Grid.Background>
        <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
            <GradientStop Color="#000000" Offset="0.30"/>
            <GradientStop Color="green" Offset="0.65"/>
            <GradientStop Color="White" Offset="0.90"/>
        </LinearGradientBrush>
      </Grid.Background>    
    </Grid>
</Page>

Upvotes: 3

Views: 1347

Answers (1)

Martin Zikmund
Martin Zikmund

Reputation: 39102

RadialGradientBrush is not included by default as UWP API. You will need to add reference to the Windows Community Toolkit UI - Microsoft.Toolkit.Uwp.UI which contains RadialGradientBrush which you can use as expected, the same way as in WPF.

<Grid>
  <Grid.Background>
    <media:RadialGradientBrush 
            AlphaMode="Premultiplied"
            RadiusX="0.2" RadiusY="0.2"
            SpreadMethod="Reflect">
        <GradientStop Color="Red" Offset="0" />
        <GradientStop Color="Transparent" Offset="0.25" />
        <GradientStop Color="Yellow" Offset="0.50" />
        <GradientStop Color="Transparent" Offset="0.75" />
        <GradientStop Color="Green" Offset="1.0" />
    </media:RadialGradientBrush>
  </Grid.Fill>
</Grid>

Because the brush resides in the library, you will have to add the following namespace declaration to your Page element:

xmlns:media="Microsoft.Toolkit.Uwp.UI.Media"

Upvotes: 5

Related Questions