1. Resources
    2. .NET programming
    3. Silverlight

Silverlight - A detailed look - Part-III [Controls]

Posted Date: 27 Apr 2009 |Updated: 27-Apr-2009 |Category: Silverlight |Author: |Member Level: Gold |Points: 40 |

In my previous Articles we have learnt “How to start with Silverlight". In the present article we will learn Silverlight Controls.
I am covering the entire Article in a practical view so, I advise you please remind previous articles and create a test application for side-by-side practical or follow these steps to create a new test application:

1. Select File -> New -> Project from Main Menu of Visual Studio
2. Select C# / Visual Basic from the project types
3. From Template list select Silverlight Template.
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, lets start to do some real work:

Silverlight Controls:



Silverlight Controls basically divided into: Layout Controls, Input Controls, Media Controls and Other Controls etc.


Layout Controls:



All layout controls derive from the basic abstract class Panel.

It is clear from the name these controls define the layout. Silverlight2 proides several Layout Controls like :

Canvas – Its 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 lets 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 are confused, I was too confused when I have read this word ‘Grid' as a Asp.net guy, I was confused it with DataGrid. But, don't worry Grid is not a DataGrid. Its 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 rearrange all rectangles horizontally.

Border – As it pronounced from name, 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 above code and see the results.

Input Controls:



For any UI the Input Controls and very essential and important. Lets discuss some input controls:


Button and TextBox– Buttons are simple button to submit, With the Content property you can assign the text it to check the following code:


<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">
        <Button x:Name="btnSubmit" Click="btnSubmit_Click"
            Content="Submit" Height="30" Width="75"
            HorizontalAlignment="Left"
            Margin="7,5,0,0"/>
    </Grid>

</UserControl>


On the other hand TextBox is very common Input controls:

<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">
        <TextBox x:Name="txtText" FontFamily="Arial"
            Width="200" Height="20" Margin="5" Text="I am the Text Box"
            HorizontalAlignment="Left" />
        
    </Grid>

</UserControl>


Try the above code with different properties.

CheckBox and RadioButton– These are common button and an essential part of SIlverlight application's UI part.


<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  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">
    <Canvas  x:Name="LayoutRoot" Background="White">
        <CheckBox IsChecked="True" IsThreeState="True" Content="I am Checked" Canvas.Top="25" Canvas.Left="50" />
        <CheckBox IsChecked="False" IsThreeState="True" Content="Not Checked" Canvas.Top="50" Canvas.Left="50" />
        <RadioButton GroupName="rb" Content="Choose" Canvas.Top="75" Canvas.Left="50" />
        <RadioButton GroupName="rb" Content="Lets Choose Me" Canvas.Top="100" Canvas.Left="50" />
    </Canvas>

</UserControl>


The above code described the properties of Input Controls.


Calendar – Calendar are another important Controls, these provide DateTime information.

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  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">
        <basics:Calendar x:Name="myCal" DisplayMode="Month" 
                FirstDayOfWeek="Sunday" Background="AliceBlue"  />
    </Grid>

</UserControl>


The Calendar control has a number of unique properties that customize the control's behavior, including AreDatesInPastSelectable, DisplayDateEnd/Start, DisplayMode, FirstDayOfWeek,IsTodayHighlighted, and SelectableDateEnd/Start.

ListBox– Its also another very important and flexibe UI control. It is similar to the ASP.NET ListBox. This controls accepts the number of items:

<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  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">
    <Canvas  x:Name="LayoutRoot" Background="White">
        <ListBox Width="150" Height="80" Canvas.Top="50" Canvas.Left="50">
            <ListBoxItem Content="Introduction" />
            <ListBoxItem Content="Layout COntrols" />
            <ListBoxItem Content="Input COntrols" />
            <ListBoxItem Content="Defining Styles" />
            <ListBoxItem Content="Global Styles" />            
        </ListBox>
    </Canvas>

</UserControl>


Media Controls

:

Media controls contain Image and Media element controls

ListBox– It display the image from specific path. Silverlight only supports JPEG and PNG images. 


<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  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">
    <Canvas  x:Name="LayoutRoot" Background="White">
          <Image x:Name="img" Source="images/myimage.png" />
    </Canvas>

</UserControl>


MediaElement– It display Video and audio as image displays only static images. The MediaElement only supports Windows Media Video, Windows Media Audio, and MP3 formats.


<UserControl xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"  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">
    <Canvas  x:Name="LayoutRoot" Background="White">
        <MediaElement Source="WindowsMedia.wmv" AutoPlay="True" Opacity=".7">
        </MediaElement>
    </Canvas>

</UserControl>


Other Controls



DataGrid– DataGrids are fundamental UI controls. They radically simplify the task of displaying structured data to users by automatically handling the rendering of rows, columns, headers, and data navigation. Silverlight's data grid is no exception. While it is far from being a complete or "advanced" grid control by today's WinForms and ASP.NET standards, it does provide basic grid functionality.

To use the DataGrid control, you must simply bind the Grid to a list of items (that implement IEnumerable) via the ItemSource property. In the simplest approach, the Grid will automatically generate columns based on the data you supply and even render "special" column types- like checkbox columns- based on your data types. You can, of course, take more control and manually define the columns that will be rendered in your grid by setting the AutoGenerateColumns property to false.

We have to add following namespace to use DataGrid:
xmlns:my="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"


<my:DataGrid x:Name="myDataGrid" AutoGenerateColumns="true" />


Defining and using styles in Silverlight



Lets take practical scenario for Styles in Silverlight.

Silverlight allows re-useable styles to be created to avoid duplication:


<Button x:Name="btnSubmit" FontFamily="Arial"
FontWeight="Bold" Width="100" Height="25"
Margin="10" />

<Button x:Name="btnCancel" FontFamily="Arial"
FontWeight="Bold" Width="100" Height="25"
Margin="10" />

We can also create Global Styles using app.xaml file


<Application.Resources>
<Style x:Key="ButtonStyle" TargetType="Button">
<Setter Property="Width" Value="100" />
</Style>
</Application.Resources>


Applying Styles to Controls:

With the help of Style property we can apply the global style to the properties:

<Button x:Name="btnSubmit" Content="Submit"
Click="btnSubmit_Click"
Style="{StaticResource ButtonStyle}" />


Conclusion



Silverlight 2 provides us numerous controls which are described in this category, we have leave deep theoretical part because we will discuss all with full fledged example in coming articles. In this article we have the idea how Silverlight 2 controls behaves and what are the Controls of Silverlight2.


Article by Gaurav Aroraa
Gaurav is a Microsoft Technology Specialist professional. He has awarded lifetime membership from Computer Society of India (CSI). He has more than 13yrs of experience in the industry. Currently, he is working in the capacity of Solution Architect with an MNC. He is serving to the various communities since 1999.

Follow Gaurav Aroraa or read 149 articles authored by Gaurav Aroraa

Comments

Author: D.Jeya kumar(JK)29 Apr 2009 Member Level: Gold   Points : 1

Hi,

Good post. Nice article. keep posting more Good articles. I would like to learn silver light...

Regards
JK

Author: Gaurav Aroraa30 Apr 2009 Member Level: Gold   Points : 1

Hi JK,

Sure I will try to post more articles on practical scenarios

Gaurav

Author: Mrs. Meetu Choudhary Nanda09 May 2009 Member Level: Gold   Points : 1

Hi Gaurav,

This is a very good and informative, we are waiting for new entries

Author: PHANI HARSHITHA MADALA11 May 2009 Member Level: Gold   Points : 1

Hi,

Can we install silverlight in VS2005
if so what steps are required

regards,
greeny_1984



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
    • Name:
    Email:
    Submit Article
    Return to Article Index

    Top Contributors

    Today
      Last 7 Days

      more...

      About dotnetspider.com

      We believe in providing quality content to our readers. If you have any questions or concerns regarding any content published here, feel free to contact us using the Contact link below.

      Quick Links
      General
      Services

      Digital Marketing by SpiderWorks Technologies, Kochi - India. ©