MSDN Library / .NET Development / Windows Presentation Foundation / Graphisc and Multimedia / Graphics / Shapes




<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Rectangle Width="200" Height="150" Fill="Black" />
   <Ellipse Width="200" Height="150" Stroke="Orange" />

</Canvas>


(2)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" />

</Canvas>


----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Line X1="10" Y1="10" X2="150" Y2="100" 
         Stroke="Red" StrokeThickness="4" 
         Canvas.Top="25" Canvas.Left="25" />

</Canvas>

----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >


<Polygon
    Points="300,200 400,125 400,275 300,200"
    Stroke="Purple" 
    StrokeThickness="2">
    <Polygon.Fill>
       <SolidColorBrush Color="Blue" Opacity="0.4"/>
    </Polygon.Fill>
</Polygon>

</Canvas>

----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

<Path Stroke="Black" StrokeThickness="1">
  <Path.Data>
    <PathGeometry>
      <PathGeometry.Figures>
        <PathFigureCollection>
          <PathFigure StartPoint="10,100">
            <PathFigure.Segments>
              <PathSegmentCollection>
                <QuadraticBezierSegment Point1="200,200" Point2="300,100" />
              </PathSegmentCollection>
            </PathFigure.Segments>
          </PathFigure>
        </PathFigureCollection>
      </PathGeometry.Figures>
    </PathGeometry>
  </Path.Data>
</Path>


</Canvas>


----------------------------------------------------------------------------------



<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

<Path Stroke="Black" StrokeThickness="1" 
  Data="M 10,100 Q 200,200 300,100" />



</Canvas>

(3)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" >
      <SolidColorBrush Color="DarkBlue" />
   </Rectangle>

</Canvas>



(4)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" >
     <Rectangle.Fill>
        <LinearGradientBrush StartPoint="0,0" EndPoint="1,1" >
           <GradientStop Color="Red" Offset="0" />
           <GradientStop Color="Black" Offset="1" />
        </LinearGradientBrush>
     </Rectangle.Fill>   
   </Rectangle>


</Canvas>


(5)----------------------------------------------------------------------------------

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" >
     <Rectangle.Fill>
        <RadialGradientBrush>
           <GradientStop Color="Red" Offset="0" />
           <GradientStop Color="Black" Offset="1" />
        </RadialGradientBrush>
     </Rectangle.Fill>   
   </Rectangle>


</Canvas>



(6)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Ellipse Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" >
     <Ellipse.Fill>
        <ImageBrush ImageSource="http://localhost/devcare/WPFe/images/Suchitoto.jpg" Stretch="UniformToFill" />
     </Ellipse.Fill>   
   </Ellipse>


</Canvas>


(7)----------------------------------------------------------------------------------



<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <TextBlock Canvas.Top="25" Canvas.Left="25" 
    FontFamily="Courier New" 
    FontSize="24">Hola,<LineBreak/>¿Como te va ahora?</TextBlock>

</Canvas>




(8)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <TextBlock Canvas.Top="25" Canvas.Left="25" 
    FontFamily="Courier New" 
    FontSize="24"
    TextWrapping="Wrap" Width="100">Hola, ¿Como te va ahora?</TextBlock>

</Canvas>


(7)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Image Canvas.Top="25" Canvas.Left="25" 
          Width="150"
          Source="http://localhost/devcare/WPFe/images/Suchitoto.jpg"  />

</Canvas>


(8)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" >
     <Rectangle.RenderTransform>
        <RotateTransform CenterX="25" CenterY="25" Angle="30" />
     </Rectangle.RenderTransform>   
   </Rectangle>


</Canvas>


(9)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="DarkBlue">
     <Rectangle.RenderTransform>
        <RotateTransform CenterX="25" CenterY="25" Angle="15" />
     </Rectangle.RenderTransform>   
   </Rectangle>


</Canvas>



(10)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Canvas.RenderTransform>
        <RotateTransform CenterX="50" CenterY="50" Angle="-30" />
   </Canvas.RenderTransform>

   <Ellipse Width="100" Height="100" Fill="Yellow" />
   <Ellipse Canvas.Top="25" Canvas.Left="25"
            Width="10" Height="10" Fill="DarkBlue" />
   <Ellipse Canvas.Top="25" Canvas.Left="65"
            Width="10" Height="10" Fill="DarkBlue" />
   <Line X1="25" Y1="65"
         X2="75" Y2="65"
         Stroke="DarkRed" />

</Canvas>




(11)----------------------------------------------------------------------------------




<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Canvas.RenderTransform>
        <ScaleTransform CenterX="0" CenterY="0" ScaleX="4" ScaleY="1.5" />
   </Canvas.RenderTransform>

   <Ellipse Width="100" Height="100" Fill="Yellow" />
   <Ellipse Canvas.Top="25" Canvas.Left="25"
            Width="10" Height="10" Fill="DarkBlue" />
   <Ellipse Canvas.Top="25" Canvas.Left="65"
            Width="10" Height="10" Fill="DarkBlue" />
   <Line X1="25" Y1="65"
         X2="75" Y2="65"
         Stroke="DarkRed" />

</Canvas>


(12)----------------------------------------------------------------------------------




<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Canvas.RenderTransform>
        <SkewTransform CenterX="0" CenterY="0" AngleX="30" AngleY="0" />
   </Canvas.RenderTransform>

   <Ellipse Width="100" Height="100" Fill="Yellow" />
   <Ellipse Canvas.Top="25" Canvas.Left="25"
            Width="10" Height="10" Fill="DarkBlue" />
   <Ellipse Canvas.Top="25" Canvas.Left="65"
            Width="10" Height="10" Fill="DarkBlue" />
   <Line X1="25" Y1="65"
         X2="75" Y2="65"
         Stroke="DarkRed" />

</Canvas>



(13)----------------------------------------------------------------------------------




<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Canvas.RenderTransform>
     <TransformGroup>
        <SkewTransform CenterX="0" CenterY="0" AngleX="25" AngleY="0" />
        <ScaleTransform CenterX="0" CenterY="0" ScaleX="2" />
     </TransformGroup>
   </Canvas.RenderTransform>

   <Ellipse Width="100" Height="100" Fill="Yellow" />
   <Ellipse Canvas.Top="25" Canvas.Left="25"
            Width="10" Height="10" Fill="DarkBlue" />
   <Ellipse Canvas.Top="25" Canvas.Left="65"
            Width="10" Height="10" Fill="DarkBlue" />
   <Line X1="25" Y1="65"
         X2="75" Y2="65"
         Stroke="DarkRed" />

</Canvas>


(14)----------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

<MediaElement 
     Width="300"
     Source="C:\Devcare\WPFe\videos\Designing with Xaml.wmv">
   <MediaElement.RenderTransform>
      <SkewTransform CenterX="0" CenterY="0" AngleX="10" AngleY="0" />
   </MediaElement.RenderTransform>
</MediaElement>

</Canvas>


(15)----------------------------------------------------------------------------------


Demo Media


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>
   
</Canvas>




<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black">
   </Canvas>
    <Canvas Canvas.Top="295" Canvas.Left="10" >
       <TextBlock Text="Aprendiendo XAML" FontSize="11" Canvas.Top="1" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="Aprendiendo XAML" FontSize="11" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="13" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="12" />
   </Canvas>

   <Canvas Canvas.Top="295" Canvas.Left="187.5">
       <Ellipse Stroke="Black" StrokeThickness="0.5" Width="25" Height="25" />
   </Canvas>

</Canvas>





<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black">
   </Canvas>
    <Canvas Canvas.Top="295" Canvas.Left="10" >
       <TextBlock Text="Aprendiendo XAML" FontSize="11" Canvas.Top="1" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="Aprendiendo XAML" FontSize="11" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="13" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="12" />
   </Canvas>

   <Canvas Canvas.Top="295" Canvas.Left="187.5">
       <Ellipse Stroke="Black" StrokeThickness="0.5" Width="25" Height="25">
          <Ellipse.Fill>
               <LinearGradientBrush EndPoint="1,1" StartPoint="0,0" >
                   <GradientStop Color="LightBlue" Offset="0" />
                   <GradientStop Color="Gray" Offset="0.5" />
                   <GradientStop Color="Silver" Offset="1" />
               </LinearGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
       <Polygon Fill="DarkGreen" Points="9,5 9,19 18,12" />
   </Canvas>

</Canvas>



<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black">
   </Canvas>
    <Canvas Canvas.Top="295" Canvas.Left="10" >
       <TextBlock Text="Aprendiendo XAML" FontSize="11" Canvas.Top="1" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="Aprendiendo XAML" FontSize="11" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="13" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="12" />
   </Canvas>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black" />
   <MediaElement Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" 
        Source="C:\Devcare\WPFe\videos\Designing with Xaml.wmv" />

   <Canvas Canvas.Top="295" Canvas.Left="187.5">
       <Ellipse Stroke="Black" StrokeThickness="0.5" Width="25" Height="25">
          <Ellipse.Fill>
               <LinearGradientBrush EndPoint="1,1" StartPoint="0,0" >
                   <GradientStop Color="LightBlue" Offset="0" />
                   <GradientStop Color="Gray" Offset="0.5" />
                   <GradientStop Color="Silver" Offset="1" />
               </LinearGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
       <Polygon Fill="DarkGreen" Points="9,5 9,19 18,12" />
   </Canvas>

</Canvas>



<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black">
   </Canvas>
    <Canvas Canvas.Top="295" Canvas.Left="10" >
       <TextBlock Text="Aprendiendo XAML" FontSize="11" Canvas.Top="1" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="Aprendiendo XAML" FontSize="11" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="13" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="12" />
   </Canvas>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black" />
   <MediaElement Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" 
        Source="C:\Devcare\WPFe\videos\Designingwith Xaml.wmv" />

   <Rectangle Height="5" Width="360" Fill="#444444" Canvas.Top="260" Canvas.Left="20" />
   <Rectangle Height="15" Width="5" Fill="Yellow" Canvas.Top="255" Canvas.Left="110"
        RadiusX="2" RadiusY="2" />

   <Canvas Canvas.Top="295" Canvas.Left="187.5">
       <Ellipse Stroke="Black" StrokeThickness="0.5" Width="25" Height="25">
          <Ellipse.Fill>
               <LinearGradientBrush EndPoint="1,1" StartPoint="0,0" >
                   <GradientStop Color="LightBlue" Offset="0" />
                   <GradientStop Color="Gray" Offset="0.5" />
                   <GradientStop Color="Silver" Offset="1" />
               </LinearGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
       <Polygon Fill="DarkGreen" Points="9,5 9,19 18,12" />
   </Canvas>

</Canvas>


------------------------------------------------------------------------------------------


<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >


<Canvas.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
         <BeginStoryboard>
            <Storyboard>
               <DoubleAnimation
                   Storyboard.TargetName="elCirculo"
                   Storyboard.TargetProperty="Width"
                   From="200" To="1" Duration="0:0:4"
                   AutoReverse="True" />
            </Storyboard>
         </BeginStoryboard>
      </EventTrigger>
   </Canvas.Triggers>

   <Ellipse x:Name="elCirculo" Width="100" Height="100" Fill="Yellow" />

</Canvas>



<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >

   <Canvas.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
         <BeginStoryboard>
            <Storyboard Duration="0:0:4" >
               <DoubleAnimation
                   Storyboard.TargetName="elCirculo"
                   Storyboard.TargetProperty="Width"
                   From="200" To="1" AutoReverse="True"/>
               <ColorAnimation
                   Storyboard.TargetName="brochaCirculo"
                   Storyboard.TargetProperty="Color"
                   From="Black" To="LightGray" AutoReverse="True" />
            </Storyboard>
         </BeginStoryboard>
      </EventTrigger>
   </Canvas.Triggers>

   <Ellipse x:Name="elCirculo" Width="100" Height="100" >
      <Ellipse.Fill>
         <SolidColorBrush x:Name="brochaCirculo" Color="Yellow" />
      </Ellipse.Fill>
   </Ellipse>
</Canvas>


------------------------------------------------------------------------------------

<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >


<Canvas.Triggers>
      <EventTrigger RoutedEvent="Canvas.Loaded">
         <BeginStoryboard>
            <Storyboard>
             <DoubleAnimationUsingKeyFrames
                 Storyboard.TargetName="elCirculo"
                 Storyboard.TargetProperty="Width">
              <DoubleAnimationUsingKeyFrames.KeyFrames>
                  <SplineDoubleKeyFrame Value="0" KeyTime="0:0:1" />
                  <SplineDoubleKeyFrame Value="50" KeyTime="0:0:2" />
                  <SplineDoubleKeyFrame Value="150" KeyTime="0:0:4" />
              </DoubleAnimationUsingKeyFrames.KeyFrames>
              </DoubleAnimationUsingKeyFrames>
            </Storyboard>
         </BeginStoryboard>
      </EventTrigger>
   </Canvas.Triggers>

   <Ellipse x:Name="elCirculo" Width="100" Height="100" Fill="Yellow" />

</Canvas>


------------------------------------------------------------------------------------


<Canvas x:Name="topCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Triggers>
     <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
           <Storyboard>
              <DoubleAnimation Storyboard.TargetName="topCanvas"
                  Storyboard.TargetProperty="Opacity"
                  From="0" To="1" Duration="0:0:5" />
           </Storyboard>
        </BeginStoryboard>
     </EventTrigger>
   </Canvas.Triggers>


   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black">
   </Canvas>
    <Canvas Canvas.Top="295" Canvas.Left="10" >
       <TextBlock Text="Aprendiendo XAML" FontSize="11" Canvas.Top="1" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="Aprendiendo XAML" FontSize="11" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="13" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="12" />
   </Canvas>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black" />
   <MediaElement Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" 
        Source="C:\Devcare\WPFe\videos\Designingwith Xaml.wmv" />

   <Rectangle Height="5" Width="360" Fill="Silver" Canvas.Top="260" Canvas.Left="20" />
   <Rectangle Height="5" Width="50" Fill="#444444" Canvas.Top="260" Canvas.Left="20" />
   <Rectangle Height="15" Width="5" Fill="Yellow" Canvas.Top="255" Canvas.Left="110"
        RadiusX="2" RadiusY="2" />

   <Canvas Canvas.Top="295" Canvas.Left="187.5">
       <Ellipse Stroke="Black" StrokeThickness="0.5" Width="25" Height="25">
          <Ellipse.Fill>
               <LinearGradientBrush EndPoint="1,1" StartPoint="0,0" >
                   <GradientStop Color="LightBlue" Offset="0" />
                   <GradientStop Color="Gray" Offset="0.5" />
                   <GradientStop Color="Silver" Offset="1" />
               </LinearGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
       <Polygon Fill="DarkGreen" Points="9,5 9,19 18,12" />
   </Canvas>

</Canvas>


------------------------------------------------------------------------------------



<Canvas x:Name="topCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Triggers>
     <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
           <Storyboard>
              <DoubleAnimation Storyboard.TargetName="topCanvas"
                  Storyboard.TargetProperty="Opacity"
                  From="0" To="1" Duration="0:0:1" />
           </Storyboard>
        </BeginStoryboard>
     </EventTrigger>
   </Canvas.Triggers>


   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black">
   </Canvas>
    <Canvas Canvas.Top="295" Canvas.Left="10" >
       <TextBlock Text="Aprendiendo XAML" FontSize="11" Canvas.Top="1" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="Aprendiendo XAML" FontSize="11" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="13" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="12" />
   </Canvas>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black" />
   <MediaElement Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" 
        Source="C:\Devcare\WPFe\videos\Designingwith Xaml.wmv">

       <MediaElement.Triggers>
          <EventTrigger RoutedEvent="Canvas.Loaded">
             <BeginStoryboard>
                <Storyboard>
                   <DoubleAnimation Storyboard.TargetName="progressBar" 
                      Storyboard.TargetProperty="Width" 
                      From="0" To="360"
                      Duration="0:0:15" />
                </Storyboard>   
             </BeginStoryboard> 
          </EventTrigger>
       </MediaElement.Triggers>
   </MediaElement>

   <Rectangle Height="5" Width="360" Fill="Silver" Canvas.Top="260" Canvas.Left="20" />
   <Rectangle x:Name="progressBar" Height="5" Width="90" Fill="#444444" Canvas.Top="260" Canvas.Left="20" />
   <Rectangle Height="15" Width="5" Fill="Yellow" Canvas.Top="255" Canvas.Left="110"
        RadiusX="2" RadiusY="2" />

   <Canvas Canvas.Top="295" Canvas.Left="187.5">
       <Ellipse Stroke="Black" StrokeThickness="0.5" Width="25" Height="25">
          <Ellipse.Fill>
               <LinearGradientBrush EndPoint="1,1" StartPoint="0,0" >
                   <GradientStop Color="LightBlue" Offset="0" />
                   <GradientStop Color="Gray" Offset="0.5" />
                   <GradientStop Color="Silver" Offset="1" />
               </LinearGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
       <Polygon Fill="DarkGreen" Points="9,5 9,19 18,12" />
   </Canvas>

</Canvas>


------------------------------------------------------------------------------------


<Canvas x:Name="topCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
      xmlns:sys="clr-namespace:System;assembly=mscorlib" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
      Height="350" Width="400">

   <Canvas.Triggers>
     <EventTrigger RoutedEvent="Canvas.Loaded">
        <BeginStoryboard>
           <Storyboard>
              <DoubleAnimation Storyboard.TargetName="topCanvas"
                  Storyboard.TargetProperty="Opacity"
                  From="0" To="1" Duration="0:0:1" />
           </Storyboard>
        </BeginStoryboard>
     </EventTrigger>
   </Canvas.Triggers>


   <Canvas.Background>
   <LinearGradientBrush EndPoint="0.9,0.4" StartPoint="0.1,0.1" >
      <GradientStop Color="Silver" Offset="0" />
      <GradientStop Color="SlateGray" Offset="0.65" />
      <GradientStop Color="LightGray" Offset="1" />
   </LinearGradientBrush>
   </Canvas.Background>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black">
   </Canvas>
    <Canvas Canvas.Top="295" Canvas.Left="10" >
       <TextBlock Text="Aprendiendo XAML" FontSize="11" Canvas.Top="1" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="Aprendiendo XAML" FontSize="11" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="13" Canvas.Left="1" Foreground="LightGray" />
       <TextBlock Text="00:00:15" FontSize="11" Canvas.Top="12" />
   </Canvas>

   <Canvas Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" Background="Black" />
   <MediaElement Canvas.Top="10" Canvas.Left="10" Width="380" Height="280" 
        Source="C:\Devcare\WPFe\videos\Designingwith Xaml.wmv">

       <MediaElement.Triggers>
          <EventTrigger RoutedEvent="Canvas.Loaded">
             <BeginStoryboard>
                <Storyboard>
                   <DoubleAnimation Storyboard.TargetName="progressBar" 
                      Storyboard.TargetProperty="Width" 
                      From="0" To="360"
                      Duration="0:0:15" />
                   <DoubleAnimation Storyboard.TargetName="thumbMover" 
                      Storyboard.TargetProperty="X" 
                      From="0" To="360"
                      Duration="0:0:15" />
                </Storyboard>   
             </BeginStoryboard> 
          </EventTrigger>
       </MediaElement.Triggers>
   </MediaElement>

   <Rectangle Height="5" Width="360" Fill="Silver" Canvas.Top="260" Canvas.Left="20" />
   <Rectangle x:Name="progressBar" Height="5" Width="90" Fill="#444444" Canvas.Top="260" Canvas.Left="20" />
   <Rectangle Height="15" Width="5" Fill="Yellow" Canvas.Top="255" Canvas.Left="15"
        RadiusX="2" RadiusY="2">
      <Rectangle.RenderTransform>
          <TranslateTransform x:Name="thumbMover" X="0" Y="0" />
      </Rectangle.RenderTransform>
   </Rectangle>

   <Canvas Canvas.Top="295" Canvas.Left="187.5">
       <Ellipse Stroke="Black" StrokeThickness="0.5" Width="25" Height="25">
          <Ellipse.Fill>
               <LinearGradientBrush EndPoint="1,1" StartPoint="0,0" >
                   <GradientStop Color="LightBlue" Offset="0" />
                   <GradientStop Color="Gray" Offset="0.5" />
                   <GradientStop Color="Silver" Offset="1" />
               </LinearGradientBrush>
          </Ellipse.Fill>
       </Ellipse>
       <Polygon Fill="DarkGreen" Points="9,5 9,19 18,12" />
   </Canvas>

</Canvas>


------------------------------------------------------------------------------------


<html>
<head>
   <script type="text/javascript" src="http://localhost/Devcare/WPFe/js/aghost.js" />
</head>
<body>

</body>
</html>