Silverlight – Wire up your form for programming

As I mentioned a couple of weeks ago, learning Silverlight is a lot more about relearning some basic assumptions than it is about learning a new language.  We’ve already looked at the basic layout managers available and how that impacts putting a screen together.  Today we want to look at how we can capture events and access the controls from our csharp code.


If you are already familiar with ASP.NET development, I think you will be surprised at how similar XAML coding looks to ASP.NET.

The first thing you might have trouble finding when you first try to wire up a control is how to access it by an identifier.  In ASP.NET, we’d use the ID attribute.  In Windows Forms, we’d use the ID attribute (unless we were in VB.NET where we’d use Name).  In XAML, we use the x:Name attribute.  Huh?

So if you want to just code an element’s identifier by hand, your XAML code will look something like this:

n style="color: blue;"><UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data" xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="390" Height="382" Background="#FFE1BABA"> <StackPanel Height="Auto" Width="Auto"> <TextBlock x:Name="m_textBlockLabel" Height="Auto" Width="Auto" Text="TextBlock" TextWrapping="Wrap"/> <Button Content="Button" x:Name="m_buttonPushMe"/> </StackPanel> </UserControl>

But we don’t want to have to do this by hand.  So instead, we can fire up Expression Blend 2.0 and use the properties window on the right to fill it in:

<image

Much easier.

Now the next thing we’ll want to do is to wire up some events.  Again, you could just type it into the XAML, but once again, it will be easier if you use expression blend.

You’ll notice that just to the right of the  Name field in the properties is a lightning bolt icon.  Click that to get to the events that are available.  Unfortunately, there is no double click support to automatically create the event, but you probably already know the drill.  Just name it using the format controlName_EventName.  Save your code and go back to Visual Studio and reload the file and you’ll see that you have an event handler in your csharp code file.

style="color: blue;">private void m_button_Click
    (object sender, RoutedEventArgs e)
{

}

All that’s left now is doing something in that event.  So let’s set the Text property of our TextBlock (kind of like a Label in ASP.NET or WindowsForms).
<

span style=”color: blue;”>private void m_button_Click
    (object sender, RoutedEventArgs e)
{
    m_textBlockLabel.Text = “Button was clicked”;

}

See, from here it looks a lot like code we've been writing in ASP.NET or Windows Forms.  Not a whole lot new.

Related Post

One Response to “Silverlight – Wire up your form for programming”