Silverlight has many 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.
Silver light Controls (split in two to make it easier to view)
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.
Creating the First Example - A Grid with Controls
Open Visual Studio 2008 and click on Create Project and then in the new project window you'll want to create a C# project using the Silverlight Application Template.
Pick a location for your application and give it a meaningful name; be sure that you are building
against the latest framework.
Creating a New Silverlight Project
When you click OK you will next be asked if you'd like to generate a Web Site or a Web
Application (using the top radio button) or just a test page (using the bottom radio button) or if
you'd like to link to an existing web site; all as shown in the next figure.
Choose Simple HTML Test Page
Visual Studio create a simple application foryou. If Page.xaml doesn't open utomatically, double click on it in the Solution Explorer. You should find that Visual Studio has guessed that you want a grid as your main container, and has created one for you and named it LayoutRoot. (Also note that the very first declaration in each "page" is a UserControl.
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
In fact a Page is a UserControl, and we'll return to that relationship in a later tutorial.
The Grid definition created by Visual Studio 2008 looks like this:
Defining Rows and Properties
You define the Rows for a table inside the Grid.RowDefinitions element. For each Row, you add
a RowDefinition element, which itself may have various properties, including a specific height,
or if you prefer you may set the height to be proportional to the available space or to take all the
space not taken by other rows.
Height="Auto"With Auto, the Grid’s space is distributed evenly based on the size of the content within the row.
Star or Proportional Sizing
In proportional sizing the value of a column or row is expressed in Xaml as *.
ration by using 5* and 7*).
If you combine this with a Minimum or Maximum Height you get finer control over the limits of
the row's range of sizes,
Minimal or Controlled space
By default child elements of grid take up the least amount of space necessary to to accommodate
the largest content within a cell in a given row or column. You can take greater control over
positioning, however, by using the margin and alignment properties as described below
Sizing Units
To provide the most flexibility, Grid columns and rows are sized by GridLength objects which use the GridUnitType, which in turn allows you to choose among:
• Auto (size based on the size properties of the object being placed in the grid)
• Pixel (size in pixels)
• Star (size based on a weighted proportion of the available space)
designating, if we choose, the minimum and maximum dimensions of each.
To see the effect of all this we'll create five rows using different sizing rules. We'll also create
three columns with no sizing rules at all (!). We'll then fill our grid with controls and take a look
at some of the effects. Here is the code, which we'll take apart piece by piece.
The Xaml for EasyGrid
The result of the Xaml code is shown in
The Xaml as Design
First, it is important to understand that the Xaml shown in 1st Example is all that is needed to
produce the Silverlight control shown in all Figure. It is true that you can't see the rows and
columns, but that is easily remedied. Find the declaration of the Grid and set its ShowGridLines
property to True (Intellisense will help as shown inFigure 1-5
Adding Property ShowGridLines and setting it True
When you do, the grid lines become visible; which can be very useful during design, as long as
you remember to set the property to false before you post your Silverlight application!
ShowGridLines Makes The Alignment Very Visible
Unpacking the Xaml
The first lines create the Grid and define how the rows will share the space.
As described above, the RowDefinitions define five rows. The first has a fixed height of 50. The
second and third will float, but in a 3:4 proportion with one another, but each with a maximum
height of 70. The next row will take all the remaining space, but will never be allowed to shrink
to less than 30 nor grow to more than 50. The final row will size itself to the object placed in the
row, but yet is constrained to no less than 5 and no more than 30.
After the column definitions we define a TextBlock and a TextBox. We'll discuss these controls
in more depth later, but the former is typically used as a label and the latter is used to allow the
user to put in text.
Grid.Row="0"
Grid.Column="0"
Text="First Name:"
Margin="5"/>
The TextBlock has five parameters. They can be aligned one below the other, or strung out all in
a line, any way you like. The first parameter is the name (FirstNamePrompt) and is used to
allow you to address the object in code. If you give an object in Xaml a name, and save the file,
that object is available with no further declaration in your methods
Thus, if you save this file, you will be free to write
FirstNamePrompt.Text=”Hello”
From any method of this class and the compiler will know exactly what you mean!
The Grid.Row and Grid.Column properties are called extended properties and are really
"borrowed" from the immediately surrounding grid to position the TextBlock inside the
appropriate cell.
The Text property does just what you expect, it fills the TextBlock with that text.
Margin is a fascinating property, and we'll return to it a couple times. For now, I'll mention that it
takes three forms:
• A single value, which gives a margin of that value "all around" - that is left, right, top and
bottom
• Two values in which case the first is divided evenly among the left and right margin and
the second is divided evenly among the top and bottom
• Four values, in the order Left, Top, Right, Bottom.
The TextBlock label in the first column is followed by an (input) TextBox in the second column.
The properties are very similar except that you must declare the width of your TextBox and we
choose here to give the TextBox a background color.
The next pair are much like the first.
The third row is filled by a TextBlock and two CheckBox controls. Note that they are aligned by
setting their VerticalAlignment properties and that the first CheckBox has its IsChecked property
set to True so it will be checked when the page is first shown.
The fourth row has a TextBlock that displays Hello and the final row has a TextBlock that
displays World, but does so setting the FontFamily, FontSize and FontWeight.
By:
Usama Wahab Khan and Atif Shahzad
Sr.Software Developer
0 comments:
Post a Comment