Practice Sheet 8
Nesting Items in The Button Control:
A simple example showing how multiple levels of nesting may be used to embed complex items
in a button control. Here two stack panels and a LIstBox control are embedded in the Button
Control:
<Button Height="180" Width="200">
<StackPanel Orientation="Vertical">
<StackPanel Margin="5" VerticalAlignment="Center"
Orientation="Horizontal">
<Ellipse Fill="Yellow" Width="25" />
<TextBlock VerticalAlignment="Center" Margin="5" Text="Check
Forecast" />
</StackPanel>
<ListBox FontSize="11" Opacity="0.5" Margin="2"
x:Name="lstForecastGlance">
<ListBoxItem>
<TextBlock VerticalAlignment="Center" Text="Mon: Sunny
(85)" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center" Text="Tue: Partly
Cloudy (89)" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center" Text="Wed:
Thunderstorms (78)" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center" Text="Thu:
Thunderstorms (76)" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center" Text="Fri: Partly
Cloudy (71)" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center" Text="Sat: Mostly
Sunny (74)" />
</ListBoxItem>
<ListBoxItem>
<TextBlock VerticalAlignment="Center" Text="Sun: Sunny
(80)" />
</ListBoxItem>
</ListBox>
</StackPanel>
</Button>
You get:
1
Event Handlers:
1- Open Visual Studio 2010 and create a new Silverlight project called
EventHandlers. Allow Visual Studio to create a Web Application project to host
the application.
2- When the project is created, you should be looking at the MainPage.xaml file. If
you do not see the XAML source, switch to that view so that you can edit the
XAML. Within the root Grid of the Silverlight page, add grid row and column
definitions to define four rows and two columns, as follows:
<Grid.RowDefinitions>
<RowDefinition Height="70" />
<RowDefinition Height="70" />
<RowDefinition Height="70" />
2
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
3- Next, add a Button control to the upper-left grid cell and a TextBlock control in
the upper-right cell.
<Button
Width="125"
Click="Button_Click"
Height="35"
Content="XAML Event" />
<TextBlock
Name="txtXAMLEventText"
Text="Click the XAML Event!"
Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
4- Add the Click property to the button. When you type Click=, Visual Studio will
prompt you with the option of automatically creating a new event handler. When
3
the <New Event Handler> option is displayed, simply press Enter, and Visual
Studio will complete the Click property.
In addition, Visual Studio automatically adds an event handler called
Button_Click to the code-behind class for the Silverlight application, as
follows:
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
}
5- For this example, you will change the Text property within the TextBlock. In
order to do this, you first need to give the TextBlock a name so you can access it
from the code behind. Add the following code:
<TextBlock
Name="txtXAMLEventText"
Text="Click the XAML Event!"
Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
6- Now change the Text property of the TextBlock within the Button_Click event,
as follows:
private void Button_Click(object sender, RoutedEventArgs e)
{
txtXAMLEventText.Text = "Thank you for clicking!";
}
7-
Run the application and click the XAML Event button. The text to the right of the
button will change to “Thank you for clicking.”
Wiring the Event:
Create the following project:
One more Button called MangedEvent and texBlock are added
4
Register a btnManaged Click event as follows:
public MainPage()
{
InitializeComponent();
this.btnManaged.Click += new RoutedEventHandler(btnManaged_Click);
}
Execute the project
Utilizing The Border Control:
Create a new SilverLight Project called Borders-1 and insert the following XAML code:
<Border BorderThickness="2" Margin="10" CornerRadius="10">
5
<Border.Background>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Green" Offset="0"
<GradientStop Color="White" Offset="1"
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.Background>
<Border.BorderBrush>
<LinearGradientBrush>
<LinearGradientBrush.GradientStops>
<GradientStop Color="Black" Offset="0"
<GradientStop Color="White" Offset="1"
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Border.BorderBrush>
/>
/>
/>
/>
<StackPanel Margin="10">
<Button Content="Sample Button" Margin="5" />
<TextBlock Text="Sample TextBlock" Margin="5" />
<ListBox Margin="5">
<ListBoxItem>
<TextBlock Text="ListItem 1" />
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="ListItem 2" />
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="ListItem 3" />
</ListBoxItem>
<ListBoxItem>
<TextBlock Text="ListItem 4" />
</ListBoxItem>
</ListBox>
</StackPanel>
</Border>
You get:
6
Radio Buttons and CheckBoxes:
Create a new project and insert the followinx XAML Code within the root Grid:
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Row="0" Margin="10">
<TextBlock
Text="What is your favorite color?" />
<RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
<Rectangle Width="100" Height="10" Fill="Red" />
</RadioButton>
<RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
<Rectangle Width="100" Height="10" Fill="Blue" />
</RadioButton>
<RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
<Rectangle Width="100" Height="10" Fill="Green" />
7
</RadioButton>
<RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
<Rectangle Width="100" Height="10" Fill="Yellow" />
</RadioButton>
<RadioButton HorizontalAlignment="Left" GroupName="FavoriteColor">
<Rectangle Width="100" Height="10" Fill="Purple" />
</RadioButton>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Row="1" Margin="10">
<TextBlock Text="What Technologies are you familiar with?" />
<CheckBox Content="Silverlight" />
<CheckBox Content="ASP.NET" />
<CheckBox Content="Visual Studio 2010" />
<CheckBox Content="Expression Blend 4" />
</StackPanel>
You get:
8
The ComboBox:
Create a new project with a ComboBox and a textBlock as follows:
You may use the following XAML Code:
<ComboBox Height="23" HorizontalAlignment="Left" Margin="10,10,0,0"
Name="comboBox1" VerticalAlignment="Top" Width="120"
SelectionChanged="comboBox1_SelectionChanged">
<ComboBoxItem Content="May" />
<ComboBoxItem Content="June" />
<ComboBoxItem Content="July" />
</ComboBox>
<TextBlock Height="28" HorizontalAlignment="Left" Margin="168,12,0,0"
Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" Width="120" />
Implement the SelectionChanged Event as follows:
private void comboBox1_SelectionChanged(object sender, SelectionChangedEventArgs
e)
{
ComboBoxItem theItem = comboBox1.SelectedItem as ComboBoxItem;
textBlock1.Text = theItem.Content.ToString();
9
}
Execute the Project:
10