tags:

views:

225

answers:

2
<!-- Base color -->
    <Ellipse Width="24" Height="24" Margin="10">
        <Ellipse.Fill>
            <RadialGradientBrush GradientOrigin=".5,.8" RadiusX="0.6">
                <GradientStop Color="#002255" Offset="1" />
                <GradientStop Color="#00eeff" Offset="0" />
            </RadialGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
    <!-- Highligh color-->
    <Ellipse Width="18" Height="15" Canvas.Top="1" Canvas.Left="3" Margin="10">
        <Ellipse.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                <GradientStop Color="#ffffff" Offset="0" />
                <GradientStop Color="Transparent" Offset="1" />
            </LinearGradientBrush>
        </Ellipse.Fill>
    </Ellipse>
+4  A: 

I'll give you an example.

This:

<Rectangle Width="200" Height="100">
  <Rectangle.Fill>
 <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
   <GradientStop Color="Yellow" Offset="0.0" />
   <GradientStop Color="Red" Offset="0.25" />
   <GradientStop Color="Blue" Offset="0.75" />
   <GradientStop Color="LimeGreen" Offset="1.0" />
 </LinearGradientBrush>
  </Rectangle.Fill>
</Rectangle>

is equivalent to this:

Rectangle rectangle = new Rectangle();
rectangle.Width = 200;
rectangle.Height = 100;

// Create a diagonal linear gradient with four stops.   
LinearGradientBrush brush = new LinearGradientBrush();
brush.StartPoint = new Point(0,0);
brush.EndPoint = new Point(1,1);
brush.GradientStops.Add(new GradientStop(Colors.Yellow, 0.0));
brush.GradientStops.Add(new GradientStop(Colors.Red, 0.25));                
brush.GradientStops.Add(new GradientStop(Colors.Blue, 0.75));        
brush.GradientStops.Add(new GradientStop(Colors.LimeGreen, 1.0));

// Use the brush to paint the rectangle.
rectangle.Fill = brush;

http://msdn.microsoft.com/en-us/library/system.windows.media.lineargradientbrush.aspx

Robert Harvey
thank you very much for the answer... it is very helpful to me...cheers..
ranganaMIT
+1  A: 

Here is the code for your first Ellipse:

RadialGradientBrush radialGradientBrush =
    new RadialGradientBrush
        {
            GradientOrigin = new Point(.5, .8),
            RadiusX = 0.6
        };

radialGradientBrush.GradientStops.Add(
    new GradientStop
        {
            Color = ((Color) ColorConverter.ConvertFromString("#002255")),
            Offset = 1
        });
radialGradientBrush.GradientStops.Add(
    new GradientStop
        {
            Color = ((Color) ColorConverter.ConvertFromString("#00eeff")),
            Offset = 0
        });

Ellipse firstEllipse =
    new Ellipse {Width = 24, Height = 24, Margin = new Thickness(10), Fill = radialGradientBrush};

You can easily make the second one on the same lines.

EDIT: The attached canvas properties in the second Ellipse might get tricky if you are new, so here is how you set them:

Canvas.SetTop(secondEllipse, 1);
Canvas.SetLeft(secondEllipse, 3);
Yogesh
thank you very much for the answer... it is very helpful to me...cheers...
ranganaMIT