We have seen Layout management in our previous lab. So, continuing with the same lab let’s have introduction to commonly used controls. In this lab, I’ll not be taking all controls.
Bellow is a controls list which we will try out-
1) Border Control : Try out following Example -
Most of the time you will see Border Control is used in templates. Important point to note down here is – If you try to add more than one control within border, you will get exception that “The property Child is set more than once”. So, you will see where ever you want to use more than one control inside border you will have to use some container which allows to include more than one control.
<UserControl x:Class="FirstSLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400"Height="300">
<GridBackground="Black"x:Name="LayoutRoot"ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<BorderBorderBrush="RosyBrown"BorderThickness="3"Width="300"Height="20"Grid.Row="0" />
<BorderBorderBrush="Green"BorderThickness="3"CornerRadius="10,10,10,10"Width="300"Height="20"Grid.Row="1" />
<BorderBorderBrush="Yellow"BorderThickness="3"CornerRadius="10,10,10,10"Width="300"Height="20"Grid.Row="2">
<StackPanel Orientation="Horizontal"HorizontalAlignment="Center">
<EllipseHeight="15"Width="15"Fill="Brown"Margin="5,0,0,0"/>
<EllipseHeight="15"Width="15"Fill="Blue"Margin="5,0,0,0"/>
<EllipseHeight="15"Width="15"Fill="Bisque"Margin="5,0,0,0"/>
<EllipseHeight="15"Width="15"Fill="Green"Margin="5,0,0,0"/>
<EllipseHeight="15"Width="15"Fill="HotPink"Margin="5,0,0,0"/>
</StackPanel>
</Border>
<BorderBorderBrush="White"BorderThickness="3"CornerRadius="10,10,10,10"Width="75"Height="50"Grid.Row="3">
<ImageSource="Butterfly.jpg"Stretch="Fill"Height="40"Width="65" />
</Border>
</Grid>
</UserControl>
2) TextBolck Control : Try out following example -
TextBlock control is a lightweight control which is used to display messages or contents.
<UserControl x:Class="FirstSLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock x:Name="txtSimpleTxBlock" Foreground="Yellow" Text="This is Simple TextBlock" Grid.Row="0"/>
<TextBlock x:Name="txtSimpleTxBlock" Foreground="Red" FontFamily="Times New Roman" Text="This is Simple TextBlock" Grid.Row="1"/>
<TextBlock x:Name="txtSimpleTxBlock" Foreground="Green" FontSize="20" Text="This is Simple TextBlock" Grid.Row="2"/>
<TextBlock x:Name="txtSimpleTxBlock" Foreground="White" FontSize="20" FontFamily="Comic Sans MS" Text="This is Simple TextBlock" Grid.Row="3"/>
</Grid>
</UserControl>
3) Button Control : Try out following example -
This is not an ordinary Button control which you had seen in Win Forms or Web Forms. Silverlight Button control is a Container control which can hold other controls inside.
<UserControl x:Class="FirstSLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="Click Me !!" Background="Red" Height="50" Width="200" Grid.Row="0"/>
<Button Height="50" Width="200" Grid.Row="1">
<Button.Content>
<StackPanel Orientation="Vertical">
<TextBlock Text="Click Me" Foreground="Blue" FontWeight="Bold"/>
</StackPanel>
</Button.Content>
</Button>
<Button Height="50" Width="200" Grid.Row="2">
<Button.Content>
<StackPanel Orientation="Vertical">
<MediaElement Source="/Silverlight.wmv" AutoPlay="True"/>
</StackPanel>
</Button.Content>
</Button>
<Button Content="Click Me !!" Background="HotPink" Height="50" Width="200" Grid.Row="3" IsEnabled="False"/>
</Grid>
</UserControl>
4) CheckBox Control : Try out following example -
CheckBox control is a Container control unlike the simple CheckBox you had seen in Win form and Web form.
<UserControl x:Class="FirstSLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<CheckBox Content="Click Me !!" Foreground="Yellow" Background="Red" Height="50" Width="100" Grid.Row="0"/>
<CheckBox Height="50" Width="100" Grid.Row="1">
<CheckBox.Content>
<StackPanel Orientation="Vertical">
<TextBlock Text="Click Me" Foreground="Blue" FontWeight="Bold"/>
</StackPanel>
</CheckBox.Content>
</CheckBox>
<CheckBox Height="50" Width="100" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center">
<CheckBox.Content>
<StackPanel Orientation="Vertical">
<MediaElement Source="/Silverlight.wmv" AutoPlay="True" Height="50" Width="100"/>
</StackPanel>
</CheckBox.Content>
</CheckBox>
<CheckBox Foreground="Red" Background="HotPink" Height="50" Width="100" Grid.Row="3" IsEnabled="False">
<CheckBox.Content>
<Image Source="Butterfly.jpg"/>
</CheckBox.Content>
</CheckBox>
</Grid>
</UserControl>
5) RadioButton Control : Try out following example -
RadioButton control is a Container control unlike the simple CheckBox you had seen in Win form and Web form.
<UserControl x:Class="FirstSLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<RadioButton Content="Click Me !!" Foreground="Yellow" Background="Red" Height="50" Width="100" Grid.Row="0"/>
<RadioButton Height="50" Width="100" Grid.Row="1">
<RadioButton.Content>
<StackPanel Orientation="Vertical">
<TextBlock Text="Click Me" Foreground="Blue" FontWeight="Bold"/>
</StackPanel>
</RadioButton.Content>
</RadioButton>
<RadioButton Height="50" Width="100" Grid.Row="2" HorizontalAlignment="Center" VerticalAlignment="Center">
<RadioButton.Content>
<StackPanel Orientation="Vertical">
<MediaElement Source="/Silverlight.wmv" AutoPlay="True" Height="50" Width="100"/>
</StackPanel>
</RadioButton.Content>
</RadioButton>
<RadioButton Foreground="Red" Background="HotPink" Height="50" Width="100" Grid.Row="3" IsEnabled="False">
<RadioButton.Content>
<Image Source="Butterfly.jpg"/>
</RadioButton.Content>
</RadioButton>
</Grid>
</UserControl>
6) TextBox Control : Try out following example -
This is a Simple TextBox control-
<UserControl x:Class="FirstSLApplication.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBox Width="220" Text="This is Simple TextBox !!" Height="25"/>
<TextBox Width="220" Foreground="Blue" FontWeight="Bold" Text="TextBox with Foreground Color" Height="25" Grid.Row="1"/>
<TextBox Width="220" Background="Yellow" FontWeight="Bold" Text="TextBox with Background Color" Height="25" Grid.Row="2"/>
<TextBox Width="220" Text="This is Formated TextBox !!" Height="25" Background="Gray" Foreground="Red" Grid.Row="3" />
</Grid>
</UserControl>
7) Slider Control : Try out following example -
Slider control has few important property which you need to consider are as follows -
1) Minimum. 2) Maximum. and 3) Value.
The bellow example is using slider to change the Rotation Transform and Skew Transform of Ellipse programmatically on the ValueChanged Event of Slider.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SLBlendFirstApp.Page"
Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="#FF000000">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.500*"/>
<ColumnDefinition Width="0.500*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="0.740*"/>
<RowDefinition Height="0.260*"/>
</Grid.RowDefinitions>
<Slider Grid.Row="1" Grid.Column="0" x:Name="Slider1" LargeChange="10" Maximum="360" ValueChanged="Slider1_ValueChanged" />
<Slider Grid.Row="1" Grid.Column="1" x:Name="Slider2" Maximum="100" LargeChange="10" ValueChanged="Slider2_ValueChanged"/>
<Ellipse Margin="57,88,63,117" Fill="#FFFFF100" Stroke="#FF000000" Width="200" Height="150" Grid.Row="0" Grid.Column="0" x:Name="El1" RenderTransformOrigin="0.5,0.5">
</Ellipse>
<Ellipse Margin="57,88,63,117" Fill="#FF0040FF" Stroke="#FF000000" Width="200" Height="150" Grid.Row="0" Grid.Column="1" x:Name="El2"/>
</Grid>
</UserControl>
Open your Page.xaml.cs file and write bellow code on Slider’s ValueChanged event.
private void Slider1_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
RotateTransform rTransform=new RotateTransform();
rTransform.Angle=Slider1.Value;
El1.RenderTransform = rTransform;
}
private void Slider2_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
SkewTransform rTransform = new SkewTransform();
rTransform.AngleX = Slider2.Value;
El2.RenderTransform = rTransform;
}
8) ComboBox Control : Try out following example -
This is a container controls as bellow example show the same.
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="SLBlendFirstApp.Page"
Width="640" Height="480" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d">
<Grid Background="Black" x:Name="LayoutRoot" ShowGridLines="True">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ComboBox Height="50" Width="150" Background="Red" Grid.Row="0">
<TextBlock Text="Pravinkumar"/>
<TextBlock Text="Yash"/>
<TextBlock Text="Priti"/>
<TextBlock Text="Manish"/>
<TextBlock Text="Ramakant"/>
</ComboBox>
<ComboBox Height="50" Width="150" Background="Purple" Grid.Row="1">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Red" Text="Red Says Stop - " FontSize="12"/>
<Ellipse Height="20" Width="20" Fill="Red"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Yellow" Text="Yellow Says Slow - " FontSize="12"/>
<Ellipse Height="20" Width="20" Fill="Yellow"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Green" Text="Green Says Stop - " FontSize="12"/>
<Ellipse Height="20" Width="20" Fill="Green"/>
</StackPanel>
</ComboBox>
<ComboBox Height="50" Width="150" Background="Purple" Grid.Row="2">
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Red" Text="Video - 1" FontSize="12"/>
<MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Yellow" Text="Video - 2" FontSize="12" />
<MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Foreground="Green" Text="Video - 3" FontSize="12"/>
<MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
</StackPanel>
</ComboBox>
<ComboBox Height="50" Width="150" Background="Purple" Grid.Row="3">
<Image Height="20" Width="20" Source="Butterfly.jpg"/>
<MediaElement Height="20" Width="20" Source="/Silverlight.wmv" AutoPlay="True"/>
<Ellipse Height="20" Width="20" Fill="Red"/>
<Image Height="20" Width="20" Source="Butterfly.jpg"/>
<Image Height="20" Width="20" Source="Butterfly.jpg"/>
</ComboBox>
</Grid>
</UserControl>
And like wise their are many more controls which you can use to design the better UX in Silverlight 2.0.
Imp. Note : I have not covered all the controls here. Controls even you can learn by your own. But just to give you a Sneak-Peak-Preview of Silverlight 2.0 Controls I took this opportunity!!
Now as you have completed writing the third Silverlight Lab, let’s have a closer look on Forth lab – “Creating and applying Styles & Templates in Silverlight 2.0 using Microsoft Expression Blend 2.0.”
