Silverlight 2 Demo from Developer Academy 3: Part 1 – Anatomy of a Silverlight Application

Silverlight 2 Demo from Developer Academy 3: Part 1 – Anatomy of a Silverlight Application

After Setting the environment with the Twitter Service, we can start building the SilverTwitter Application.

Create a new Silverlight Application

Create a new project, and select a Silverlight Application. Name it SilverTwitter and click OK.

Confirm the creation of a Web Application that will host the Silverlight Application in it by clicking OK.

Visual Studio creates a new Solution that contains the Silverlight Application (SilverTwitter) and a Web Application that hosts the Silverlight application (SilverTwitter.Web).

Layout Controls in the Application

Once the application is created, Visual Studio opens the application preview windows, and lets the developer start building the application UI using XAML.

Silverlight allows you to layout controls in various ways, from which the Grid is the default: 

<UserControl x:Class="SilverTwitter.Page"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             Width="400"

             Height="300">

  <Grid x:Name="LayoutRoot"

        Background="White">

  </Grid>

</UserControl>

Add rows and columns definitions to the grid:

<Grid x:Name="LayoutRoot"

      Background="White">

  <Grid.RowDefinitions>

    <RowDefinition Height="75" />

    <RowDefinition Height="*" />

  </Grid.RowDefinitions>

  <Grid.ColumnDefinitions>

    <ColumnDefinition Width="*" />

    <ColumnDefinition Width="150" />

  </Grid.ColumnDefinitions>

</Grid>

Display the grid lines and change its background color.

<Grid x:Name="LayoutRoot"

      ShowGridLines="True"

      Background="LightBlue">

  ...
 

</Grid>

The application should look like this:

Place a TextBox, a Button and a ListBox in the grid. Notice that I used the Grid.Row and Grid.Column in order to place the controls in the wanted cell of the grid:

<Grid ...>

  ...

    <TextBox x:Name="txtStatus"

             Grid.Row="0"

             Grid.Column="0"

             Margin="10"

             FontSize="18" />

    <Button x:Name="btnUpdate"

            Grid.Row="0"

            Grid.Column="1"

            Margin="10"

            FontSize="18"

            Content="Update" />

    <ListBox x:Name="lstTweets"

             Grid.Row="1"

             Grid.ColumnSpan="2"

             Margin="10"

             Background="CornflowerBlue"

             FontSize="18">

    </ListBox>

  </Grid>

Now the application should look like this:

Handle User Events

Now we want to add some interaction. For example, we want to react the user clicking the Update button, take the status and add it to the list of tweets.

Add a click event to the button. As you type it, Visual Studio lets you created a handler for the event.

The, after the event handler is created, navigate to the handler:

Visual Studio opens page.xaml.cs and lets you edit the event handler. Get the status and add it to the listbox.

private void btnUpdate_Click(object sender, RoutedEventArgs e)

{

  string status = this.txtStatus.Text;

  this.lstTweets.Items.Add(status);

}

Running and Testing the Application

If you now run the application, you’ll notice it is not taking all the browser window. In order to make it stretch to the size of the browser, change the Width and Height properties of the root element in Page.xaml to MinWidth and MinHeight.

<UserControl ...

             MinWidth="400"

             MinHeight="300">

  ...

</UserControl>

In the SilverTwitter.Web project, select SilverTwitterTestPage.html and set it as the start page, and run the application.

Write a status message in the textbox and click the Update button. The status should appear as a new item in the list.

Anatomy of a Silverlight Application

Now, lets understand what had just happened. We navigated to an HTML page, and we got a Silverlight application all over the page. How did this happen?

When we created the new Silverlight application, Visual Studio created 2 projects for us. One was the Silverlight application itself (SilverTwitter), and the other project is a Web Application in which there is the HTML page we just navigated to.

If we open that HTML page, we can see that all that is required in order to display the Silverlight application in the page is an object tag, that activates the Silverlight Plugin in the browser, and passes the source parameter that points to a .xap file that sits in a folder called ClientBin.

<object data="data:application/x-silverlight-2," 
        type="application/x-silverlight-2" 
        width="100%" height="100%">

  <param name="source" value="ClientBin/SilverTwitter.xap" />

  ...
</object>

What is this .xap File?

In the web application that hosts the Silverlight application, you can find the SilverTwitter.xap under the ClientBin folder.

If you open it with Winzip or Winrar, you’ll see that it is no other than a Zip file that contains 2 files: the SilverTwitter.dll (our compiled Silverlight application) and another file called AppManifest.xaml which contains the list of parts in this .xap file:

<Deployment xmlns=http://schemas.microsoft.com/client/2007/deployment
            xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
            EntryPointAssembly="SilverTwitter"
            EntryPointType="SilverTwitter.App"
            RuntimeVersion="2.0.31005.0">
  <Deployment.Parts>
    <AssemblyPart x:Name="SilverTwitter" Source="SilverTwitter.dll" />
  </Deployment.Parts>
</Deployment>

So, to summarize this: The HTML page loads the Silverlight plugin and provides it with the path to the .xap file. The plugin downloads the .xap file to the client machine and runs it from there.

In the next part I’ll use the Networking layer in Silverlight in order to update the status and get a list of tweets.

Enjoy!