Silverlight Tutorials Chapter 4: Introduction to Controls

In my earlier three chapters of Silverlight Tutorial, I described about “Introduction to Silverlight”, “Introduction to Silverlight Application Development” and “Introduction to Panels”. I got lots of responses & wishes from my readers for the next chapter. I know, there was a big gap between these chapters and I am really apologizing to you. Thank you for your passion. Hope, this time also I will get more responses from you. Read the complete tutorial and provide your valuable feedbacks. You suggestions/comments are highly appreciated.

In this Chapter, I will describe you about some of the most common controls used in Silverlight. After the end of this section, you will be able to understand about those basic controls and their uses. Here I will guide you to understand some of the properties of each control and how to set them from both XAML & Code behind C# file.

Overview

Silverlight 4 provides a large collection of UI controls for Silverlight application development. These controls are require to do the UI design of the application for giving a better representation to the user. You can customize the look & feel by creating your own Style or extending the control to give more power to the UI. I will describe the control styling in later chapters.

Here is some of the Silverlight 4 controls that I want to describe for you:

1. TextBlock
2. TextBox
3. PasswordBox
4. RichTextBox
5. ComboBox
6. ListBox
7. CheckBox
8. RadioButton
9. Button

TextBlock

TextBlock is the primary element for displaying text inside your Silverlight Application. You will find it useful whenever you want to display some strings. TextBlock is a FrameworkElement available in the System.Windows.Controls namespace. There is a property named “Text” where you have to enter the text string.

<TextBlock Text="Hello Silverlight" />

This is not necessary for you to use the Text property to set some text inside your TextBlock control. TextBlock control can also be used as a container to set a para of strings. Hard enter to place a line break can be set using the <LineBreak/> control.

<TextBlock>

    <TextBlock.Text>

         This is the first line of Text.

         <LineBreak/>

         This is the second line of Text.

    </TextBlock.Text>

</TextBlock>

Or,

<TextBlock>

     This is the first line of Text.

     <LineBreak/>

     This is the second line of Text.

</TextBlock>

Also, you can represent a series of strings contained inside different Run elements instead of presenting as a single string. In that scenario, each Run element can have different font attributes set towards it. The LineBreak element will represent an explicit new line break

<TextBlock>

     <LineBreak/>

     <Run Foreground="Maroon" FontFamily="Arial" FontSize="30"

              FontWeight="Bold">Arial Bold 30</Run>

     <LineBreak/>

     <Run Foreground="Teal" FontFamily="Times New Roman" FontSize="18"

              FontStyle="Italic">Times New Roman Italic 18</Run>

     <LineBreak/>

     <Run Foreground="SteelBlue" FontFamily="Verdana" FontSize="14"

              FontWeight="Bold">Verdana Bold 14</Run>

</TextBlock>

You will see various Properties and Events available for TextBlock control to do text formatting and other operation.

TextBox

TextBox is another important element in Silverlight. It is also available inside the System.Windows.Controls. Unlike TextBlock, the TextBox inherits from the base class Control. Whenever you want to enter some text inputs from your user using your Silverlight application, you need the help of TextBox. It is one of the most important input control for Silverlight for data entry.

<TextBox Height="25" Width="200" Text="This is a Single Line TextBox"/>

<TextBox Height="100" Width="200"

                HorizontalScrollBarVisibility="Disabled"

                VerticalScrollBarVisibility="Auto"

                TextWrapping="Wrap"

                Text="This is a Multi-Line TextBox. This is a Multi-Line TextBox."/>

Here are some of the DependencyProperty registered with the TextBox control:

public static readonly DependencyProperty AcceptsReturnProperty;

Set “AcceptsReturn” to True if you want to insert a Hard line break explicitly in your TextBox by your user. From code behind if you want to set the value to AcceptsReturnProperty of the TextBox, you have to call the SetValue() and then pass the DependencyProperty with the appropriate value:

myTextBox.SetValue(TextBox.AcceptsReturnProperty, true);

myTextBox.SetValue(TextBox.AcceptsReturnProperty, false);

From XAML, you can set it as:

<TextBox AcceptsReturn="True"/>

public static readonly DependencyProperty IsReadOnlyProperty;

Set “IsReadOnly” to True if you want your TextBox as only readable by your user. This is very useful when you are putting a Edit Button near your TextBox to give the user chose whether he wants to update some texts.

To set it from the code behind use the same format of the SetValue() method. Here’s the code:

myTextBox.SetValue(TextBox.IsReadOnlyProperty, true);

public static readonly DependencyProperty MaxLengthProperty;

Set “MaxLength” to a positive numeric value , your user can’t add more than the specified value. Suppose you are setting it to 50, hence after inserting 50 characters the TextBox caret will not go forward.

You can set the Max Length property from code behind C# like this:

myTextBox.SetValue(TextBox.MaxLengthProperty, 150);

public static readonly DependencyProperty SelectionBackgroundProperty;

“SelectionBackground” color once set, your selected text will have the specified background. You can set both Solid Brush or Gradient Brush as your selection background. If you want to set it from code behind, use the following convention:

myTextBox.SetValue(TextBox.SelectionBackgroundProperty, new SolidColorBrush(Colors.Black));

public static readonly DependencyProperty SelectionForegroundProperty;

Like “SelectionBackground” the “SelectionForeground” will set the specified color as the foreground color of the selected text. The property SelectionForeground property can also be set in the same way. In this case, it will change the color of the font for the selected text. Have a look:

myTextBox.SetValue(TextBox.SelectionForegroundProperty, new SolidColorBrush(Colors.Black));

public static readonly DependencyProperty TextAlignmentProperty;

“TextAlignment” is responsible to set the text alignment to left, right, center or justify.

public static readonly DependencyProperty TextProperty;

“Text” property contains the Text entered into the TextBox. You can set it in the same way from XAML & Code as I mentioned above.

public static readonly DependencyProperty TextWrappingProperty;

Set “TextWrapping” to Wrap so that, if your entered text becomes longer than the specified width of the TextBox, it will populate the remaining text in a separate line (as described in the MultiLine TextBox figure).

PasswordBox

PasswordBox is available inside the System.Windows.Controls and inherits from Control. Whenever you need to add a Password field in your Silverlight application form to give the user access to login with credential, you have to use this password box. You will find it useful when you need to do login.

<PasswordBox Width="200" Height="25" Password="kunal2383" />

<PasswordBox Width="200" Height="25" Password="kunal2383" PasswordChar="X" />

Here are some useful DependencyProperty of the PasswordBox:

public static readonly DependencyProperty MaxLengthProperty;

Set “MaxLength” to a positive numeric value , your user can’t add more than the specified value. Suppose you are setting it to 50, hence after inserting 50 characters the TextBox caret will not go forward.

public static readonly DependencyProperty PasswordCharProperty;

Sets the password character of the control. The default value for password character of the field box is the asterisk (*). But you can change it by setting the value to this dependency property. If you set ‘X ‘ as password character, whatever you enter in the textbox of the field will display as ‘X’.

public static readonly DependencyProperty PasswordProperty;

Gets or Sets the password property of the PasswordBox. If you set the text it will be visible in the UI in asterisk format.

public static readonly DependencyProperty SelectionBackgroundProperty;

“SelectionBackground” color once set, your selected text will have the specified background.

public static readonly DependencyProperty SelectionForegroundProperty;

Like “SelectionBackground” the “SelectionForeground” will set the specified color as the foreground color of the selected text.

RichTextBox

Like TextBox RichTextBox also inherits from Control and available in the namespace System.Windows.Controls. It is useful when you want to give a input box to your user where they can able to format the entered text like word processor. You can display text in various text format like Bold, Italic, Underline, Left/Right/Center align, various font size/color etc.

Have a look into the following XAML code where the RichTextBox has several <Paragraph> tag to split the text in various parts. You can use <Bold>, <Italic> tags to format the entered text. You can also align the text or change the font-size or font-color by setting the proper attributes to the <Paragraph> tag.

<RichTextBox Height="153" Width="336" AcceptsReturn="True">

     <Paragraph>

          This is a RichTextBox control having multiple paragraphs inside it.

          You will find it more useful while creating an Editor control in Silvelight application.

          <LineBreak />

     </Paragraph>

     <Paragraph>

          <Bold>This Text is in Bold</Bold>

          <LineBreak />

          <Italic>This Text is in Italic</Italic>

     </Paragraph>

     <Paragraph TextAlignment="Right">

          This Text is Right aligned.

          <LineBreak />

     </Paragraph>

     <Paragraph TextAlignment="Center">

          <Hyperlink>This is an Hyperlink Button and center aligned</Hyperlink>

     </Paragraph>

</RichTextBox>

Here is the output of the above XAML code:

You can see here that, not only formatted text you can also enter hyperlinks to the RichTextBox control. If you set the AcceptsReturn=”True” your user can explicitly enter hard line break by pressing the “Enter” key.

ComboBox

ComboBox is an items control which works like a ListBox but only one item is visible at a time. It inherits from Selector control and available in the System.Windows.Controls namespace. It contains ComboBoxItem which inherits from ListBoxItem. ComboBoxItem is also present in the same namespace as ComboBox is i.e. System.Windows.Controls namespace.

Let us create a simple ComboBox having some contents inside it. Set the Width of the ComboBox to a specific value, let’s say 200 in our case. Now add ComboBoxItem as the Items of the Combo. This step is not always require (in case of XAML atleast). Set some string as the “Content” of the ComboBoxItem. Here you may ask one question, is it only supports text? The answer is “No”. You can also set any FrameworkElement inside the Content of the ComboBoxItem, such as TextBlock, TextBox, Button, Rectangle etc.

Have a look into the XAML code here:

<ComboBox Width="200">

     <ComboBox.Items>

          <ComboBoxItem Content="Item 01"/>

          <ComboBoxItem Content="Item 02"/>

          <ComboBoxItem Content="Item 03"/>

          <ComboBoxItem Content="Item 04"/>

          <ComboBoxItem Content="Item 05"/>

          <ComboBoxItem Content="Item 06"/>

          <ComboBoxItem Content="Item 07"/>

          <ComboBoxItem Content="Item 08"/>

          <ComboBoxItem Content="Item 09"/>

          <ComboBoxItem Content="Item 10"/>

     </ComboBox.Items>

</ComboBox>

The output of the above XAML will initially look like the below figure:

Now once you click on the small arrow at the right side of the ComboBox, you will see a menu comes out from it containing the content you added there:

Here are some properties those you will find useful while working with the ComboBox:

IsDropDownOpen:

Once set to True the drop down will show with the content. By using this property you can programmatically control the visibility of the dropped menu. By default it is set to False and when you click on the small arrow it sets it to True and thus it opens up in the screen.

IsEditable:

From the name you can easily understand the functionality of this property. By default it is set as False. Hence, in the normal scenario you can’t type anything inside the ComboBox. If you want to edit the content of the ComboBox or want to type inside it, just set the value to True.

MaxDropDownHeight:

You can control the size of the drop down menu. If you set it to some numeric value, the height will be set as per the entered value.

ListBox

ListBox inherited from Selector present inside the System.Windows.Controls namespace. It contains ListBoxItem as Items. It represents it’s children as list. The followings are the DependencyProperties of ListBox:

public static readonly DependencyProperty IsSelectionActiveProperty;

public static readonly DependencyProperty ItemContainerStyleProperty;

public static readonly DependencyProperty SelectionModeProperty;

Some important properties are described below:

SelectionMode:

Gets or Sets the Selection Behaviour of ListBox control. There are three different modes of the Selection of the ListBoxItem: Single, where user can select only one ListBoxItem at a time; Multiple, where user can select multiple items without pressing a Modifier Key; Extended, where user can select multiple items by pressing a Modifier Key. The default mode is “Single”.

<ListBox Width="200" SelectionMode="Multiple" Height="200">

     <ListBox.Items>

           <ListBoxItem Content="Item 01"/>

           <ListBoxItem Content="Item 02"/>

           <ListBoxItem Content="Item 03"/>

           <ListBoxItem Content="Item 04"/>

           <ListBoxItem Content="Item 05"/>

           <ListBoxItem Content="Item 06"/>

           <ListBoxItem Content="Item 07"/>

           <ListBoxItem Content="Item 08"/>

           <ListBoxItem Content="Item 09"/>

           <ListBoxItem Content="Item 10"/>

     </ListBox.Items>

</ListBox>

The above example shows you how the ListBox looks like in different SelectionMode. The first example demonstrates “Multiple Selection Mode”. This type of listbox you need to give your user a choice to select multiple items. In the second example shows a simple “Single Selection Mode”, where the user can only select a single choice.

CheckBox

Checkbox inherits from ToggleButton and resides inside System.Windows.Controls namespace. Using this you can give your user a choice to select multiple items. There are three different states for CheckBox. If checked will return true, unchecked will return false and the third state returns null value. Generally the third state is not that much useful in normal scenarios. Use “Content” to set value (e.g. string, rectangle etc) to the checkbox.

Have a look into the following example:

<CheckBox IsChecked="True" Content="Set as Checked (True)" />

<CheckBox IsChecked="False" Content="Set as UnChecked (False)" />

<CheckBox IsThreeState="True" IsChecked="{x:Null}" Content="Set as Third State (Null)" />

<CheckBox IsEnabled="False" IsChecked="True" Content="Set as Checked, but disabled" />

<CheckBox>

      <CheckBox.Content>

            <Grid>

                 <Ellipse HorizontalAlignment="Stretch" Fill="Red" />

                 <TextBlock Text="Multi Element as Checkbox Content" />

            </Grid>

      </CheckBox.Content>

</CheckBox>

The first code demonstrates the Checked item, the second code demonstrates unchecked item and third code demonstrates the third state. Third states becomes null. In the fourth code you will see the disabled state of the checkbox. What about the fifth code? Yup, in the fifth code we have added a Ellipse and a TextBlock wrapped with a Grid panel. It is not always necessary to set string as content. As per your requirement you can set anything. But be sure that CheckBox.Content only supports a single element and if you want to set multiple elements wrap with a panel as I demonstrated above.

RadioButton

Like CheckBox the element name RadioButton placed inside System.Windows.Controls assembly namespace also inherits from ToggleButton and contains the same properties as described above in CheckBox examples.

<RadioButton IsChecked="True" Content="Set as Checked (True)" />

<RadioButton IsChecked="False" Content="Set as UnChecked (False)" />

<RadioButton>

     <RadioButton.Content>

           <Grid>

                <Ellipse HorizontalAlignment="Stretch" Fill="Red" />

                <TextBlock Text="Multi Element as RadioButton Content" />

           </Grid>

      </RadioButton.Content>

</RadioButton>

<RadioButton GroupName="MyGroup" Content="Set under MyGroup" IsChecked="True" />

<RadioButton GroupName="MyGroup" Content="Set under MyGroup" />

Normally if you are setting multiple radio buttons inside a page, you can select only one of them. If you need your user to select radio button from each different group of your option you can set a group name to the radio button. By grouping the options using a group name will allow your user to select a single radio option from each group.

Button

Button control in Silverlight inherits from ButtonBase class and can be found under the System.Windows.Controls namespace. Button controls are mainly require to Submit forms or for navigation panels. You can style it as per your need.

You can set some text as it’s content or can place any framework element inside it. If you want to add more than one element inside it, you have to use any panel wrapped to your elements.

See the below code on how we can use Button controls:

<StackPanel x:Name="LayoutRoot" Margin="20" Background="White">

     <Button Content="I am a button control" Height="25" Width="200" Margin="5" />

     <Button Height="25" Width="200" Margin="5">

          <Button.Content>

               <CheckBox Content="Checkbox inside Button" />

          </Button.Content>

     </Button>

     <Button Width="200">

          <Button.Content>

               <StackPanel Orientation="Horizontal">

                     <Rectangle Width="30" Height="25" Fill="Green" Margin="0,0,5,0" />

                     <TextBlock Text="Rectangle inside Button" />

               </StackPanel>

          </Button.Content>

     </Button>

</StackPanel>

The first example is a simple button control whereas the second contains checkbox as it’s content. The third example contains a Rectangle and a Text wrapped by Grid panel. This shows how we can use panel to load multiple elements inside a button.

Button has Click event where you can write your logic to do whatever you want once you click on the button e.g. navigation to a different view, submitting the form etc.

End Note

Don’t forget to share your feedbacks/suggestions. They are always welcome for the improvements of articles.