Silverlight Controls

In this Article we are going to learn Silverlight controls and related properties.

Silverlight has many controls, many of them are out of the box controls that come in the Silverlight and many others are provided by community or third party vendors. Here we are going to lear out of the box Silverlight controls and related properties.

Some generic properties of the Controls/Element

X:Name

Used to specify the unique name for the control, that can be used in code behind to access the control.

Width:

Used to set the width of the control (if not specified, it takes the width of the parent element)

Height:

Used to set the height of the control (if not specified, it takes the height of the parent element)

Canvas.Top

Used to set the top position from the Canvas

Canvas.Left

Used to set the left position from the Canvas

Canvas.ZIndex

Used to set the z-order of the element from the Canvas

Canvas

The canvas layout panel provides a way to position the element using an explicit co-ordinate, by default it position its child element from top-left that is considered 0, 0 position.
In case we want to position the element inside the canvas, we use Canvas.Top and Canvas.Left properties on its child elements.

Code

<Canvas Background="Red">

<Rectangle x:Name="yellowRectangle" Fill="Yellow" Height="50" Width="100" Canvas.Left="50" Canvas.Top="50"/>

<Rectangle x:Name="greenRecntangle" Fill="Green" Height="50" Width="100" Canvas.Left="50" Canvas.Top="150"/>

<Rectangle x:Name="orangeRectangle" Fill="Orange" Height="50" Width="100" Canvas.Left="250" Canvas.Top="75" Canvas.ZIndex="1"/>

<Rectangle x:Name="BlanchedAlmondRectangle" Fill="BlanchedAlmond" Height="50" Width="100" Canvas.Left="255" Canvas.Top="85" Canvas.ZIndex="2"/>

</Canvas>

In the above code snippet, we have a Canvas with background color as Red. Inside that we have kept 4 Rectangles element. We have specified their Fill (filling its background color), Height (specifying the height of the Rectangle, Width (specifying the width of the rectangle), Canvas.Left (specifying its position from the left of the Canvas and Canvas.Top (specifying its position from top of the canvas).
The Canvas.ZIndex property is used to specify the z-order rendering behaviour of the element in Canvas (in other words we can say that the layer ordering of the element on the Canvas). Because of this property, you can see that Orange rectangle is in the back of the BalanchedAlmond rectangle.

Output

StackPanel

StackPanel is used to arrange the elements in horizontal or vertical direction. If Orientation is not specified, it arranges its child elements vertically.

Code

<StackPanel Background="Yellow" Orientation="Vertical">

<Button Height="25" Width="70" Content="Button 1"/>

<Button Height="25" Width="70" Content="Button 2"/>

<Button Height="25" Width="70" Content="Button 3"/>

<Button Height="25" Width="70" Content="Button 4"/>

<Button Height="25" Width="70" Content="Button 5"/>

<Button Height="25" Width="70" Content="Button 6"/>

<Button Height="25" Width="70" Content="Button 7"/>

<Button Height="25" Width="70" Content="Button 8"/>

<Button Height="25" Width="70" Content="Button 9"/>

<Button Height="25" Width="70" Content="Button 10"/>

<TextBox x:Name="TextBox1" Width="100" Height="25"/>

</StackPanel>

In the above code snippet, we have 10 button controls inside the StackPanel that is automatically arranged vertically without specifying its position.
In case we want to arrange these buttons Horizontally, we can set Orientation property to “Horizotnal”.

Output

Grid

Grid is the most powerful control in Silverlight; it allows us to define rows and columns to place child elements into it.

Code

<Grid x:Name="LayoutRoot" Background="White">


<Grid.RowDefinitions>


<RowDefinition />

<RowDefinition />

<RowDefinition />
</Grid.RowDefinitions>

<Grid.ColumnDefinitions>


<ColumnDefinition />

<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock Grid.Column="0" Grid.Row="0" Text="First row first cell"/>

<TextBlock Grid.Column="1" Grid.Row="0" Text="First row second cell"/>

<TextBlock Grid.Column="0" Grid.Row="1" Text="Second row first cell"/>

<TextBlock Grid.Column="1" Grid.Row="1" Text="Second row second cell"/>

<TextBlock Grid.Column="0" Grid.Row="2" Grid.ColumnSpan="2" Text="Third row and first cell - Third row and first cell"/>
</Grid>

If you are familiar with Grids in ASP.NET (like GridView, DataGrid etc.), you will notice that Silverlight Grid is little different. In this we first define the Rows and Columns and then define the child elements with Grid.Column and Grid.Row property to place them into respective rows and columns of the Grid.
In the Grid
RowDefinitions > RowDefinition is used to specify the number of rows into the Grid
ColumnDefinitions > ColumnDefinition is used to specify the number of columns into the Grid.
In the above code snippet, we have defined three rows and two columns. In the first two rows we have two cells with TextBlock elements and the last row has only one cell as we have set Grid.ColumnSpan property of the last TextBlock to 2 that spans over last two columns of the Grid.
In case we want an element to span over more than one rows of the Grid, we can set Grid.RowSpan properties as we have done for the Grid.ColumnSpan property.
(In summary, the Columnspan and RowSpan works in almost similar fashion as it works in the HTML table)

Output

TextBlock

TextBlock control is used to display the text. It has some properties/child elements that can be used to write content for this control as well as format the text.
Text
Used to provide value for the TextBlock.

<TextBlock Text="This is simple text" /> 

TextBlock.Text
In case we want to set large amount of text as the value to the TextBlock we can use TextBlock.Text child element and specify its content.

<TextBlock x:Name="myText" Canvas.Top="25">


<TextBlock.Text>


This is the first line

in continuation of first line.
</TextBlock.Text>
</TextBlock>

LineBreak
In case we want to write multi-line content to the TextBlock, we can use LineBreak element.

<TextBlock x:Name="myText1" Canvas.Top="50">



This is the first line

<LineBreak/>

This is the second line.

</TextBlock>

Run
In case we want to format the content of the TextBlock we can use the Run child element. It has its own attribute that is used to set the foreground color, font style or size.

<TextBlock Canvas.Top="100">


This is simple Text<Run Foreground="CadetBlue" FontFamily="Georgia" FontSize="15">


This is Georgia font
</Run>

<LineBreak/>

<Run Foreground="DarkGreen" FontFamily="Georgia" FontSize="15">


This is Georgia font in Green color
</Run>
</TextBlock>

Output

TextBox Control

TextBox control is used to get input data from the user in Silverlight.

Text
In case we want to specify its value, we specify the "Text" property.

<TextBlock Canvas.Top="15" Canvas.Left="5" Text="Your name : "/>

<TextBox x:Name="TextBoxName" Height="25" Width="100" Canvas.Left="100" Canvas.Top="10"/>

TextWrapping, AcceptReturn
In case we want to display a multi-line textbox so that user can be able to submit large amount of textual data, we can set the height and width properties of the textbox along with TextWrapping to wrap and AcceptReturn to true value. This can be said to be a good thing as one control perfors the role of textbox as well as the teatarea.
TextWrapping allows the text to automatically wrap to the next line in case use keeps writing more content in a single line.
AcceptReturn allows user to press enter key to shift the cursor to next line in the textbox.

<TextBlock Canvas.Top="45" Canvas.Left="5" Text="Your details : "/>

<TextBox x:Name="TextBoxDetails" Height="150" Width="250" Canvas.Left="100" Canvas.Top="45" TextWrapping="Wrap" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" AcceptsReturn="True" />

Output

PasswordBox

PasswordBox allows us to provide a password box to the user that enables user to submit password. In this textbox, the characters that are entered, appears as masked.
Password
In case we want to prepopulate the password to the Password box, we can set the Password attribute.
PasswordChar
In case we want a custom character as the masked character for the Password box, we can set to PasswordChar attribute.

<PasswordBox x:Name="PasswordBox1" Width="160" Height="35" Canvas.Left="20" Canvas.Top="20" BorderThickness="5" Password="MyPassword" PasswordChar="#" /> 

Output

RichTextBox

RichTextBox control allows us to display and edit rich content into Silverlight application. Rich content can include bold, italic, different size text or image.
RichTextControl allows several child controls to format the text in italic, bold and color, it also provide child control to insert image in the RichTextBox control.
Paragraph
A mandatory tag inside the RichTextBox control to place any content.
Italic
Used to format the text in Italic style
Bold
Used to format the text in bold style
Span
Used to format the inline text in the RichTextBox control.
InlineUIContainer
A mandatory child element that is used to place Image in the RichTextBox control.
Image
Image is used to place the image in the RichTextBox control. Source attribute is used to specify the url of the image. In order to display the image, we need to

<RichTextBox Height="250" Width="250" x:Name="DescriptionBox" Canvas.Top="10" Canvas.Left="10">


<Paragraph>


This is the simple text.

<Italic>Itali

<Bold>cccc</Bold>

</Italic>

<LineBreak/>

<LineBreak/>

This

<Span FontFamily="Arial" FontSize="18">is a good boy.</Span>

<LineBreak/>

<LineBreak/>

<LineBreak/>

<LineBreak/>

<InlineUIContainer>

<Image Source="../Images/itfunda.jpg" Stretch="Uniform" Width="150" Height="100" />

</InlineUIContainer>
</Paragraph>
</RichTextBox>

Output

How to add content to the RichTextBox control dynamically from code behind?

If we want to add BOLD content, we can use Bold class like below.
Code

Response.Write(Date.ToShortDateString());

Bold b = new Bold();

b.Inlines.Add("This text is in bold");

Paragraph p = new Paragraph();

p.Inlines.Add(b);

DescriptionBox.Blocks.Add(p);

This article is the continuation of my last article in Silverlight controls series, read last article here.

Slider Control

Slider control helps us to provide option to the user to select numeric value within a range.


Code

<Slider x:Name="Slider1" Width="200" Height="50" ValueChanged="Slider_ValueChanged" Maximum="100" Minimum="0" />

<TextBlock x:Name="TextBlock1" Text="The slider value is: "/>

It has a Maximum (the maximum value can be selected by the user) and Minimum (the minimum value can be selected by user) property along with ValueChanged event that occurs when user changes its value.
Code behind

private void Slider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)

{


this.TextBlock1.Text = "The slider value is: " + e.NewValue.ToString();
}

The above method executes when user changes the slider value, that writes the selected value to the TextBlock control.

Output

Calendar & DatePicker

Calendar control is meant for rendering a calendar on the page and by default it shows the current month views. By clicking on the month name heading, one can navigate to months of that year and clicking on Year, user can navigate to last 11 years.
The SelectedDatesChanged event let us execute a server side method when the user selection changes.
DatePicker control provides a PopCalendar with a TextBox where user can write the date as well as select the Date from pop calendar.
Code

<sdk:Calendar x:Name="Calendar1" Margin="35, 30, 10 , 20" SelectedDatesChanged="Calendar1_SelectedDatesChanged_1" />


<sdk:DatePicker x:Name="DatePicker1" Height="25" Width="150" Margin="35, 220, 50, 50" />

<TextBlock x:Name="TextBlock1" Text="Selected Date: " />

Code behind

public CalendarPage()

{


InitializeComponent();

DatePicker1.SelectedDate = DateTime.Now;
}

 

private void Calendar1_SelectedDatesChanged_1(object sender, SelectionChangedEventArgs e)

{


DateTime selectedDate = Calendar1.SelectedDate.Value;

TextBlock1.Text = "Selected date: " + selectedDate.ToString();

if (DatePicker1.SelectedDate.Value != null)

{


TextBlock1.Text += Environment.NewLine + "Selected date from DatePicker: " + DatePicker1.SelectedDate.Value.ToString();
}
}

In the above code snippet, we have specified Calendar1_SelectedDatesChanged_1 method on SelectedDatesChanged event of the Calendar control. When user changes the Date selection in the calendar, this method executes and writes selected date in the TextBlock control.
In the same event, we are also assigning the selected date from the DatePicker control to the TextBlock.

Output