ARTICLE

Shape Drawings in Silverlight

Posted by Manish Tewatia in Articles | Silverlight using VB.NET on October 18, 2010

Tags: Shape, Drawings, Silverlight, Shape in Silverlight, Drawings in Silverlight, Shape Drawings in Silverlight

In this article you will learn about the Shape Drawings in Silverlight.

Tweet
1547
0

Reader Level: Beginner

HTML clipboard

Shape object is an object through which you can draw different shapes, basically shape is a type of UIElement which helps you to draw different shapes to the screen and due to the reason this is an UIElement it used inside the panel element and most controls.

One of the main capabilities of Silverlight is to make user interfaces for web sites. Silverlight's scope is not to replace HTML-based web sites, but instead to augment HTML. You should think of Silverlight as something that enables you to create content inside a web page, not something you would use to create replacement content for your existing web pages.

Silverlight provides a number of ready-to-use Shape objects. All shape objects inherit from the Shape class. Available shape objects include Ellipse, Line, Path, Polygon, Polyline, and Rectangle.

Example of an Shape draw:

<UserControl
   xmlns='http://schemas.microsoft.com/winfx/2006/xaml/presentation'
   xmlns:x='http://schemas.microsoft.com/winfx/2006/xaml'
   xmlns:d='http://schemas.microsoft.com/expression/blend/2008'
   xmlns:mc='http://schemas.openxmlformats.org/markup-compatibility/2006'
   xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" x:Class='SilverlightApplication3.MainPage'
   mc:Ignorable='d'
   d:DesignWidth='640'
   d:DesignHeight='480'>
    <Canvas>
    <Rectangle Fill="LightGray"
          Stroke="Black"
          StrokeThickness="1"
          Height="350" Width="350" Canvas.Left="-1" Canvas.Top="-1" />
        <Ellipse Fill="Blue"
        Stroke="Black"
        StrokeThickness=".1"
        Height="300" Width="300" Canvas.Left="10" />
        <Ellipse Fill="Black"
        Stroke="Black"
        StrokeThickness="5"
        Height="50" Width="50" Canvas.Left="72" Canvas.Top="79" />
        <Ellipse Fill="Black"
        Stroke="Black"
        StrokeThickness="5"
        Height="50" Width="50" Canvas.Left="212" Canvas.Top="79" />
       <ed:Arc ArcThickness="3" ArcThicknessUnit="Pixel" EndAngle="90" Fill="#FFF4F4F5" Height="122" Canvas.Left="28.059" Stretch="None" Stroke="Black"
            StartAngle="0" Canvas.Top="140.029" UseLayoutRounding="False" Width="281.804" RenderTransformOrigin="0.679,0.465">
              <ed:Arc.RenderTransform>
                     <CompositeTransform SkewY="-11.394" TranslateY="32.055" SkewX="54.337" ScaleY="0.779" TranslateX="-49.797" Rotation="-4.796"/>
              </ed:Arc.RenderTransform>
       </ed:Arc>
       <TextBlock Height="36" Canvas.Left="126" TextWrapping="Wrap" Text="SAD" Canvas.Top="299" Width="99" FontSize="48" FontWeight="Bold" FontStyle="Italic"
            FontFamily="Buxton Sketch"/>
            </Canvas>
</UserControl>

Output Window