Introduction
The Button is a Silverlight control which responds when the user clicks on it.
See also:
Button Controls Article
HyperlinkButton Article
ToggleButton Article
RepeatButton Article
Overview
Since the Button derives directly from the ButtonBase class and there isn’t an additional functionality, I’ll use the examples from the Button Controls Article.
The most important event of the Button, inherited from ButtonBase class is the Click event. It occurs when a user clicks on the button. For example:
XAML:
<UserControl x:Class="Button2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100">
<Canvas x:Name="cnvLayoutRoot" Background="White">
<TextBlock x:Name="tblText" Canvas.Top="20" Canvas.Left="30" Text="Not clicked yet."></TextBlock>
<Button x:Name="btnTest" Canvas.Top="60" Canvas.Left="30" Click="btnTest_Click" Content="Click me!"></Button>
</Canvas>
</UserControl>
Code behind:
private void btnTest_Click( object sender, RoutedEventArgs e )
{
this.tblText.Text = "The button was clicked.";
}
We have a TextBlock and a Button. We specify the event handler for the Click event of the Button in the XAML and then write code in the code behind to respond to this event. In our example we change the Text of the TextBlock when the user clicks on the Button. It results in the following:
An interesting property is the ClickMode, also inherited from the ButtonBase class. When you set it to Release(default), the Click event occurs when you release the mouse button:
<Button ClickMode="Release" x:Name="btnTest" Canvas.Top="60" Canvas.Left="30" Click="btnTest_Click" Content="Click me!"></Button>
Setting this property to Press causes the event to occur immediately when you click the mouse button, for example:
<Button ClickMode="Press" x:Name="btnTest" Canvas.Top="60" Canvas.Left="30" Click="btnTest_Click" Content="Click me!"></Button>
Setting this property to Hover causes the event to occur when you move over the Button with the mouse:
<Button ClickMode="Hover" x:Name="btnTest" Canvas.Top="60" Canvas.Left="30" Click="btnTest_Click" Content="Click me!"></Button>
Example
Imagine that we want to have the following Button which starts a Silverlight animation:
Since the Button is a ContentControl we can use any object for its Content property. So you can put a layout control in it, containing other controls:
<UserControl x:Class="Button2.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100">
<Canvas x:Name="cnvLayoutRoot" Background="LightGray">
<Button x:Name="btnTest" Background="White" Canvas.Top="30" Canvas.Left="30">
<StackPanel x:Name="spnlButtonContent" VerticalAlignment="Center" Orientation="Horizontal">
<Image x:Name="imgSls" Source="/Images/sls.jpg" Width="30" Height="30" />
<TextBlock x:Name="tblPlay" Text=" PLAY " FontWeight="Bold" Foreground="#1ca0f2" VerticalAlignment="Center"/>
</StackPanel>
</Button>
</Canvas>
</UserControl>
In our example we just put a StackPanel in our Button, containing an Image and a TextBlock. So you can arrange the Button’s Content depending on your desires and imagination.
Conclusion
This article is just a brief description of the key features of the Button control. It targets the developer who has just started with the new Silverlight 2 controls. Any comments are welcome.
Reference
http://msdn.microsoft.com/en-us/library/system.windows.controls.button(VS.95).aspx