如何在WP8.1(WinRT)中创建一个具有向外反射的渐变的矩形?

时间:2016-03-16 14:18:08

标签: xaml windows-runtime windows-phone-8.1 winrt-xaml expression-blend

我正在尝试创建一个带有反射外部的渐变的矩形。我想要类似于this的东西(但是对于矩形/网格)。我无法使用LinearGradientBrush实现它。以下是我的尝试。但这根本不是我想要的。

<Border Grid.Row="1" Grid.ColumnSpan="2">
  <Border.Background>
     <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="Black" Offset="0" />
        <GradientStop Color="White" Offset="1" />
     </LinearGradientBrush>
  </Border.Background>

谢谢。

1 个答案:

答案 0 :(得分:1)

它可行,但很棘手。您需要在Blend中执行此操作,因为有一个渐变工具可让您轻松旋转渐变并调整渐变停止。您需要一个父网格,其中包含两个大小相等的子网格。一个孩子需要水平梯度,另一个垂直。您必须调整两个网格上的不透明度,以使渐变看起来是一个。我在几分钟内将这个XAML扔在一起,所以它并不完美,但它可能会帮助你....

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid Height="200">
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.51,1.024"
                                 StartPoint="0.507,0.052">
                <GradientStop Color="White"
                              Offset="1" />
                <GradientStop Color="#FFF7F7F7"
                              Offset="0.098" />
                <GradientStop Color="Black"
                              Offset="0.5" />
                <GradientStop Color="#FFC3C3C3"
                              Offset="0.211" />
                <GradientStop Color="White"
                              Offset="0.829" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
    <Grid Height="200"
          Margin="0,220">
        <Grid.Background>
            <LinearGradientBrush EndPoint="1.001,0.588"
                                 StartPoint="-0.001,0.596">
                <GradientStop Color="White"
                              Offset="1" />
                <GradientStop Color="#FFF7F7F7" />
                <GradientStop Color="#7F000000"
                              Offset="0.498" />
            </LinearGradientBrush>
        </Grid.Background>
    </Grid>
</Grid>