Basic Controls in Silverlight – Part II

 

Background

In the previous post we looked at some of the basic controls in Silverlight. In this post I am going to demonstrate few other basic controls which come bundled with the Silverlight framework. Without wasting too much time lets start.

Silverlight controls

Run

On many occasions we need to highlight a portion of the text differently compared to the rest of the text in the same line. Usually if you are working on a web application you can do so using something like a Span tag and then giving a different style to one of the span tag. I am not aware if such a feature exists in any Winforms controls. But in Silverlight we can use the Run control to give different styles to a section of text. Let take an example

        <TextBlock>
            <Run Text="This is normal Text"/> 
            <Run FontWeight="Bold" Text="This is bold text"/>
            <Run Foreground="Red" Text="This is displayed in Red" />
        </TextBlock>

All the above render text in the same line. But the first Run renders a normal text, second one renders a bold text and third one with red colored text. I don’t think this can be done so easily in a Windows forms application. If you were to do the same in Windows application, you’ll need separate label controls and set different properties on them accordingly. You’ll need to take care of the alignment of each label etc.

Border

A border element is similar to a group box control in HTML. It is used to logically group various controls under one container. Creating a border is very simple.

        <Border BorderThickness="2" Width="300" BorderBrush="Blue">

I have fixed the width of border to 300 and thickness to 2. Also the border color is set to Blue.

Canvas

A Canvas is useful when we want to position the elements at absolute position. Normally almost all the container controls in Silverlight use the relative positioning to position the child controls. In certain cases we need to position controls in absolute positions and we can do it using Canvas as shown below

        <Canvas Background="Crimson">
            <TextBlock Canvas.Left="10" Canvas.Top="10" Text="This is inside the canvas positioned at 10,10"/>
            <TextBlock Canvas.Left="50" Canvas.Top="50" Text="This is inside the canvas positioned at 50,50"/>
        </Canvas>

The most commonly used elements as the parent controls in Silverlight are the Grid, StackPanel and Canvas.

ProgressBar

Almost all the applications now a days have the need to do some asynchronous operation.As a best practice the user should not wait for the operation to finish and the screen should not be frozen. People usually tend to show a busy indicator or a progress bar. Silverlight has a built in progress bar control which can be used as follows

        <ProgressBar Value="10" Minimum="0" Maximum="100" Height="20" Width="200" IsIndeterminate="True"/>

In an ideal world you’ll set the Value property of the progress bar to indicate the change in value based on some timer or some other criteria. In this case I am using the IsIndeterminate property to display a continuous progress bar.

PasswordBox

It’s a very basic requirement in any application which handles security and authentication to display a password box. The contents of the textbox are masked. In HTML we can do this by using a normal textbox control and setting its mode to password. In windows applications also its similar. We set a property on the normal textbox controls to mask the input. But Silverlight has a dedicated password box control.

        <PasswordBox Width="100" />

 

Conclusion

In this post we saw few basic controls available in Silverlight apart from the ones we saw in the previous post. There are other controls like Rectangle, Line etc. which are mainly used for drawing graphics. From a line of business applications point of view these are used very rarely. Hence I have not demonstrated them here. In the next post I’ll be talking about the additional controls available as part of Silverlight toolkit controls like Accordion, date picker, numeric up down etc. Keep watching this space for more on that later. Here is a screenshot of the controls that I demonstrated in todays post.

The complete source code is available for download  from dropbox.

Until next time Happy Programming

Share: