Logo
programming4us
programming4us
programming4us
programming4us
Home
programming4us
XP
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Windows Phone
 
Windows XP

Silverlight and ASP.NET : Silverlight and Layout

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
8/9/2011 4:41:37 PM

1. Controls and Events

Because you are well versed in the controls available through ASP.NET, there's a lot to say about the way Silverlight controls work. Silverlight includes nearly all the same controls available as ASP.NET server-side controls (Button, ListBox, RadioButton, TextBox, Label, and so forth).

Whereas the job of an ASP.NET server-side control is to emit a tag to be interpreted by the browser eventually, Silverlight controls are rendered directly on the client by the Silverlight engine. ASP.NET control events are usually handled on the server by server-side event handlers, while Silverlight control events are handled on the client side within the Silverlight component.

1.1. Routed Events

Silverlight control events look much like typical .NET events. The event handlers all use an object as the first parameter (always the sender). Following the sender parameter, the handlers include some permutation of the standard event arguments. To manage events Silverlight uses routed events, which are like typical .NET events in that handlers for routed events can be attached directly to the controls that produce them (for example, the Button control exposes a Click event). However, routed events are different because you can attach handlers for events at various places up and down the Silverlight visual tree. That is, you do not need to attach the handlers directly to the controls. This can be useful in various scenarios. For example, imagine you want to trap the left mouse down event for all elements in a layout panel (within a Grid, for instance). Rather than attaching singular event handlers to each element in the panel, you could attach the handler to the layout panel itself and intercept the event there.

1.2. Silverlight Controls and Class Members

Just as ASP.NET tags that are given IDs in the ASPX file have corresponding members in the code-beside class, XAML tags that are given names also end up as members in the code-beside class. For example, the following XAML produces Grid and Button member variables named LayoutRoot and theButton that you can access from the code-beside accompanying the Silverlight application:

<UserControl x:Class="SilverlightSite.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.
com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">
<Grid x:Name="LayoutRoot" Background="White">
<Button Content="Hello World!"
x:Name="theButton"
Click="theButton_Click"></Button>
</Grid></UserControl>


2. Silverlight and Layout

MainPage (derived from UserControl) is the main presentation area for the Silverlight content. The UserControl is a ContentControl that can contain a single piece of content. Although you could put any control (such as a TextBlock or a Button) on the page, you'd be left with no more room to put anything else.

Rather than forcing a singular layout scheme (for example, absolute x and y positioning), Silverlight supports various layout schemes available through layout panels. By using these panels, you can add many controls as well as dictate their positioning in the final user interface. Out of the box, Silverlight supports the Canvas, the Grid, and the StackPanel.

When you place a Canvas layout panel inside the MainPage, it positions elements at absolute x and y locations. The Grid positions elements in rows and columns. The StackPanel stacks elements either vertically or horizontally. Here is an exercise to illustrate how Silverlight layout works.

Working with Silverlight layout

  1. Create a new Silverlight application named SilverlightLayout. Have Visual Studio create an ASP.NET test project for you.

  2. Examine the MainPage.xaml file generated by Visual Studio. Make the UserControl width 600.

  3. Visual Studio gives you a grid as the layout. Turn on grid lines and add two grid columns. The Grid ShowGridLines property is a simple Boolean. However, the Grid column definitions are a little trickier. Defining columns requires using the rich property syntax:

    <UserControl x:Class="SilverlightLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    DesignWidth="600" DesignHeight="300">
    <Grid x:Name="LayoutRoot" Background="White"
    ShowGridLines="True">
    <Grid.ColumnDefinitions>
    <ColumnDefinition ></ColumnDefinition>
    <ColumnDefinition ></ColumnDefinition>
    </Grid.ColumnDefinitions>
    </Grid>
    </UserControl>

  4. Add a Canvas to the grid, name the Canvas theCanvas so that you can refer to it programmatically later on. Put it in column 0. Add some content to the Canvas. The following example shows how you can draw a few shapes and locate them within the Canvas using the Canvas.Left and Canvas.Right attached properties. Notice that shapes have Stroke and StrokeThickness that define the color and thickness of each shape's border. There's also a Fill property with which you can define the color used to fill a shape. Finally, set the opacity of each of these shapes to 60 percent. You can use this property to add some mouse interactivity to the shapes.

    <UserControl x:Class="SilverlightLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    DesignWidth="600" DesignHeight="300">
    <Grid x:Name="LayoutRoot" Background="White"
    ShowGridLines="True">
    <Grid.ColumnDefinitions>
    <ColumnDefinition ></ColumnDefinition>
    <ColumnDefinition ></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <Canvas Grid.Column="0" x:Name="theCanvas">
    <Rectangle Width="100" Height="100"
    Fill="LightBlue" Stroke="Black"
    StrokeThickness="2"
    Canvas.Top="75" Canvas.Left="150"
    Opacity=".6">
    </Rectangle>
    <Ellipse Width="150" Height="100"
    Fill="Green" Stroke="Yellow"
    StrokeThickness="3"
    Canvas.Left="50"
    Canvas.Top="175"
    Opacity=".6">
    </Ellipse>
    <Rectangle Width="150" Height="150"
    Fill="Red"
    Stroke="Maroon"
    StrokeThickness="3"
    Canvas.Left="30"
    Canvas.Top="45"
    Opacity=".6">
    </Rectangle>
    </Canvas>
    </Grid>
    </UserControl>


  5. Now add some mouse interactivity to the shapes on the Canvas. First, set up mouse enter and leave handlers to increase the opacity of the shapes in the Canvas when the pointer rests on them. To do this, open the MainPage.xaml.cs file and implement event handlers for the MouseEnter and the MouseLeave events. The event handlers are going to be attached to the shapes themselves, so the sender of these events is going to be the shapes. For each implementation, cast the first argument (the sender) to be of type Shape. This is necessary to access its Opacity property. The MouseEnter handler should then assign the Opacity property to be 100 percent (the number 1, that is). The MouseLeave handler should reduce the Opacity property to 60 percent (the number 0.6, that is). After implementing the MouseEnter and MouseLeave handlers, in the Page constructor, wire up the event handlers to the MouseEnter and MouseLeave events of every element on the Canvas, as shown in bold text in the following XAML:

    public partial class MainPage : UserControl
    {
    private void theCanvas_MouseEnter(object sender, MouseEventArgs e)
    {
    Shape shape = sender as Shape;
    if (shape != null)
    {
    shape.Opacity = 1;
    }
    }
    private void theCanvas_MouseLeave(object sender, MouseEventArgs e)
    {
    Shape s = sender as Shape;
    if (s != null)
    {
    s.Opacity = .6;
    }
    }

    public MainPage()
    {
    InitializeComponent();
    foreach (Shape s in theCanvas.Children)
    {
    s.MouseEnter += this.theCanvas_MouseEnter;
    s.MouseLeave += this.theCanvas_MouseLeave;
    }
    }
    }


  6. Run the application. At first, you should be able to see the outlines of all the shapes because they start out with an opacity of 60 percent, as shown in the following graphic:



  7. Then, when you move the pointer over one of the shapes, you should see it become opaque:



    In this case, when the pointer rests on the rectangle that is topmost in the Z-order, the rectangle blocks full view of the other rectangle and ellipse behind it.

  8. Now add a StackPanel to the grid and place it in the second column. Add a Button to the StackPanel, followed by a ListBox with some contained items. Following the first ListBox, nest another StackPanel in the outer StackPanel—orient this one horizontally by setting the Orientation property to Horizontal. Place two more ListBoxes in the nested StackPanel:

    <UserControl x:Class="SilverlightLayout.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"

    DesignWidth="600" DesignHeight="600">
    <Grid x:Name="LayoutRoot" Background="White"
    ShowGridLines="True">
    <Grid.ColumnDefinitions>
    <ColumnDefinition ></ColumnDefinition>
    <ColumnDefinition ></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <!-- Canvas goes here... -->

    <StackPanel Grid.Column="1">
    <Button Content="Button1"></Button>
    <ListBox Height="75">
    <ListBoxItem Content="Item 1"></ListBoxItem>
    <ListBoxItem Content="Item 2"></ListBoxItem>
    <ListBoxItem Content="Item 3"></ListBoxItem>
    <ListBoxItem Content="Item 4"></ListBoxItem>
    <ListBoxItem Content="Item 5"></ListBoxItem>
    </ListBox>
    <StackPanel Orientation="Horizontal">
    <ListBox Height="75">
    <ListBoxItem Content="Item 1"></ListBoxItem>
    <ListBoxItem Content="Item 2"></ListBoxItem>
    <ListBoxItem Content="Item 3"></ListBoxItem>
    <ListBoxItem Content="Item 4"></ListBoxItem>
    <ListBoxItem Content="Item 5"></ListBoxItem>
    </ListBox>
    <ListBox Height="75">
    <ListBoxItem Content="Item 1"></ListBoxItem>
    <ListBoxItem Content="Item 2"></ListBoxItem>
    <ListBoxItem Content="Item 3"></ListBoxItem>
    <ListBoxItem Content="Item 4"></ListBoxItem>
    <ListBoxItem Content="Item 5"></ListBoxItem>
    </ListBox>
    </StackPanel>
    </StackPanel>
    </Grid>
    </UserControl>


The layout should appear like this when you're finished:



This example shows that you can nest Silverlight layout panels arbitrarily. In addition to the three panels available as part of the official control set, you can write your own custom panel by deriving from the Panel class.

Other -----------------
- Silverlight and ASP.NET : Adding Silverlight Content to a Web Page
- Silverlight and ASP.NET : XAML
- Silverlight and ASP.NET : Creating a Silverlight Application
- Microsoft ASP.NET 4 : Developing a Web Part
- Microsoft ASP.NET 4 : The Web Parts Architecture
- Microsoft ASP.NET 4 : Handlers and Session State & Generic Handlers (ASHX Files)
- Microsoft ASP.NET 4 : HTTP Handlers - Handlers and IHttpHandler
- Microsoft ASP.NET 4 : HTTP Handlers - The Built-in Handlers
- Microsoft ASP.NET 4 : ASP.NET Request Handlers
- Microsoft ASP.NET 4 : HttpModules (part 2) - Seeing Active Modules & Storing State in Modules
 
 
25 Inspiring Game of Thrones Quotes
Top 10
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Popular tags
Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 windows Phone 7 windows Phone 8
programming4us programming4us
 
programming4us
Natural Miscarriage
programming4us
Windows Vista
programming4us
Windows 7
programming4us
Windows Azure
programming4us
Windows Server
programming4us
Game Trailer