<!-- RadialGradientBrushExample.xaml 
     This example shows radial gradients with different gradient origin
     and center settings. -->
<Page 
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Title="Radial Gradients">

  <Grid Margin="10">
    <Grid.ColumnDefinitions>
      <ColumnDefinition  />
      <ColumnDefinition  />
      <ColumnDefinition  />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="20" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
      <RowDefinition Height="*" />
      <RowDefinition Height="Auto" />
    </Grid.RowDefinitions>

    <Border Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" 
      Background="{StaticResource blueHorizontalGradientBrush}">
      <TextBlock Style="{StaticResource MyIntroTextBlockStyle}">
        The following examples show radial gradients with different gradient origin and center settings.
        The gradient origin of each radial gradient is marked with a red dot, and the gradient circle
        is outlined with a red circle.
      </TextBlock>
    </Border>

    <TextBlock Grid.Row="2" Grid.Column="0" Margin="0,0,10,0">
      <Bold>GradientOrigin</Bold>: 0.5,0.5<LineBreak/>
      <Bold>Center</Bold>: 0.5,0.5<LineBreak/>
      <Bold>RadiusX</Bold>: 0.5<LineBreak/>
      <Bold>RadiusY</Bold>: 0.5
    </TextBlock>
    <Canvas Grid.Row="3" Grid.Column="0" Width="150" Height="150">
      <Rectangle Width="150" Height="150">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="White" Offset="0.0" />
            <GradientStop Color="#545454" Offset="1.0" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient origin and the gradient circle -->
      <Path Fill="Red">
        <Path.Data>
          <EllipseGeometry Center="75,75" RadiusX="2" RadiusY="2" />
        </Path.Data>
      </Path>
      <Path Stroke="Red" StrokeThickness="2">
        <Path.Data>
          <EllipseGeometry Center="75,75" RadiusX="74" RadiusY="74" />
        </Path.Data>
      </Path>
    </Canvas>

    <TextBlock Grid.Row="2" Grid.Column="1" Margin="0,0,10,0">
      <Bold>GradientOrigin</Bold>: 0.75,0.25<LineBreak/>
      <Bold>Center</Bold>: 0.5,0.5<LineBreak/>
      <Bold>RadiusX</Bold>: 0.5<LineBreak/>
      <Bold>RadiusY</Bold>: 0.5
    </TextBlock>
    <Canvas Grid.Row="3" Grid.Column="1" Width="150" Height="150">
      <Rectangle Width="150" Height="150">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.75,0.25" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#545454" Offset="1" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient origin and the gradient circle -->
      <Path Fill="Red">
        <Path.Data>
          <EllipseGeometry Center="112.5,37.5" RadiusX="2" RadiusY="2" />
        </Path.Data>
      </Path>
      <Path Stroke="Red" StrokeThickness="2">
        <Path.Data>
          <EllipseGeometry Center="75,75" RadiusX="74" RadiusY="74" />
        </Path.Data>
      </Path>
    </Canvas>

    <TextBlock Grid.Row="2" Grid.Column="2" >
      <Bold>GradientOrigin</Bold>: 0.5,0.5<LineBreak/>
      <Bold>Center</Bold>: 0.1,0.1<LineBreak/>
      <Bold>RadiusX</Bold>: 0.75<LineBreak/>
      <Bold>RadiusY</Bold>: 0.75
    </TextBlock>
    <Canvas ClipToBounds="True" Grid.Row="3" Grid.Column="2" Width="150" Height="150">
      <Rectangle Width="150" Height="150">
        <Rectangle.Fill>
          <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.1,0.1" RadiusX="0.75" RadiusY="0.75">
            <GradientStop Color="White" Offset="0" />
            <GradientStop Color="#545454" Offset="1" />
          </RadialGradientBrush>
        </Rectangle.Fill>
      </Rectangle>

      <!-- Highlights the gradient origin and the gradient circle -->
      <Path Fill="Red">
        <Path.Data>
          <EllipseGeometry Center="75,75" RadiusX="2" RadiusY="2" />
        </Path.Data>
      </Path>
      <Path Stroke="Red" StrokeThickness="2">
        <Path.Data>
          <EllipseGeometry Center="15,15" RadiusX="111.5" RadiusY="111.5" />
        </Path.Data>
      </Path>
    </Canvas>

    <Rectangle Style="{StaticResource footerRectangleStyle}" 
       Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="3"
       Fill="{StaticResource blueHorizontalGradientBrush}"/>
  </Grid>
</Page>
