在UWP XAML中获取径向渐变

时间:2018-09-11 05:16:27

标签: xaml uwp

UWP XAML中的“线性渐变”效果很好,但是我需要将其转换为“径向渐变”笔刷。

这是我当前的UWP XAML代码

<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>

1 个答案:

答案 0 :(得分:4)

默认情况下,不包含

RadialGradientBrush作为UWP API。您需要添加对Windows Community Toolkit UI - Microsoft.Toolkit.Uwp.UI的引用,其中包含RadialGradientBrush,您可以按预期使用它,与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>

由于画笔位于库中,因此您必须将以下名称空间声明添加到Page元素中:

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