Sunday, 25 April 2010

Silverlight Layout Controls

$ at Go Daddy  - 728x90

Layout Controls

The use of layout controls is both straight-forward and essential to the creation of Silverlight applications. Layout controls are used to manage the placement of other controls (including other layout controls!) in your Silverlight application. You can think of the layout controls as "containers."

Silverlight and WPF support a flexible layout management system that enables developers and designers to easily coordinate how controls are positioned within a UI surface. This layout system supports both a fixed position model where controls are positioned using explicit coordinates, as well as a more dynamic position model where layout and controls can be automatically sized and flowed as the browser resizes.

The three Layout controls you'll use most often are:

  • Grid - essentially a table used for positioning objects in rows and columns.
  • StackPanel - used to position objects next to one another, or atop one another.
  • Canvas - used for absolute positioning (and unchanged from Silverlight 1.0)

They are listed in the order of how frequently they are used. And to be honest, if you learn Grid and StackPanel, you can probably program for a long time on just those two.

Grids (not to be confused with DataGrids) offer easy and exact placement by providing a table-like structure. You declare rows and columns, and then place controls into a specific row/column location (spanning across rows or columns as needed).

The Grid control is the most flexible layout panel, and supports arranging controls in multi-row and multi-column layouts. It is conceptually similar to an HTML Table element.

Unlike an HTML Table, you don't embed controls within column and row elements. Instead you specify a Grid's Row and Column definitions using and properties that are declared immediately under the control. You can then use the XAML "Attached Property" syntax on controls contained within the grid to indicate which Grid row and column they should be populated within.

While you can tweak your grids to achieve very precise placement, the basic use of grids is extremely straight forward.

For example, we could declare a Grid layout has three rows and three columns, and then position 4 buttons within it using XAML like below:

The Grid layout panel would then position the Button elements for us like so:


The StackPanel control is a simple layout panel that supports positioning its contained controls in either a row or column layout. StackPanels are typically used in scenarios where you want to arrange a small subsection of the UI on your page.

StackPanels are typically combined with other layout controls. They allow you to stack objects one on top of the other, or next to each other (like books on a shelf).

One convenience of a StackPanel is that you do not have to provide the position of the objects held by a StackPanel, they are positioned relative to the object declared earlier in the Stack.

For example, we could use the StackPanel to vertically arrange three buttons on our page using XAML markup like below:

At runtime the StackPanel would then automatically arrange the Button controls in a vertical stack for us like below:

Canvas Panel
The Canvas panel is a pretty basic layout panel that supports positioning controls contained within it using explicit coordinates.

You position elements in a Canvas using a XAML feature called "Attached Properties" - which allow you to specify a control's position relative to its immediate parent Canvas control's Left, Top, Right or Bottom coordinates. Attached properties are useful as they allow a parent panel to extend the property set of a control contained within it. Canvas, by defining an attached property for “Top” and ”Left” basically adds the ability to define left and top attachment on Button (or any other UI element that is added to the Canvas), without any need to actually add a property to the Button class, or modify the Button class in any way.

We could add two buttons to a Canvas container, and position them both 50 pixels from the left of the Canvas, and 50 and 150 pixels from the top using XAML like below (the Canvas.Left and Canvas.Top attributes are examples of the attached property syntax):

This would then render our buttons like below:



Silverlight 4 Lab Intensive Skills Training

Professional Visual Studio 2010 (Paperback)

C Sharp 4.0 in a Nutshell

Silverlight Controls Overview
Silverlight has over 3 dozen User Interface (UI) controls. .NET programmers already familiar with ASP.Net or (especially) WPF, will find using the Silverlight controls very natural and straight forward.
Figure 1-1. Silverlight Controls (split in two to make it easier to view)

Silverlight controls were created to look great and provide extensive and customizable functionality right out of the box. Moreover, all of the standard controls can be modified in numerous ways to meet your needs.

The look and feel of the control can be tweaked through styles or can be entirely redesigned through templates, and the behavior of the controls can be modified through event handlers. In the rare cases when none of that is enough, you can create (or derive) your own customized controls as well.

Silverlight Controls basically can be divided into:Layout Controls, Input Controls, Media Controls and Other Controls.



Silverlight 4 Lab Intensive Skills Training

Professional Visual Studio 2010 (Paperback)

C Sharp 4.0 in a Nutshell

Thursday, 22 April 2010

How Silverlight would change the Web

  1. Highest Quality Video Experience : prepare to see some of the best quality videos you have seen in your life, all embedded in highly graphical websites. The same research and technology that was used for VC-1, the codec that powers BluRay and HD DVD, is used by Microsoft today with its streaming media technologies.
  2. Cross-Platform, Cross-Browser : Finally build web applications that work on any browser, and on any operating system. At release, Silverlight will work with Mac as well as Windows! The Mono project has also already promised support for Linux!.
  3. Developers and Graphic Designers can play together! : Developers familiar with Visual Studio, will be able to develop amazing Silverlight applications very quickly, and they will work on Mac's and Windows. Developers will finally be able to strictly focus on the back end of the application core, while leaving the visuals to the Graphic Design team using the power of XAML.
  4. Cheaper : Silverlight is now the most inexpensive way to stream video files over the internet at the best quality possible. Licensing is dead simple, all you need is IIS in Windows Server, and you’re done.
  5. Support for 3rd Party Languages : Using the power of the new Dynamic Language Runtime, developers will now be able to use Ruby, Python, and EcmaScript! This means a Ruby developer can develop Silverlight applications, and leverage the .net Framework!
  6. Cross-Platform, Cross-Browser Remote Debugging : If you are in the need to debug an application running on a Mac, no problem! You can now set breakpoints, step into/over code, have immediate windows, and all that other good stuff that Visual Studio provides.
  7. The best development environment on the planet : Visual Studio is an award winning development platform! As it continues to constantly evolve, so will Silverlight!
  8. Silverlight offers copy protection : Have you noticed how easy it is to download YouTube videos to your computer, and save them for later viewing ? Silverlight will finally have the features enabling content providers complete control over their rich media content! Streaming television, new indie broadcast stations, all will now be possible!
  9. Extreme Speed :There is a dramatic improvement in speed for AJAX-enabled websites that begin to use Silverlight, leveraging the Microsoft .net framework.
  10. Built to allow Mashups :Microsoft spent a lot of time enabling Silverlight to easily consume web services, and easily consume various services and data from around the web. Silverlight supports LINQ and LINQ-to-XML. All of this data can be easily accessed via RSS, POX, REST, and JSON


Silverlight 4 Lab Intensive Skills Training

Professional Visual Studio 2010 (Paperback)

C Sharp 4.0 in a Nutshell

Friday, 9 April 2010

What is Silverlight

Silverlight is a powerful development platform for creating rich media applications and business applications for the Web, desktop, and mobile devices.

Based on the Microsoft .NET framework, the free Silverlight plug-in works across multiple browsers, devices and operating systems to bring new interactivity to the Web. With extensive layout and styling options, powerful communication protocols, robust data access, and support for user interaction and high-definition media, Silverlight helps create fast, smooth, and visually rich customer experiences. Silverlight applications can be developed quickly with the Microsoft Web Platform, Visual Studio, and Expression Studio.

Compelling Experiences

Deliver compelling, exciting, experiences on the Web, with home theater-quality video and exceptional interactivity.

Engage users longer and make the most of your content with interactive features and high-definition streaming video delivered through live and on-demand IIS Smooth Streaming.

Build user “buzz” and differentiate yourself with innovative capabilities, such as Deep Zoom, which pushes the boundaries of interactivity and provide new ways to present your brand.

Powerful Technology

Build on Microsoft’s industrial-strength application development tools and a platform that promotes stability, scalability, reliability, and performance.

Create cross-platform applications that are accessible, secure, and discoverable by search engines through all major browsers on Mac, Windows, and Linux operating systems.

Extend browser experiences to the desktop and devices with innovative tools, servers and frameworks.

Enhanced Results

Grow your business, your productivity, and your profitability with technology and tools that deliver exceptional value and accommodate the business model that fits your company best.

Call on millions of existing developers and thousands of businesses already familiar with .NET development to help create and deploy Silverlight applications.

Create rich Web-based applications that quickly integrate with your existing back-end systems. Easily enhance existing Web and SharePoint sites by incrementally adding Silverlight components.



Silverlight 4 Lab Intensive Skills Training

Professional Visual Studio 2010 (Paperback)

C Sharp 4.0 in a Nutshell

About Me

Cairo, Egypt
Senior Software Developer tel: +20108054772