Basic controls in Silverlight – Part I

 

Background

In the previous post we looked at the preliminary step of building a new Silverlight 4 application. We also briefly touched upon the controls like TextBox, TextBlock, Grid and Button. Silverlight has almost all the controls required for building a windows based application like checkbox, combo boxes, tree views, menus etc. Apart from these basic controls you also get special purpose controls like the expander control and slider control. In this post I am going to demonstrate some of the built in controls available in Silverlight.

Some of the basic controls available in Silverlight

Stackpanel

Last time we looked at the Grid control which is good for laying out controls in a tabular form. But sometimes we just want to add controls in horizontal or vertical direction. Stackpanel can be used for this purpose. Following is the markup related to adding controls to stack panel

    <StackPanel>
        <TextBlock Text="This is first text block."/>
        <TextBlock Text="This is second text block."/>
        <TextBlock Text="This is third text block."/>
    </StackPanel>

We can specify the direction in which the stacking has to happen. The default is the vertical stack. Using the Orientation property we can stack the controls in horizontal direction as well as follows

    <StackPanel Orientation="Horizontal">
        <TextBlock Text="This is first text block."/>
        <TextBlock Text="This is second text block."/>
        <TextBlock Text="This is third text block."/>
    </StackPanel>

Combo box or drop down list

This control is used to present a list of items and select one among the available options. This is a standard control used in web or windows applications. Its very easy to add combo box using xaml

        <ComboBox>
            <ComboBoxItem Content="India"/>
            <ComboBoxItem Content="South Africa"/>
            <ComboBoxItem Content="England"/>
            <ComboBoxItem Content="Australia"/>
        </ComboBox>

Here I have added four countries to the list of items of which only one can be selected at a time.

Checkbox

A Checkbox is used where a boolean condition is applicable. We can use check box to represent true or false state. By default we can also mark a checkbox as checked as shown below

        <CheckBox Content="Is Valid" />
        <CheckBox Content="Is Eligible" IsChecked="True"/>

Radio Button

Radio button control is used when you have mutually exclusive controls and you can choose one of the values. This is similar to a dropdown control but is represented differently on the screen. You’ll use drop down or combo box control when you have many choices and want to use one of the values. Here is a small usage of radio button

        <RadioButton GroupName="Gender" Content="Male" IsChecked="True"/>
        <RadioButton GroupName="Gender" Content="Female"/>

Note that the group name is same in the above two radio button controls. That is how we make them mutually exclusive to one another. If we don’t set this property we’ll be able to select both the radio buttons. You can test this by removing the GroupName property from either the first or second radio button. Also you can initially set the checked state of the radio button using the IsChecked property as shown above.

ScrollViewer

We can use the scroll viewer when there is limited screen estate available and the amount of contents that needs to be displayed is more. We can fix the height or width or both of the scroll viewer and anything that can’t be fitted in those bounds will be displayed using a scroll bar.

    <ScrollViewer Height="100">

For clarity purpose I haven’t copied the complete code here. But I have fixed the Height to 100 in the above code and created controls within the scroll viewer which exceed that area. You can download the complete source code to check the working code. ScrollViewer is another container control which can contain other child controls like the Grid or StackPanel. One of the things I like in Silverlight and WPF is that you mix and match the container controls. You can have a stack panel inside a grid or a grid inside a stack panel or any other container control. It essentially acts as a parent for other controls which helps you in building appealing visuals.

Slider

Another interesting control that comes built in Silverlight is the Slider control. We can use slider to limit a range of values as shown below

            <Slider Minimum="30" Maximum="45" Value="35" Background="Red"/>

In this case I  have set the minimum limit for the slider to be 30 and maximum to 45. I have also set the default value of 35. I have also given a red background to the slider to identify it easily.

Here is a partial screenshot of the output of what we have built

Conclusion

These are the controls I’ll be making use of in the sample application which will be built very soon. my intention here was to get familiarized with the basic controls.If you have worked on windows programming before using Microsoft technologies you’ll find one major difference between Silverlight and earlier versions of Microsoft based languages. Many of the controls use the Content property instead of Text to display text on the screen. I’ll talk about it in more detail in future post but just make a note of it for the time being. 

Each of these controls have numerous properties which allows us to customize the behavior of the controls as per our needs. You can play around with the properties to see how it impacts the behavior of each control. In the future post I’ll demonstrate the commonly used and freely available controls like date picker, auto complete textbox, busy indicator etc. which are not part of the core controls but are available as part of controls toolkit.

As always I have uploaded the complete working solution to dropbox which can be downloaded.

Until next time happy programming

Share: