Just like most of the controls in Silverlight, you can set all the 'usual' properties on a button: you can specify its width, its height, its vertical and horizontal alignment, and font settings (weight, color, family, and so on). What makes the button a button is the fact that it has three basic states—normal, hover, and pressed. We will discuss the states later in this book but as a short introduction, states represent a control's look at a specific point in time, and can be used to animate the control's look. In the button's case, when you hover over a button, you will see that the button changes its color to blue. That's the hover state in action. The Button control has two important properties—Click and ClickMode. The Click property's value represents the name of the code behind method that will fire when a user clicks on the button. Let's demonstrate this. In your Silverlight application, add a button using the following line of code:

<Button Content="Click me!" Height="30" Width="130" />

If you build and run your application now, and click on the button, you'll notice that nothing happens. This is because we haven't set the Click property. Right after the value of width, start typing Click= and once you see<New Event Handler>, click the Enter button. Your button code should look like the following code snippet:

<Button Content="Click me!" Height="30" Width="130" Click="Button_Click" />

Switch over to your code behind file (MainPage.xaml.cs), and you'll notice there is a method called Button_Click there. Visual Studio created it when you set the Click property value. Add the following line of code to the Button_Click event handler:

MessageBox.Show("I GOT CLICKED!");

Build and test your application. You'll get a nice message box each time you click the button.

The ClickMode property sets when the Click event should occur. This property has the following three possible values:

Try to set your button's ClickMode property to all three values and watch how your button changes its behavior.

The HyperlinkButton control is really a button that acts as a hyperlink. The HyperlinkButton control's most important property is NavigateUri. NavigateUri gets or sets the URL that the button should navigate to once clicked. No hyperlink will be complete without a property to specify its target. The HyperlinkButton control has that property and it is named TargetName. You can set the value for TargetName the same as you would for a regular HTML<a> tag target property such as _blank, _parent, and so on. For a list of all possible values, check out the MSDN documentation for HyperlinkButton.TargetName Property at http://msdn.microsoft.com/en-us/library/system.windows.controls.hyperlinkbutton.targetname%28VS.95%29.aspx.

The following line of code demonstrates the use of a HyperlinkButton control:

<HyperlinkButton NavigateUri="http://www.packtpub.com" Content="My Publisher"/>

ToggleButton is the base class for the CheckBox and RadioButton controls, but it can also be used as a standalone control as well. ToggleButton, as the name suggests, is used in the scenarios where states need to be toggled around. ToggleButton, being a button itself, has all the properties and events of a regular button, in addition to two very conceptual events—Checked and Unchecked. Checked occurs when the state of the ToggleButton has changed to checked, while Unchecked occurs when the state has changed to unchecked. Another property that is special to the ToggleButton control is IsThreeState. This Boolean property, when set to True, adds a state to ToggleButton named Indeterminate. Let's examine how to use the ToggleButton control with three states:

<StackPanel>
<ToggleButton IsThreeState="True" Indeterminate="ToggleButton_Indeterminate" Unchecked="ToggleButton_Unchecked" Checked="ToggleButton_Checked" Content="Click me!"/>
<TextBlock x:Name="tbState"/>
</StackPanel>

The preceding code snippet adds ToggleButton, which has three states. Each state is represented by an event handler. A TextBlock is added to display the ToggleButton control's current state.

Switch over to the MainPage.xaml.cs file, and add the following code snippet below the constructor:

private void ToggleButton_Indeterminate(object sender, RoutedEventArgs e)
{
tbState.Text = "Indeterminate";
}
private void ToggleButton_Unchecked(object sender, RoutedEventArgs e)
{
tbState.Text = "Unchecked";
}
private void ToggleButton_Checked(object sender, RoutedEventArgs e)
{
tbState.Text = "Checked";
}

Each event handler will change the text property of tbState to the state's name.

Build and run the application, and you'll notice that every click on the button changes the text according to the state the button is currently in.

The Silverlight CheckBox control is similar to any other checkbox control you know from other platforms. As the CheckBox control's base class is ToggleButton, it uses the same events and properties as its parent class. To mark a CheckBox control as checked, we set the IsChecked property to true and to react to checked and unchecked events, we set the Checked and Unchecked events handlers. A commonly used CheckBox control's line of code will look as follows:

<CheckBox Content="Check me!" Checked="CheckBox_Checked" Unchecked="CheckBox_Unchecked"/>

In your code behind file, you will have two event handlers as follows:

private void CheckBox_Checked(object sender, RoutedEventArgs e)
{
MessageBox.Show("I'm checked!");
}
private void CheckBox_Unchecked(object sender, RoutedEventArgs e)
{
MessageBox.Show("I'm not checked!");
}

Build and run the application. The result of the preceding code snippet will render a checkbox with the content Check me!, which will pop up a message box with some text once checked or unchecked.

Just like the CheckBox control, the RadioButton control also derives from ToggleButton. The main difference between the RadioButton control and the CheckBox control is that only one radio button can be selected within a given group. To specify a group, the RadioButton control uses the GroupName property. Using the RadioButton control is relatively simple. Its use can be outlined by the following code snippet:

<StackPanel Orientation="Horizontal">
<RadioButton GroupName="Group1" Content="Choose me!"/>
<RadioButton GroupName="Group1" Content="No! Me!"/>
<RadioButton GroupName="Group2" Content="I don't belong here..."/>
</StackPanel>

The preceding code snippet adds three radio buttons, two from the same group and one from a different group. Build and run the application, and you'll notice that you can only select one radio button from the first pair, but the last radio button can be selected regardless of the others.