silverlight basic content

•the text Hello World rotates in a 360-degree circle.

<StackPanel Margin=”4”
HorizontalAlignment=”Center”
Orientation=”Horizontal”>
<TextBlock Width=”200” Height=”150”
FontSize=”24”>Hello World
<TextBlock.Triggers>
<EventTrigger RoutedEvent=”Canvas.Loaded”>
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard BeginTime=”0”
RepeatBehavior=”Forever”>
<DoubleAnimation
Storyboard.TargetName=”rotate”
Storyboard.TargetProperty=”Angle”
To=”360”
Duration=”0:0:10”/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</TextBlock.Triggers>
<TextBlock.RenderTransform>
<RotateTransform x:Name=”rotate”
Angle=”0”
CenterX=”300”
CenterY=”200”/>
</TextBlock.RenderTransform>
</TextBlock>
</StackPanel>

•A big part of why Silverlight is an exciting technology is that it provides a rich, vector-based drawing
system as well as support for complex animations.
the following XAML displays an image
in its normal, square shape:

<Canvas>
<Image
Source=”Images/elk.jpg”
Width=”200” Height=”150”>
</Image>
</Canvas>

Using the EllipseGeometry class, you can clip the image into whatever shape you desire. This
XAML clips the image into an oval:

<Canvas>
<Image
Source=”Images/elk.jpg”
Width=”200” Height=”150”>
<Image.Clip>
<EllipseGeometry RadiusX="85" RadiusY="100" Center="100,85"/>
</Image.Clip>
</Image>
</Canvas>

Once you render your geometries or shapes into something meaningful, you can use Brushes,
VideoBrushes, or Transforms to further give life to your UI rendering. The following XAML takes
a basic TextBlock and adds a LinearGradientBrush for some nice special effects:
<TextBlock
Canvas.Top=”100”
FontFamily=”Verdana”
FontSize=”32”
FontWeight=”Bold”>
Linear Gradient Brush
<TextBlock.RenderTransform>
<ScaleTransform ScaleY=”4.0” />
</TextBlock.RenderTransform>
<TextBlock.Foreground>
<LinearGradientBrush StartPoint=”0,0” EndPoint=”1,1”>
<GradientStop Color=”Red” Offset=”0.0” />
<GradientStop Color=”Blue” Offset=”0.2” />
<GradientStop Color=”Green” Offset=”0.4” />
<GradientStop Color=”Olive” Offset=”0.6” />
<GradientStop Color=”DodgerBlue” Offset=”0.8” />
<GradientStop Color=”OrangeRed” Offset=”1.0” />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>

Page Layouts and design
==========================
Silverlight includes several options for doing rich, resolution-independent layout using a Canvas,
DockPanel, Grid, StackPanel, and WrapPanel element.
Canvas — An absolute positioning panel that gives you an area within which you can position
child elements by coordinates relative to the Canvas area. A Canvas can parent any
number of child Canvas objects.
➤➤ DockPanel — Used to arrange a set of objects around the edges of a panel. You specify
where a child element is located in the DockPanel with the Dock property.
➤➤ Grid — Similar to an HTML table, it’s a set of columns and rows that can contain child
elements.
➤➤ StackPanel — A panel that automatically arranges its child elements into horizontal or vertical
rows
➤➤ WrapPanel — Allows the arrangement of elements in a vertical or horizontal list and has elements
automatically wrap to the next row or column when the height or width limit of the
panel is reached.
CANVAS
The following code shows a Canvas object with several child elements absolutely positioned within the Canvas:
<Canvas>
<Rectangle
Canvas.Top =”30”
Canvas.Left=”30”
Fill=”Blue”
Height=”100” Width=”100”/>
<Rectangle
Canvas.Top =”75”
Canvas.Left=”130”
Fill=”Red”
Height=”100” Width=”100”/>
<Ellipse
Canvas.Top =”100”
Canvas.Left=”30”
Fill=”Green”
Height=”100” Width=”100”/>
</Canvas>

DOCKPANEL
In the following example , you can see how a DockPanel can be confi gured to return
the results

<StackPanel x:Name=”LayoutRoot” Background=”White”>
<TextBlock Margin=”5” Text=”Dock Panel” />
<Border BorderBrush=”Red” BorderThickness=”2” >
<controls:DockPanel LastChildFill=”true”
Height=”265”>
<Button Content=”Dock: Left”
controls:DockPanel.Dock =”Left” />
<Button Content=”Dock: Right”
controls:DockPanel.Dock =”Right” />
<Button Content=”Dock: Top”
controls:DockPanel.Dock =”Top” />
<Button Content=”Dock: Bottom”
controls:DockPanel.Dock =”Bottom” />
<Button Content=”Last Child” />
</controls:DockPanel>
</Border>
</StackPanel>

Adding video to web page
<Grid x:Name=”LayoutRoot” Background=”White”>
<MediaElement Source=”Images/video1.wmv” />
</Grid>

DATaBINDING
<TextBlock x:Name=”Title”
Text=”{Binding Title, Mode=OneWay}” />