Creating a Glass Orb in Silverlight
There are several great tutorials around that discuss how to style buttons with a glassy orb effect in Silverlight. In fact, you can find a great article to do this here : http://geekswithblogs.net/tkokke/archive/2009/03/17/a-glass-orb-button-in-silverlight.aspx.
I recently was asked how to take the same effect without the need for a button, thus allowing you to put arbitrary glass orbs on your Silverlight application. Borrowing from the example above, I created a user control that creates the same effect using a view ellipses.
The XAML for the user control ended up looking like this:
<Grid Cursor=”Hand” x:Name=”grid” RenderTransformOrigin=”0.5,0.5″>
<Grid.ColumnDefinitions>
<ColumnDefinition Width=”0.15*”/>
<ColumnDefinition Width=”0.7*”/>
<ColumnDefinition Width=”0.15*”/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height=”0.05*”/>
<RowDefinition Height=”0.4*”/>
<RowDefinition Height=”0.55*”/>
</Grid.RowDefinitions>
<Ellipse x:Name=”mainEllipse” Grid.RowSpan=”3″ Grid.ColumnSpan=”3″/>
<Ellipse x:Name=”shadowEllipse” Grid.RowSpan=”3″ Stroke=”#7F000000″ Grid.ColumnSpan=”3″>
<Ellipse.Fill>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#3FFFFFFF”/>
<GradientStop Color=”#A0000000″ Offset=”1″/>
<GradientStop Color=”#008A8A8A” Offset=”0.518″/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name=”radialEllipse” Grid.RowSpan=”3″ Grid.ColumnSpan=”3″>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color=”#99000000″ Offset=”1″/>
<GradientStop Color=”#66FFFFFF” Offset=”0″/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse HorizontalAlignment=”Stretch” x:Name=”highlightEllipse” VerticalAlignment=”Stretch” Opacity=”1″ Grid.Column=”1″ Grid.Row=”1″>
<Ellipse.Fill>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#BBFFFFFF”/>
<GradientStop Color=”#00FFFFFF” Offset=”1″/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
</Grid>
The final ellipse is actually made of 4 different ellipses.
The first ellipse is the mainEllipse. It?s purpose is to hold the color of the ellipse.
<Ellipse x:Name=”mainEllipse” Grid.RowSpan=”3″ Grid.ColumnSpan=”3″/>
In the codebehind of the user control we added two properties that set these values on this ellipse.
public Brush EllipseColor
{
get { return mainEllipse.Fill; }
set { mainEllipse.Fill = value; }
}
public Brush EllipseBorder
{
get { return mainEllipse.Stroke; }
set { mainEllipse.Stroke = value; }
}
The EllipseColor sets the color fill of the main ellipse. The EllipseBorder sets the color of the border of the ellipse.
Next is the shadowEllipse. This ellipse is draw on the bottom 3rd of the ellipse and hold a radial gradient that is a transparent black.
<Ellipse x:Name=”shadowEllipse” Grid.RowSpan=”3″ Stroke=”#7F000000″ Grid.ColumnSpan=”3″>
<Ellipse.Fill>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#3FFFFFFF”/>
<GradientStop Color=”#A0000000″ Offset=”1″/>
<GradientStop Color=”#008A8A8A” Offset=”0.518″/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
The next ellipse is the radialEllipse that overlaps our main ellipse and provides a radial gradient that gives the ellipse some depth.
<Ellipse x:Name=”radialEllipse” Grid.RowSpan=”3″ Grid.ColumnSpan=”3″>
<Ellipse.Fill>
<RadialGradientBrush>
<GradientStop Color=”#99000000″ Offset=”1″/>
<GradientStop Color=”#66FFFFFF” Offset=”0″/>
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
The last ellipse is the highlightEllipse that is drawn on the top 3rd of the ellipse to give a nice highlight to the final ellipse.
<Ellipse HorizontalAlignment=”Stretch” x:Name=”highlightEllipse” VerticalAlignment=”Stretch” Opacity=”1″ Grid.Column=”1″ Grid.Row=”1″>
<Ellipse.Fill>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#BBFFFFFF”/>
<GradientStop Color=”#00FFFFFF” Offset=”1″/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
Calling the new user control from XAML is rather straight forward. You will notice that we set the size (width and height) of the ellipse as well as our two properties we defined.
<local:GlassyEllipse EllipseColor=”Red” Width=”200″ Height=”100″ Margin=”20″ EllipseBorder=”Green”/>
The source code to the demo project is available below.