Improve Your Technology

Just another blog for techology

Silver light Layouts Part

Silver light Layouts Part

 Ref: http://blogs.msdn.com/charlie/archive/2009/04/19/silverlight-layouts-part-1.aspx

 User Controls

 Silverlight 2.0 projects typical use a combination of XAML and C# or VB code. XAML stands for Extensible Application Markup Language. It is pronounced Zamel, and it rhymes with the word camel.

When you create a new Silverlight project, the following XAML is produced:

 <UserControl x:Class=”SilverlightApplication3.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>

 Here you see two controls:

  • A UserControl
  • And inside it, a Grid

 A UserControl is a standard Silverlight type from which developers can derive their own custom controls. You can derive any type of control you want from a UserControl. However, the UserControl shown in the code quoted above usually acts as a container for your interface. Typically, developers fill this container with a series of Buttons, Textboxes and other simple elements that define an interface of some type.

 You can draw a very rough analogy between a Form in a Windows Forms application and this UserControl in a Silverlight application. Just as you use a Form to define the interface for Windows application, you use a UserControl to define the interface for your Silverlight application.

 It’s important to remember, however, that this control is, by default, embedded inside an ASP.NET Web Application Project. You could, therefore, also view the control as an interface element inserted into an ASP.NET web application. In our case, however, we are focusing exclusively on the Silverlight portion of the application, so the Windows Forms analogy is not too inappropriate, so long as you don’t take it overly literally, and so long as you remember that UserControls can be used for entirely different purposes in other contexts. You can create any type of custom control you want from a UserControl, but in this context, the UserControl is a container for your interface.

 Grids

 Inside the UserControl is a Grid. If you want, you can use this grid as the host for most of the controls in your program. You could, for instance, place a button inside it:

 <UserControlx:Class=”SilverlightApplication11.Page”    xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”    xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”    Width=”400″Height=”300″>

    <Gridx:Name=”LayoutRoot”Background=”White”> 

        <ButtonContent=”OK”/>       

    </Grid>

</UserControl>

This XAML code produces the following output:

 Figure01_2

Figure 01: A Grid control hosting an OK button.

This seems like a good start, but if you try to add another button, you will see that things don’t work out as you might have expected. Here is the code for adding a second button:

<UserControl x:Class=”SilverlightApplication11.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”>

        <Button Content=”OK”/>

        <Button Content=”Cancel”/>

    </Grid>

</UserControl>

 The output from this code looks like this:

  Figure02_2

Figure 02: A Grid control that hosts a Cancel button which obscures an OK button.

 

There is our Cancel button, as big as life. But what happened to the OK button? It appears to be obscured by the Cancel button. In other words, the Grid control is not allowing us to display two buttons at once, but instead is taking one button, and allowing it fill the entire interface. In same situations, this might be exactly what we want, but in this case it is working at cross purposes to our goal.

As you have no doubt surmised, the Grid control, as it is currently configured, will not produce the behavior we want. There are, in fact many ways to get the grid control to display multiple buttons. Here is one way:

 <Grid x:Name=”LayoutRoot” Background=”White”>

    <Grid.RowDefinitions>

        <RowDefinition></RowDefinition>

        <RowDefinition></RowDefinition>

    </Grid.RowDefinitions>

    <Button Grid.Row=”0″  Content=”OK”/>

    <Button Grid.Row=”1″ Content=”Cancel”/>

</Grid>

 This code defines two rows in the grid: one fills the top half of the grid, and the second fills the bottom half. We have added code to our Button declarations asking the Ok button to be hosted in Row 0, and the Cancel button to be hosted in Row 1. Here is the result:

 Figure03_2 

Figure 3: A Grid control with two rows. The first row hosts an OK button, the second a Cancel button.

 If you need columns, rather than rows, then use this code:

 <Grid x:Name=”LayoutRoot” Background=”White”>

    <Grid.ColumnDefinitions>

        <ColumnDefinition></ColumnDefinition>

        <ColumnDefinition></ColumnDefinition>

    </Grid.ColumnDefinitions>

    <Button Grid.Column=”0″  Content=”OK”/>

    <Button Grid.Column=”1″ Content=”Cancel”/>

</Grid>

 Here is the result:

 Figure04_2 

Figure 4: A Grid control with two columns, each of which hosts a button.

 If you want both rows and columns, then write code like this:

 <UserControl x:Class=”SilverlightApplication11.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.ColumnDefinitions>

            <ColumnDefinition></ColumnDefinition>

            <ColumnDefinition></ColumnDefinition>

        </Grid.ColumnDefinitions>

        <Grid.RowDefinitions>

            <RowDefinition></RowDefinition>

            <RowDefinition></RowDefinition>

        </Grid.RowDefinitions>

         <Button Grid.Column=”0″ Grid.Row=”0″ Content=”OK”/>

        <Button Grid.Column=”1″ Grid.Row=”0″ Content=”Cancel”/>

        <Image Grid.Column=”0″ Grid.Row=”1″ Source=”Images/BlueLight.png” />

        <Image Grid.Column=”1″ Grid.Row=”1″ Source=”Images/RedLight.png” />

    </Grid>

</UserControl>

 This interface produces four sections inside the grid. We could have left the two new spaces empty, but I thought it would be less confusing if I put something inside them. To keep the code simple, I’ve added two Image controls and placed two simple bitmaps in them. I then use both the Grid.Column and Grid.Row properties in the Button and Image controls to designate where I want the images and buttons to appear.

 Note that I store that Images in a directory called Images. You can create project directories of this type by writing clicking on your project in the Solution Explorer, and choosing Add | New Folder. After you copy the bitmaps into the Images directory, click the Show All Files button at the top of the Solution Explorer to make the bitmaps visible. Then right click on the images and explicitly add them to your project. When you are done, your work Solution Explorer might look something like this:

 Figure05_4 

Figure 5: Creating an Images directory that contains two bitmaps.

 Taken together, all of the XAML code shown in the previous examples produces the following results, where the blue and orange areas are the bitmaps that I stored in the Images directory:

 Figure06_1 

Figure 6: A Grid control with two rows and two columns. The control hosts two buttons and two images, one in each quadrant of the Grid.

 Summary

 That’s probably enough for this post. There is obviously a great deal more to be said about Grid controls in particular, and Silverlight interfaces in general, but this can serve as an introduction to the topic. The next article in this series will continue in this same vein, discussing, layouts, Grid controls, and StackPanels.

May 12, 2009 Posted by | Silver light Layouts Part, Silverlight Introduction, Technology | | Leave a comment

Silverligtht Versions

Version 1.0

 

Silverlight version 1.0 – scheduled for release this summer – is very comparable to Adobe Flash . It delivers high performance multimedia and animation capabilities that can blend seamlessly with HTML. It’s capable of playing a variety of audio and video file formats, such as MP3, WMA, and WMV. It handles streaming quite well, so media can start playing immediately without having to wait for the entire file to download.

 

Silverlight’s user interface is defined with a subset of XAML – an XML format shared with Windows Presentation Foundation (WPF). This facilitates vector based animations, a claim that goes beyond Flash’s current capabilities. Silverlight’s compiled object model can be navigated via JavaScript for seamless interaction between embedded Silverlight components and the page that hosts them.

 

When users encounter a Silverlight 1.0 enhanced web page for the first time, they’ll be prompted with the quick & easy installation that’s only about a 1.2 megabyte download.

 

Version 1.1

 

While the multimedia and animation capabilities of Silverlight 1.0 are certainly great for graphic designers, Silverlight version 1.1 (currently in alpha) starts to provide the kind of business oriented functionality that the majority of web developers need.

 

Probably the most exciting feature of version 1.1 is the built-in cross platform subset of the .NET Framework. While you can still mix in as much (or as little) JavaScript as you’d like, you’ll now have the option of running your own fully compiled .NET code within IE, Firefox, or Safari. Those developers who hate JavaScript should be thrilled to know they can now write their client side code in C#, VB.NET, or any other .NET language. This .NET code can interact with the browser’s object model so it can manipulate the page’s HTML in addition to interacting with any Silverlight user interface that may be embedded in the page. You’ll now be able to replace slow performing JavaScript code with fully compiled .NET code that could easily execute hundreds of times faster.

A variety of useful classes are included in Silverlight 1.1 for working with cutting edge technologies like LINQ, generics, multithreading, and invocation of Windows Communication Foundation (WCF) web services. There’s also support for XML manipulation, networking, I/O, collections, globalization, and JSON serialization.

 

ASP.NET support is also provided for things like personalization, profiles, role membership, and invocation of ASMX web services. On a related note, the next release of ASP.NET is expected to include a variety of tools for easing Silverlight development, including built-in controls that make it easy to embed Silverlight content.

 

Unfortunately there are currently no definite plans to include any significant number of controls in Silverlight 1.1 – not even a basic button control is currently in the mix. They do at least provide a control class that can be used to build your own controls, and alternately it’s not terribly difficult to make basic controls using XAML and some custom code – but certainly we’d prefer not to have to write such basic code. Luckily there are several controls available in the separate

 

Since Silverlight 1.1 is still only in alpha, its uncertain exactly what other functionality may ultimately make it into the release version. The current download size for this far more functional version of Silverlight hovers at around 4MB.

 

Future Versions

 

From my conversations with Silverlight mastermind Scott Guthrie and his merry band of genius underlings, they’ve got a lot of mouthwatering functionality planned for upcoming versions of Silverlight. General themes include a rich set of built-in controls, data binding support, XLINQ, RSS, Xml Serialization, Opera support, and improved layout management. And that’s just for starters.

In general the vision is to transform Silverlight from its current 1.0 state of multimedia powerhouse into a highly productive business tool capable of powering rich applications of virtually every kind.

 

Even with all this extra functionality, Silverlight’s team has a long term secret goal of keeping the download size under 5MB. Shhhh! Don’t tell anybody!

 

Development Tools

 

Currently the lack of polished tools for developing Silverlight applications is its biggest hindrance. The next version of Visual Studio (codenamed Orcas) is expected to ship with rich Silverlight support. However, the current beta version of Orcas clearly still needs a lot of work before achieving this goal. If you’re brave enough to be tinkering with the Orcas beta then you might as well download the Silverlight Tools Alpha add-on to try out its Silverlight development capabilities.

 

Microsoft’s new Expression suite of products is currently closer to being in a finished state. They are presently more polished and less buggy than Orcas. Specifically, Expression Blend is probably the most valuable Expression product for Silverlight development. However, be forewarned that the Expression suite is intended more for graphic designers than software developers. Therefore Visual Studio-oriented developers should expect a significant learning curve.

 

Summary

 

Silverlight is a brilliant idea that still has a ways to go before it reaches its potential. Nevertheless, it should definitely be on every web developer’s radar. It’s a distinct possibility that Silverlight could be the future of web development. Imagine a world where web developers no longer deal with HTML, and instead write rich, compiled .NET code that runs everywhere as ubiquitously as HTML does now. If Microsoft plays its cards right, this will happen.

 

April 5, 2009 Posted by | Silverlight Introduction, Technology, Uncategorized, Versions | | Leave a comment