|
4. Enter project name and location
then create a new project [write here TestSilverlightControls].
5. To host Silverlight within the
project, select generate HTML test page.
6. Finally click ok
7. The page.xaml appears
Now, let’s start to do some real work:
Silverlight Controls
Silverlight Controls basically can be divided into:
Layout Controls, Input Controls, Media Controls and Other Controls.
Layout Controls
All layout controls derive from the basic abstract
class Panel.
It is clear from the name these controls define the
layout. Silverlight2 provides several Layout Controls like,
Canvas – It’s nothing but just similar to <div> tag of
html. It exists from the first version of Silverlight and is a very basic Layout
Control. It provides the basic facility to set the child elements using
Canvas.Top, Canvas.Left properties.
Simple Canvas
We can directly use the Layout control without
specifying any other additional tasks:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<TextBlock
Text="Testing Layout Control : Canvas."
Canvas.Top="50"
Canvas.Left="50" />
</Canvas>
</UserControl>
Paste above the code in ‘Page.xaml’ in test project.
This is simply display a TextBlock with: “Testing Layout Control :
Canvas.” as Text.
Now let’s do something extra with this:
Nested Canvas
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Canvas>
<TextBlock
Text="This is text on a blank canvas."
Canvas.Top="50"
Canvas.Left="50" />
<Canvas
Canvas.Top="50" Canvas.Left="50" Background="Red">
<TextBlock
Text="This is text on a blank canvas."
Canvas.Top="50"
Canvas.Left="50" />
</Canvas>
</Canvas>
</UserControl>
Now, just look at above code, there are two Canvas used
in above, in child canvas we have give the Top and Left values. Try the above
code and see the results.
Grid– Yes, I can understand you can get confused by seeing
the name with the ASP.Net DataGrid. But, it’s another Layout Control just
similar to Table of HTML. As a table Grid layout control provides the Row/
Column facility. One most exciting feature if Grid is it supports both
fixed-width column and dynamic-width column. Its will be cleared from following
example:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="myGrid"
Background="White" >
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*"></ColumnDefinition>
<ColumnDefinition
Width="400"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition
Height="50"></RowDefinition>
<RowDefinition
Height="100"></RowDefinition>
<RowDefinition
Height="*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock
Text="First Column of ROW1"
Grid.Column="0" Grid.Row="0" />
<TextBlock
Text="Second Column ROW1"
Grid.Column="1" Grid.Row="0" />
<TextBlock
Text="First Column of ROW2"
Grid.Column="0" Grid.Row="1" />
<TextBlock
Text="Second Column of ROW2"
Grid.Column="1" Grid.Row="1" />
<TextBlock
Text="First Column of ROW3"
Grid.Column="0" Grid.Row="2" />
<TextBlock
Text="econd Column of ROW2"
Grid.Column="1" Grid.Row="2" />
</Grid>
</UserControl>
Dynamic-Width can be assigned with the use of ‘*’
Grid provides some more extra feature like spanning and
others same as HTML Table.
StackPanel– It
provides the facility to arrange elements both horizontally and vertically.
Now, suppose we have to draw three rectangles
vertically, if you chose other layout controls then all rectangles will be
overlapped [try the same] but with the help of StackPanel its not:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="myGrid"
Background="White" >
<StackPanel>
<Rectangle
Width="100" Height="50" Fill="Blue" />
<Rectangle
Width="75" Height="50" Fill="Red" />
<Rectangle
Width="50" Height="25" Fill="Pink" />
</StackPanel>
</Grid>
</UserControl>
Note: By default orientation of StackPanel is
Vertical
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="myGrid"
Background="White" >
<StackPanel
Orientation="Horizontal"
Background="LightGray" >
<Rectangle
Width="100" Height="250" Fill="Blue" />
<Rectangle
Width="75" Height="175" Fill="Red" />
<Rectangle
Width="50" Height="125" Fill="Pink" />
</StackPanel>
</Grid>
</UserControl>
Above code will rearrange all rectangles
horizontally.
Border – As the name suggest, it
creates a border. Any control can put in the border and it creates just a border
for its child controls, lets check some taste of examples:
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="LayoutRoot"
Background="White">
<Border x:Name="thickBlackBrdr"
BorderBrush="Black"
BorderThickness="4"
Width="200"
Height="150">
</Border>
</Grid>
</UserControl>
Above code simply creates a Black Border with
Thickness=4.
<UserControl x:Class="myFirstSilverlightApp.TestControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="650" Height="300">
<Grid x:Name="LayoutRoot"
Background="White">
<Border x:Name="brdTest"
BorderThickness="4" Width="200" Height="150">
<Border.BorderBrush>
<LinearGradientBrush
x:Name="borderLinearGradientBrush" MappingMode="RelativeToBoundingBox"
StartPoint="0.5,0"
EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Color="Yellow"
Offset="0" />
<GradientStop Color="Blue"
Offset="1" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
</Border>
</Grid>
</UserControl>
Try the above code and see the results.
|