How to create a rectangle with a gradient that reflect outwards in WP8.1 (WinRT)?

Question

I am trying to create a rectangle with a gradient that reflects outside. I want something similar to this (but for a rectangle/grid). I was not able to achieve it using a LinearGradientBrush. Below is what I tried. But that is not at all what I want.

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

Thank you.

Answer 1

It's doable, but tricky. You'll need to do it in Blend because there's a gradient tool that lets you easily rotate a gradient and adjust the gradient stops. You'll need a parent grid with two child grids of equal size. One child will need the gradient to be horizontal, and the other vertical. You will have to adjust the opacity on both grids so the gradient appears to be one. I threw this XAML together in a few minutes, so it's not perfect, but it might help you out....

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