حرصًا من إدارة موقع الشيخ نـاصر بن علي القطـامي تم تفعيل البث المباشر لصلاة العشـاء والتراويح من جـامع القاضي عبر الموقع الرسمي وبـدقة عالية . من خلال الرابط التالي :

http://www.alqtami.com/live

علمــا أن موعـد البـث الســاعة 8:25 إلــى السـاعة 10 مساء

بتــوقيت مكة المكرمة .

رابط الخبر

Silverlight Tutorial Part 5: Using the ListBox and DataBinding to Display List Data

This is part five of eight tutorials that walk through how to build a simple Digg client application using Silverlight 2. These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight. Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content.

<Download Code> Click here to download a completed version of this Digg client sample. </Download Code>

Displaying our Digg Stories using the ListBox and DataBinding

Previously we’ve been using the DataGrid control to display our Digg stories. This works great when we want to display the content in a column format. For our Digg application, though, we probably want to tweak the appearance a little more and have it look less like a DataGrid of stories and more like a List of them. The good news is that this easy – and it doesn’t require us to change any of our application code to accomplish this.

We’ll start by replacing our DataGrid control with a <ListBox> control. We’ll keep the control name the same as before ("StoriesList"):

When we run our application again and search for stories, the ListBox will display the following results:

You might be wondering – why is each item "DiggSample.DiggStory"? The reason for this is because we are binding DiggStory objects to the ListBox (and the default behavior is to call ToString() on them). If we want to display the "Title" property of the DiggStory object instead, we can set the "DisplayMemberPath" property on the ListBox:

When we do this the Title will be what is displayed in the ListBox:

If we want to show more than one value at a time, or customize the layout of each item more, we can override the ListBox control’s ItemTemplate and supply a custom DataTemplate. Within this DataTemplate we can customize how each DiggStory object is displayed.

For example, we could display both the DiggStory Title and NumDiggs value using a DataTemplate like below.

We can databind any public properties we want from our DiggStory object within the DataTemplate. Notice above how we are using the {Binding Path=PropertyName} syntax to accomplish this with the two TextBlock controls.

With the above DataTemplate in place, our ListBox will now display its items like below:

Let’s then go one step further and change our DataTemplate to the one below. This DataTemplate uses two StackPanels – one to stack row items horizontally, and one to stack some textblocks together vertically:

The above DataTemplate causes our ListBox to display items like the screen-shot below:

when we define the following Style rules in our App.xaml (note how we are using a LinearGradientBrush to get the nice yellow gradient background on the DiggPanel):

One important thing to notice about our ListBox – even though we have customized what the items in it look like, it still automatically provides support for hover and item selection semantics. This is true both when using the mouse and when using the keyboard (up/down arrow keys, home/end, etc):

The ListBox also supports full flow resizing – and will provide automatic scrolling of our custom content when necessary (notice how the horizontal scroll bar appears as the window gets smaller):

Next Steps

We’ve now switched our data visualization to be List based, and cleaned up the content listing of it.

Let’s now complete the last bits of the functionality behavior in the application – and implement a master/details workflow which allows end-users to drill into the specifics of a story when they select an article from the list. To-do that let’s jump to our next tutorial: Using User Controls to Implement Master/Detail Scenarios.

Published Friday, February 22, 2008 5:51 AM by ScottGu

Silverlight Tutorial Part 4: Using Style Elements to Better Encapsulate Look and Feel

This is part four of eight tutorials that walk through how to build a simple Digg client application using Silverlight 2. These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight. Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content.

<Download Code>Click here to download a completed version of this Digg client sample. </Download Code>

Using Style Elements to Better Encapsulate Look and Feel

WPF and Silverlight support a Style mechanism that allows us to encapsulate control property values as a reusable resource. We can store these style declarations in separate files from our pages, and re-use them across multiple controls and pages in an application (as well as re-use them across multiple applications). This is conceptually similar to using CSS with HTML when doing basic customization scenarios.

Note: In addition to defining basic property settings (Color, Font, Size, Margins, etc), styles in WPF and Silverlight can also be used to define and re-use Control Templates – which enable super rich skinning and adaptation of control structure (and support customization scenarios not possible with CSS in HTML today). I discuss Control Templates in Part 7 of this series.

For our Digg sample application we’ll define our Style declarations within the App.xaml file of our project. This will enable them to be reused across all pages and controls in the application:

Let’s start by encapsulating styles for the <Border> control (and the <TextBlock> title contained within it) of our Digg page:

We can create two Style elements within our App.xaml file that encapsulate the <Border> and <TextBlock> settings we were previously declaring inline using the markup below:

Note how we are giving each Style a unique "Key" value above. We can then update our <Border> and <TextBlock> controls to reference the Styles using these keys. We’ll be using a XAML feature called "markup extensions" to do this. Markup extensions are used when there are non-literal values that we want to set (another example of where we’ll use this feature is with databinding expressions).

When we update the other controls within our Page.xaml file to use styles as well, we are left with a file that looks like below:

Encapsulating the style settings this way allows developers to better focus on the behavior semantics of the application, and also enables us to re-use styles across other controls/pages we build.

Next Steps

Now that we’ve cleaned up the markup of our Page.xaml file using Style references, let’s go one step further and customize the appearance of our Story data more.

To-do that let’s jump to our next tutorial: Using the ListBox and Databinding to Display List Data.

Silverlight Tutorial Part 4: Using Style Elements to Better Encapsulate Look and Feel

This is part four of eight tutorials that walk through how to build a simple Digg client application using Silverlight 2. These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight. Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content.

<Download Code> Click here to download a completed version of this Digg client sample. </Download Code>

Using Style Elements to Better Encapsulate Look and Feel

WPF and Silverlight support a Style mechanism that allows us to encapsulate control property values as a reusable resource. We can store these style declarations in separate files from our pages, and re-use them across multiple controls and pages in an application (as well as re-use them across multiple applications). This is conceptually similar to using CSS with HTML when doing basic customization scenarios.

Note: In addition to defining basic property settings (Color, Font, Size, Margins, etc), styles in WPF and Silverlight can also be used to define and re-use Control Templates – which enable super rich skinning and adaptation of control structure (and support customization scenarios not possible with CSS in HTML today). I discuss Control Templates in Part 7 of this series.

For our Digg sample application we’ll define our Style declarations within the App.xaml file of our project. This will enable them to be reused across all pages and controls in the application:

Let’s start by encapsulating styles for the <Border> control (and the <TextBlock> title contained within it) of our Digg page:

We can create two Style elements within our App.xaml file that encapsulate the <Border> and <TextBlock> settings we were previously declaring inline using the markup below:

Note how we are giving each Style a unique "Key" value above. We can then update our <Border> and <TextBlock> controls to reference the Styles using these keys. We’ll be using a XAML feature called "markup extensions" to do this. Markup extensions are used when there are non-literal values that we want to set (another example of where we’ll use this feature is with databinding expressions).

When we update the other controls within our Page.xaml file to use styles as well, we are left with a file that looks like below:

Encapsulating the style settings this way allows developers to better focus on the behavior semantics of the application, and also enables us to re-use styles across other controls/pages we build.

Next Steps

Now that we’ve cleaned up the markup of our Page.xaml file using Style references, let’s go one step further and customize the appearance of our Story data more.

To-do that let’s jump to our next tutorial: Using the ListBox and Databinding to Display List Data.

Silverlight Tutorial Part 3: Using Networking to Retrieve Data and Populate a DataGrid

This is part three of eight tutorials that walk through how to build a simple Digg client application using Silverlight 2. These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight. Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content.

<Download Code>Click here to download a completed version of this Digg client sample. </Download Code>

Using Networking to Retrieve Digg Stories

Silverlight 2 has built-in networking APIs that enable Silverlight clients to call remote REST, SOAP/WS*, RSS, JSON and XML HTTP services. Silverlight 2 also includes a built-in sockets API (System.Net.Sockets) that enables Silverlight clients to communicate over non-HTTP protocols (ideal for scenarios like chat servers, etc).

Cross Domain Network Access

Silverlight 2 applications can always call back to their "origin" server when making network calls (meaning they can call URLs on the same domain that the application was downloaded from). Silverlight 2 applications can also optionally make cross-domain network calls (meaning they can call URLs on different domains from where the application was downloaded from) when the remote web server has an XML policy file in place that indicates that clients are allowed to make these cross-domain calls.

Silverlight 2 defines an XML policy file format that allows server administrators to precisely control what access a client should have. Silverlight 2 also honors the default Flash cross domain policy file format – which means that you can use Silverlight 2 to call any existing remote REST, SOAP/WS*, RSS, JSON or XML end-point on the web that already enables cross-domain access for Flash clients.

Digg.com has a pretty cool set of Digg APIs that they publish over HTTP. Because they have a Flash cross-domain policy file in place on their server, we can call them directly from our Silverlight Digg client application (and not require us to tunnel back through our web-server to reach their APIs).

Digg.com Topic Feed API

We want to enable end-users using our application to type in a search topic (for example: "Programming") and then click the "Search" button to pull back the top stories from Digg.com that match it:

We can use the Digg.com List Stories REST API feed API to-do this. It takes a topic parameter in its URL (for example: GET /stories/topic/programming), and then returns back an XML payload of Digg stories that match that topic. Click here to see an example of what this XML looks like.

Using System.Net.WebClient to Asynchronously Call the Digg REST Feed

When the SearchButton is clicked above, we’ll handle its "Click" event, retrieve the topic string to search for from the TextBox control, and then initiate a network call to Digg to retrieve the XML listing for that topic.

Silverlight includes the WebClient helper class within the System.Net namespace (this is also in the full .NET Framework). We can use this class to asynchronously download content from a URL. The benefit of downloading our Digg stories asynchronously is that our UI will not block or become unresponsive while waiting on the remote server (allowing us to have a very fluid user experience).

All we need to-do to perform an async download with the WebClient class is to register a "DownloadStringCompleted" event handler method that will be invoked once the requested content has been downloaded, and then call the WebClient.DownloadStringAsync(url) helper method to initiate the download:

And with the code above we can now asynchronously retrieve a string of XML data that contains the Digg stores about any topic a user wants.

Using LINQ to XML to Parse Digg XML Stories into Story Classes

Now that we can retrieve an XML snippet back of Digg story data, our next step will be to parse and convert it into "DiggStory" objects that we can manipulate and databind our controls against.

We’ll do this by first defining a "DiggStory" class that has properties that map to the XML content from Digg (we’ll take advantage of the new C# "automatic properties" feature to-do this):

We can then use LINQ (which is built-into Silverlight 2) and LINQ to XML (which is an extra library we can include with our Silverlight application) to easily parse and filter the XML document that was returned from Digg, and translate it into a sequence of "DiggStory" objects using the code below:

Notice above how we now have strongly typed DiggStory objects from our XML that we can work against.

Displaying our Digg Stories in a DataGrid Control

We’ll use the Silverlight DataGrid control to display the Digg stories in our application. To enable this we’ll reference the Silverlight Data controls assembly, and then replace our previous "Todo" text on the page with a DataGrid control declaration (note: you can double click on the "datagrid" control in the toolbox to automatically add one to the page):

The DataGrid allows you to explicitly configure column declarations and display types (for maximum control). Alternatively if you do not specify these, the DataGrid control will use reflection on its datasource to create default columns for you based on the schema of your objects.

We’ll then update our code-behind class to programmatically bind the "ItemSource" property of the DataGrid to the sequence of stories we receive back from Digg when the search button is clicked:

And now when we run our Silverlight application and do a search, we’ll see a listing of live topic story data pulled from Digg:

The Silverlight Datagrid supports all the standard features you expect with a client-side grid control: two way in-place editing, selection, scrolling, column resizing, column re-ordering, etc. It also supports auto-flow layout, which means it can dynamically expand or shrink to fill the content container it is in. The DataGrid also has a rich templating model that allows you to customize both the display and editing of column data.

Next Steps

We can now retrieve Digg story data from Digg.com and display the story data within our application.

Our next step will be to go back to our Page.xaml markup and remove the in-line style declarations we are currently using there.

To-do that let’s jump to our next tutorial: Using Style Elements to Better Encapsulate Look and Feel.

Silverlight Tutorial Part 1: Creating "Hello World" with Silverlight 2 and VS 2008

This is part one of eight tutorials that walk through how to build a simple Digg client application using Silverlight 2. These tutorials are intended to be read in-order, and help explain some of the core programming concepts of Silverlight.

<Download Code>Click here to download a completed version of this Digg client sample. Bookmark my Silverlight 2 Reference page for more of Silverlight posts and content. </Download Code>

Creating a New Silverlight Application using VS 2008

We’ll start our Digg application by selecting the File->New Project menu item within Visual Studio 2008 or Visual Web Developer 2008 Express (which is free) and use the New Project dialog to create a "Silverlight Application" (note: you will need to download and install the Silverlight Tools for VS 2008 release to get this support):

We’ll name the project "DiggSample". When we click the "OK" button Visual Studio will prompt us with an additional dialog that allows us to choose whether we want to create just a Silverlight Application project, or optionally also add a server-side ASP.NET Web project to our solution to host the Silverlight Application within. For this sample we’ll choose to add an ASP.NET Web Application project to the solution as well and name it "DiggSample_WebServer". When we click "ok" Visual Studio will create a solution for us that has both a Silverlight client application and an ASP.NET web server application in it:

When we do a "build" Visual Studio will automatically copy the compiled Silverlight application to our web server project (no manual step or configuration required). The default web server project that VS created for us contains both an ASP.NET page and a static HTML page that we can use to run and test our Silverlight Application within.

Note: Silverlight Applications can be used with any web-server (including Apache on Linux) and hosted within static HTML files or any server-side generated page (including PHP, Java, Python, Ruby, etc). For this Digg sample we won’t be writing any server-side code – we’ll instead use the cross-domain networking feature of Silverlight to access the Digg service API directly. I chose to create the ASP.NET web server project mainly to get automatic deployment and use its built-in web-server for testing.

Understanding What Is In a Silverlight Application

By default a newly created Silverlight application project contains a Page.xaml and App.xaml file, as well as code behind class files (which can be written in VB, C#, Ruby or Python) that are associated with them:

XAML files are XML text files that can be used to declaratively specify the UI of a Silverlight or WPF application. XAML can also be used more broadly to declaratively represent .NET objects.

The App.xaml file is typically used to declare resources, such as brush and style objects that are shared across the application. The Application code-behind class for the App.xaml file can be used to handle application level events – like Application_Startup, Application_Exit and Application_UnhandledException.

The Page.xaml file is by default the initial UI control that is loaded when the application activates. Within it we can use UI controls to define our user interface, and then handle events off of them within the Page code-behind class (much more on this later).

When we build our DiggSample project, Visual Studio will by default compile the code and .XAML markup into a standard .NET assembly file, and then package it and any static resources (like images or static files we want to include in it) into a "DiggSample.xap" file on disk:

".xap" files (pronounced "zap") use the standard .zip compression algorithm to minimize client download size. A "hello world" .NET Silverlight application (built using VB or C#) is about 4KB in size.

To host and run a Silverlight 2 application, you can add an <object> tag into any standard HTML page (no JavaScript required) that points to the .xap file. Silverlight will then automatically download the .xap file, instantiate it, and host it within that HTML page in the browser. This works cross browser (Safari, FireFox, IE, etc) and cross platform (Windows, Mac, and Linux).

Test HTML and ASP.NET pages (containing the <object> tag reference that points to our Silverlight application) were automatically added for us when we created our project – which means we can just hit F5 to build, run and test it.

Learning how to Add Controls and Handle Events

Right now our Digg application doesn’t do anything, and when it is run it brings up an empty page.

We can change this by opening up the Page.xaml file in the project and adding some content to it:

We’ll begin by changing the background of the grid and by declaring a Button control within it. We’ll give the button an "x:Name" attribute value of "MyButton" – which will allow us to programmatically reference it within our code-behind class. We’ll also set its Content, Width and Height properties:

When we run the application our button will then show up in the middle of the page with "Push Me" content text like below:

To add behavior to our button we can add a "Click" event handler to it. We can do this in source view by typing the event name:

Which will then prompt us for the event handler in our code-behind class to use:

We can then either type a new event handler method name to use, or optionally just press the enter key to name the event handler method using the default naming convention:

VS will then automatically create a stub event handler implementation in our code-behind class file. We can use this event handler to update the Button’s content with a new message when it is clicked:

After making the change above we can re-run the application and push the button again, and now its content is updated with a "Pushed!" message:

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.

This tutorial will cover event handlers. Styles, Templates and Custom Controls will be covered in future tutorials. .

A Note On The Design Surface

The current Visual Studio design surface is read-only. That is, you can drag and drop controls into the markup (or write the Xaml by hand) and the effects are seen immediately in the design surface, but you cannot yet drag or otherwise manipulate controls directly in design mode.

That is a temporary limitation. For now, one alternative is to use Expression Blend, and we have a full tutorial on Blend for Programmers that shows how to work with the two environments together.

Note that controls can also be created dynamically (in code, at run time) as explained at the end of this tutorial.

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."

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

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).

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

You typically declare a grid, declare its rows and columns and then start placing controls into specific cells (e.g., column 1, row 3). To see this at work, let’s create our first Silverlight Application: Easy Grid.

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.

Figure 1-2. Creating A New Silverlight Project (Click to view full-size image)

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.

Figure 1-3. Choose Simple HTML Test Page

If you create just a test page, the project is kept very simple, but if you generate a Web Site or Web Application Project, then Visual Studio creates two projects in your new solution; the Silverlight Application and a test application; excellent for test-based programming but more than we need right now.

Choose the second radio button (Test Page) and let Visual Studio create a simple application for you. If Page.xaml doesn’t open automatically, 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.

<UserControl x:Class="EasyGrid.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
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:

<Grid x:Name="LayoutRoot" Background="White">
</Grid>

Many times, your entire application will go between the opening and closing Grid tags; other times you’ll replace the Grid with another container.

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.

<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />
<RowDefinition Height="Auto" MinHeight="5" MaxHeight="30" />
</Grid.RowDefinitions>
</Grid>

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 *.

<RowDefinition Height="*"

However, you can give twice the space to one column or row as another by using 2* (or a 5:7 ration by using 5* and 7*).

<RowDefinition Height="30*"
<RowDefinition Height="40*"

If you combine this with a Minimum or Maximum Height you get finer control over the limits of the row’s range of sizes,

<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />

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.

Example 1-1. The Xaml for EasyGrid

<UserControl x:Class="EasyGrid.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.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />
<RowDefinition Height="Auto" MinHeight="5" MaxHeight="30" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>

<TextBlock x:Name="FirstNamePrompt "
Grid.Row="0" Grid.Column="0" Text="First Name:" Margin="5"/>
<TextBox x:Name="FirstName"
Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2"
Width="150" Background="Bisque" Margin="5" />

<TextBlock x:Name="LastNamePrompt "
Grid.Row="1" Grid.Column="0" Text="First Name:" Margin="5"/>
<TextBox x:Name="LastName"
Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="2"
Width="150" Background="Beige" Margin="5" />

<TextBlock x:Name="SubscriberPrompt"
Grid.Row="2" Grid.Column="0"
Text="Subscriber?" VerticalAlignment="Bottom" />
<CheckBox x:Name="PlanA" Grid.Row="2" Grid.Column="1"
Content="Plan A" IsChecked="true"
VerticalAlignment="Bottom" />
<CheckBox x:Name="PlanB" Grid.Row="2" Grid.Column="2"
Content="Plan B" VerticalAlignment="Bottom" />

<TextBlock x:Name="Hello" Text="Hello"
Grid.Row="3" Grid.Column="2" VerticalAlignment="Bottom"/>

<TextBlock x:Name="World" Text="World"
Grid.Row="4" Grid.Column="2" VerticalAlignment="Bottom"
FontFamily="Comic Sans MS" FontSize="24"
FontWeight="Bold" Margin="0,20,0,0"/>
</Grid>
</UserControl>

The result of the Xaml code is shown in

Figure 1-4. The Xaml as Design

First, it is important to understand that the Xaml shown in Example 1-1 is all that is needed to produce the Silverlight control shown in Figure 1-4. 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

Figure 1-5. Adding Property ShowGridLines and setting it True (Click to view full-size image)

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!

Figure 1-6. ShowGridLines Makes The Alignment Very Visible (Click to view full-size image)

Unpacking the Xaml

The first lines create the Grid and define how the rows will share the space.

<Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True" >
<Grid.RowDefinitions>
<RowDefinition Height="50" />
<RowDefinition Height="30*" MaxHeight="70" />
<RowDefinition Height="40*" MaxHeight="70" />
<RowDefinition Height="*" MinHeight="30" MaxHeight="50" />
<RowDefinition Height="Auto" MinHeight="5" MaxHeight="30" />
</Grid.RowDefinitions>

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.

<TextBlock
x:Name="FirstNamePrompt "
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.

StackPanels

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..

In the following example, you will stack a TextBlock on top of a TextBox which in turn will sit on top of a Button that will sit on top of a CheckBox (shades of Yertle the Turtle!)

<StackPanel Background="Beige" Orientation="Vertical" >
<TextBlock Text="Your name?"
HorizontalAlignment="Left" Margin="10,2,0,1"/>
<TextBox Width="150" Height="30"
HorizontalAlignment="Left" Margin="10,2,0,1"/>
<Button Content="Submit this information"
HorizontalAlignment="Left"
Margin="10,2,0,1" Height="30" Width="150" />
<CheckBox Content="With Zing!" HorizontalAlignment="Left"
Margin="10,2,0,1" />
</StackPanel>

There is quite a bit of information in this code snippet, so let’s unpack it piece by piece.

The top and bottom lines show the declaration of the StackPanel in the Xaml file. The StackPanel is declared with two attributes: a BackgroundColor (Beige) and an Orientation (which must be either Vertical or Horizontal).

There are many other attributes you can set, as will be true for nearly all the controls These, along with the methods are conveniently listed in the documentation,

Figure 1-7. Documentation Showing Stack Panel Members (Click to view full-size image)

By setting the Orientation to Vertical we are stacking its contents one on top of another rather than side by side.

Within the StackPanel, the four objects are declared, and the order of their declaration will determine the order in which they are stacked. Each is set with its TextAlignment property set to Left so that they will align, and each has its Margin property set. Let’s dig just a bit deeper into the Margin property by looking up its definition in the documentation,

public Thickness Margin { get; set; }

The Margin property is actually an object of type Thickness. As noted earlier, when you are declaring a Thickness object in Xaml you may do so in one of three ways:

First, you may provide a double that will be the margin for the margin on all four sides (left, top, right, and bottom) uniformly around the object. Thus, you might write

<Button Content="Submit this information"
HorizontalAlignment="Left"
Margin="100" Height="30" Width="150" />

Thereby isolating the button with a margin of 100 on either side and above and below,

Figure 1-8. Button Margins

Notice that to accommodate the oversided margin, the width of the button was compromised!

The second way to declare a Thickness (and in this case, a Margin) is to provide the sum of the sides and the sum of the top and bottom (thus, the sides must be equal and the top and bottom must be equal,

<Button Content="Submit this information"
HorizontalAlignment="Left"
Margin="50,20" Height="30" Width="150" />

The effect of this declaration is that the left and right margins are 25, and the top and bottom margins are each 10.

Finally, you may declare each independently, as long as you do so in the required order:

Figure 1-9. Margins are a Thickness Object

That is: Left, Top, Right, Bottom; or in this case, the Left margin is 10, the Top margin is 2, the Right margin is 0 and the Bottom margin is 1.

Once the four controls are placed in the stack Panel, and aligned, the stack panel is responsible for their placement,

Figure 1-10. Stack Panel At Work

Notice that the StackPanel is responsible for its own background color, and for stacking its contents (the four controls) but each control is responsible for its own alignment and margins.

Horizontal Stack Panels

If we want to shift the stack panel to align all the controls into a single row, we’ll want to make a few additional changes. Not all controls default to aligning in the same way (top, center or bottom) so we’ll explicitly set their vertical alignment to "Center," just as we previously set their horizontal alignment to "Left". Let’s also set the margins to provide a bit of space between each object as the default is to abut each object.

<StackPanel Background="Beige" Orientation="Vertical" >
<TextBlock Text="Your name?"
HorizontalAlignment="Left" Margin="10,2,0,1"/>
<TextBox Width="150" Height="30"
HorizontalAlignment="Left" Margin="10,2,0,1"/>
<Button Content="Submit this information"
HorizontalAlignment="Left"
Margin="10,2,0,1" Height="30" Width="150" />
<CheckBox Content="With Zing!" HorizontalAlignment="Left"
Margin="10,2,0,1" />
</StackPanel>

Note that I set the left margin on the text box to 5 (rather than 10) to bring it a bit closer to the TextBlock that serves as its label.

Figure 1-11. Stack Panel in Horizontal Orientation (Click to view full-size image)

Control Events and Event Handlers

In Silverlight each class declares whether it is supported by managed code or not, by including (or not including) the x:Class attribute in its root element. These tutorials will assume you are working in managed code, and that this attribute is therefore present.

When you create a managed code Silverlight application in Visual Studio, the Class attribute is placed for you. Create a new application and call it EventHandler, and then examine the first few lines, as shown here,

<UserControl x:Class="EventHandler.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">

Declaring Event Handlers

There are two ways to declare event handlers in Silverlight: in the Xaml file or in the code-behind. If you declare event handlers in Xaml you cannot add parameters. A typical event handler declaration in XAMl might look like this

<Canvas Loaded="Canvas_Loaded">
<Button x:Name="myButton" Content="Hello"
Canvas.Left="10" Canvas.Top="10" />
</Canvas>

Here I’ve deleted the Grid created by Visual Studio, and declared a Canvas object. I’ve also assigned an event handler named "Canvas_Loader" to the Loaded event (a pre-existing event common to all canvases that fires when the Canvas is loaded (created).

I then declare a button in the Xaml and set its content to Hello.

This code appears in Page.xaml. In the code behind file, Page.xaml.cs, I must now implement the event handler with the name I’ve promised to use,

private void Canvas_Loaded(object sender, RoutedEventArgs e)
{
myButton.Content = "Please Click Me";
}

The first thing to notice is that the name of the method is identical to that as declared in the Xaml. The second is that this method follows the pattern of all .NET event handlers: it returns void and takes two parameters: the first of type object (and containing a reference to the object that raised the event) and the second of type EventArgs or a type that derives from EventArgs; in this case RoutedEventArgs. We’ll come back to RoutedEventArgs in just a moment.

The implementation is that when the Canvas is loaded it grabs the button declared in the Xaml file and changes its Content property from "Hello" to "Please push me",

Figure 1-12. Content Property Changed

Even in this incredibly simple example there are two important things to notice:

You did not have to declare myButton in the code behind; it was known simply by declaring it in the Xaml.

The button adjusted its size to accommodate the larger string.

Declaring Event Handlers In Code

I admit it, I have a strong preference for declaring all event handlers in code. I believe it is better encapsulation, making for more scalable and more maintainable code. But this is a personal opinion.

In any case, if you want to declare your event handlers correctly in code, Visual Studio makes it very easy to do so. The most common way is to wire up the event handlers in the OnLoaded event handler, with that event (Loaded) wired up in the Page’s constructor.

To see this, return to your previous code and remove the event handler from the Xaml. While you’re there, add a check box as shown here,

<!– <Canvas Loaded="Canvas_Loaded"> –>
<Canvas >
<Button x:Name="theButton" Content="I’m Indented!"
Canvas.Left="150" Canvas.Top="20" />

<CheckBox x:Name="RushOrder" Content="Rush"
Canvas.Left="50" Canvas.Top="20" FontSize="18" />
</Canvas>

Notice that the original Canvas is commented out, and replaced by a Canvas that does not have an event.

Save the Xaml file and open the code behind.

In the constructor, type Lo. Intellisense will pop up and offer to help you create the EventHandling code, landing on the event Loaded, which is exactly what you want. The tip (next to the Intellisence box) shows the type of the event.

Figure 1-13. Intellisense Helps Create Event Handler (Click to view full-size image)

We’ll return to the fact that Loaded is a RoutedEventHandler shortly. Press tab to accept Loaded and type += to begin adding the delegate. (If delegates and events are new to you, you may want to read this article. It’s a bit old, but still accurate. You can also read extensively about delegates and events in any book on .NET 3.5 or C# or VB.

Intellisense will walk you through each step of wiring up the event handler, and if you let it, will also create the stub of the event handler method, ultimately placing your cursor in the method which it prefills with an exception (in case you forget to add a meaningful implementation.

public Page()
{
InitializeComponent();
Loaded += new RoutedEventHandler(Page_Loaded);

}

void Page_Loaded(object sender, RoutedEventArgs e)
{
throw new NotImplementedException();
}

Delete the exception and register event handlers for the common events for your button (click) and your checkbox (Checked and Unchecked)

void Page_Loaded(object sender, RoutedEventArgs e)
{
myButton.Click += new RoutedEventHandler( myButton_Click );
RushOrder.Checked += new RoutedEventHandler( RushOrder_Changed );
RushOrder.Unchecked += new RoutedEventHandler(RushOrder_Changed);

}

Be careful here, Intellisense will want to name the methods for Checked and Unchecked RushOrder_Checked and RushOrder_Unchecked respectively, but there is no need for two methods. We’ll override that by typing in the name we want, RushOrder_Changed, which will cause both events to use a shared event handler.

In the shared event handler, we’ll check the IsChecked status of the checkbox and if it is checked, we’ll change its text to all upper case (just so we know the event handler is working).

void RushOrder_Changed(object sender, RoutedEventArgs e)
{
if (RushOrder.IsChecked == true)
{
RushOrder.Content = "RUSH";
}
else
{
RushOrder.Content = "Rush";
}
}

Note to C# programmers, we must write

if (RushOrder.IsChecked == true)

and not

if (RushOrder.IsChecked)

because IsChecked is of the new C# 3.0 type nullable bollean ( bool?) which indicates that it may have three states, not two: true, false or null.

Creating Controls Dynamically

In Silverlight, all Xaml controls are isomorphic with CLR objects. That is, anything you can create in Xaml you can create in code.

Where you might write,

<Button x:Name="myButton" Content="Hello" />

You can also write

Button myButton = new Button();
myButton.Content = "Hello";

While it is possible to create all your controls and objects in code, best practices dictate that it is usually better to do so in Xaml. The most compelling reason is that Xaml is highly "toolable" – that is, it lends itself to round-trip modification in tools such as Visual Studio and Expression and thus is easier to scale, modify and maintain.

On the other hand, there are times that you can’t know at design time which or how many objects you’ll need, and the ability to create objects dynamically can be a fundamental requirement.

We can make a minor modification to our existing program to add another button on the user’s request. Add the following button to the Xaml file (note that we also name the canvas!)

<Canvas x:Name="myCanvas">
<Button x:Name="myButton" Content="Hello"
Canvas.Left="10" Canvas.Top="10"/>
<Button x:Name="Another" Content="Add Another"
Canvas.Left="10" Canvas.Top="50" />
<CheckBox x:Name="rushOrder" Content="Rush"
Canvas.Left="50" Canvas.Top="10" />

The effect is to add a button to the page with the words "Add Another." When the user clicks on this button, we want to add a button to the UI and we want that button to have its own size, position and behavior.

We do all of that in the code behind.

Creating a Button Dynamically

Save the .xaml file and open Page.xaml.cs

The first thing to do is to add an event handler for the new button,

Another.Click += new RoutedEventHandler(Another_Click);

And to add its implementation, in which you’ll create a new button and set its properties,

void Another_Click(object sender, RoutedEventArgs e)
{
Button b = new Button();
b.Content = "I live!";
b.SetValue(Canvas.LeftProperty, 10.0);
b.SetValue(
Canvas.TopProperty,
this.newButtonPosition);
this.newButtonPosition += 30.0;
b.Width = 100;
b.Height = 20;
b.Click +=new RoutedEventHandler(new_button_click);
myCanvas.Children.Add(b);
}

Because the canvas’s Left and Top are not actually properties of the Button (but are extended properties) you set them with the SetValue method, which takes two parameters. The first is the actual name of the property you want to set (Canvas.LeftProperty and Canvas.TopProperty) which is not difficult to find as Intellisense will supply it) and the second is the value (in this case a double).

Because I want to be able to click this button more than once, and I don’t want the new buttons overwriting each other, I need a member variable to keep track of the top value,

private double newButtonPosition = 100.0;

After I set it, I can then increment it so the next button will fall below the previous,

b.SetValue(
Canvas.TopProperty,
this.newButtonPosition);
this.newButtonPosition += 30.0;

The result is very satisfying,

Figure 1-14. Adding Dynamic Buttons

The second thing to notice about the Button we are adding is that we are also adding an event handler registration,

b.Click +=new RoutedEventHandler(new_button_click);

This means that every button that is added (each of the three shown in Figure 1-8) is registered to call new_button_click when it is clicked. You’ll need to write that event handler into your Page.xaml.cs file,

void new_button_click(object sender, RoutedEventArgs e)
{
Button btn = sender as Button;
btn.Content = "Don’t do that!";
btn.IsEnabled = false;
}

As the buttons are clicked, they change their message and become disabled,

Figure 1-15. Disabled Dynamic Buttons

Finally, none of this will work if you don’t add the buttons to the page. In this case, however, you don’t want to add them to LayoutRoot as their positioning is in terms of a specific canvas, so you’ll add them to that canvas,

myCanvas.Children.Add(b);

When you run the program, they are members of that canvas, just as surely as if you had added them individually in the Xaml file.

The current versions of Internet Explorer consider Silverlight as a kind of ActiveX control. So, in order to determine if Silverlight is installed, we can attempt to create this ActiveX control using Javascript. If it fails to create the ActiveX control, we can assume that Silverlight is not installed.

For other browsers like Google Chrome, Netscape, FireFox, Safari etc, this can be determined by looking in to the Plugin array of the navigator object. The Silverlight plugin is installed with the name ‘Silverlight Plug-In’.

The below sample code shows how to find if Silverlight is installed on the client browser or not.

<script language="javascript">
var browser = navigator.appName; // Get browser
var silverlightInstalled = false;

if (browser == 'Microsoft Internet Explorer')
{
try
{
var slControl = new ActiveXObject('AgControl.AgControl');
silverlightInstalled = true;
}
catch (e)
{
// Error. Silverlight not installed.
}
}
else
{
// Handle Netscape, FireFox, Google chrome etc
try
{
if (navigator.plugins["Silverlight Plug-In"])
{
silverlightInstalled = true;
}
}
catch (e)
{
// Error. Silverlight not installed.
}
}

alert(silverlightInstalled);
</script>

In Silverlight, the ImageBrush element can be used to fill an area with an image. The area could be various shape elements or the entire Canvas itself.

This code sample shows how to use the ImageBrush to set a background image for the Silverlight canvas control.

<Canvas x:Name="SnowCanvas" Width="600" Height="480">
<Canvas.Background>
<ImageBrush x:Name="backgroundImageBrush"
Stretch="UniformToFill"
ImageSource="Images/Background.png">
</ImageBrush>
</Canvas.Background>
</Canvas>

The below example shows how to Fill an ellipse area with an image control. In addition, I am using the Mouse Enter and Mouse Leave events to dynamically change the image used to fill the Ellipse shape.

<Ellipse x:Name="ellipse1"
MouseEnter="ellipse1_MouseEnter"
MouseLeave="ellipse1_MouseLeave"
Width="100"
Height="100">
<Ellipse.Fill>
<ImageBrush x:Name="imageBrush1"
Stretch="UniformToFill"
ImageSource="Images/Flower2.png">
</ImageBrush>
</Ellipse.Fill>
</Ellipse>

Here is the C# code to handle the Mouse Enter and Mouse Leave events and dynamically change the image in these events:

private void ellipse1_MouseEnter(object sender, MouseEventArgs e)
{
ImageBrush brush = new ImageBrush();
brush.ImageSource = new BitmapImage(new Uri(@"Images/Flower1.png", UriKind.Relative)); ;
ellipse1.Fill = brush;
}

private void ellipse1_MouseLeave(object sender, MouseEventArgs e)
{