ALOMOHORA » Silverlight

Multi Page Silverlight Application

alomohora — Fri, 14 Aug 2009 07:31:43 +0000

There are a number of ways of implementing a multi-page Silverlight 2.0 application.

Let’s begin by creating a new Silverlight application in Visual Studio (allowing it to create an ASP.NET Web Application Project) named SilverlightNavigation

Notice that Visual Studio creates one page, Page.xaml for you by default and that Page.xaml is a UserControl (you can see that by looking at the xaml view of Page.xaml).

Add PageSwitcher.xaml as you would any other UserControl, but once it is created, take out the grid that Visual Studio creates for you and change the width and height of the UserControl to 300 x 300.

<UserControl x:Class="SilverlightNavigation.PageSwitcher"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="300" Height="300">
    <Grid x:Name="LayoutRoot" Background="AliceBlue">
 
    Grid>
UserControl>

This is the one UserControl that you will leave empty, because we will fill it programmatically with the contents of other pages as we go. It is, in essence, the vessel into which we’ll be pouring each page we want to view.

The core of PageSwitcher.xaml.cs is an overloaded Navigate method that takes either a UserControl or a UserControl and an object.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace SilverlightNavigation
{
    public partial class PageSwitcher : UserControl
    {
        public PageSwitcher()
        {
            InitializeComponent();
        }
 
        // 1st overload
        public void Navigate(UserControl nextPage)
        {
            this.Content = nextPage;
        }
 
        // 2nd overload
        public void Navigate(UserControl nextPage, object state)
        {
            this.Content = nextPage;
 
            ISwitchable s = nextPage as ISwitchable;
 
            if (s != null)
            {
                s.UtilizeState(state);
            }
            else
            {
                throw new ArgumentException("nextPage is not ISwitchable! " + nextPage.Name.ToString());
            }
        }
    }
}

The interface is just a promise that any class implementing the interface will implement UtilizeState. UtilizeState is a method that takes an object and returns void.

using System;
 
namespace SilverlightNavigation
{
    public interface ISwitchable
    {
        void UtilizeState(object state);
    }
}

You create the interface by telling visual studio you want to create a new class named ISwitchable.cs and then replacing the class that it creates for you with the interface code shown.

Before we go any further, we must update App.xaml.cs. Please replace the contents of Application_Startup with the following four lines of code.

private void Application_Startup(object sender, StartupEventArgs e)
{
    PageSwitcher pageSwitcher = new PageSwitcher();
    this.RootVisual = pageSwitcher;
    Switcher.pageSwitcher = pageSwitcher;
    Switcher.Switch(new Page());
}

Let’s create a very simple body for both Page.xaml and Page2.xaml to test the mechanism we’ve created.

In Page, add the following Page.xaml

<UserControl x:Class="SilverlightNavigation.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="300" Height="300">
    <Grid x:Name="LayoutRoot" Background="AliceBlue">
        <TextBlock Text="Page1" FontSize="18" HorizontalAlignment="Center" />
 
        <Button x:Name="ButtonPage1" Content="Go To Page2" FontSize="18" Width="125" Height="50" />
    Grid>
UserControl>

You’ll navigate to this new instance of Page2 through the static Switch method of the Switcher class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace SilverlightNavigation
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
 
            ButtonPage1.Click += new RoutedEventHandler(ButtonPage1_Click);
        }
 
        void ButtonPage1_Click(object sender, RoutedEventArgs e)
        {
            Switcher.Switch(new Page2());
        }
    }
}

In Page, add the following Page2.xaml

<UserControl x:Class="SilverlightNavigation.Page2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="300" Height="300">
    <Grid x:Name="LayoutRoot" Background="AliceBlue">
        <TextBlock Text="Page2" FontSize="18" HorizontalAlignment="Center" />
 
        <Button x:Name="ButtonPage2" Content="Go To Page1" FontSize="18" Width="125" Height="50" />
    Grid>
UserControl>

And Page2.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
 
namespace SilverlightNavigation
{
    public partial class Page2 : UserControl
    {
        public Page2()
        {
            InitializeComponent();
 
            ButtonPage2.Click += new RoutedEventHandler(ButtonPage2_Click);
        }
 
        void ButtonPage2_Click(object sender, RoutedEventArgs e)
        {
            Switcher.Switch(new Page());
        }
    }
}

Result

Source Code

Incoming search terms for the article:

silverlight multi page application, silverlight multiple pages, silverlight multi page, multi page silverlight application, silverlight page switcher, silverlight multipage, multi-page Silverlight application, silverlight Switcher, PageSwitcher silverlight, silverlight pageswitcher, page switcher in silverlight, how to navigate from one xaml page to another xaml page in silverlight, silverlight application multiple page, buliding multiple page silverlight application in asp net codeproject, silverlight multi-page application, multipage application in silver light 4, multipage silverlight application, designing multipage silverlight application, multiple pages in silverlight, silverlight next page, silverlight multiple page, ISWITCHABLE SILVERLIGHT, how to use multiple xaml page in silverlight, multi page silverlight, how to create multiple page silverlight application, multipage application in silverlight, silverlight multi page applications, silverlight goto page, add user control to page xaml in silverlight, multiple usercontrol in xaml silverlight, how to nevigate from one page to user control in silverlight, silverlight application with multiple pages, silverlight application programming multi pages, silverlight multi usercontrol, page to page in silverlight, programmatically navigate to another xaml in silverlight navigation project, how to create multiple page in silverlight application, how to create multipage silverlight application, Implementing Multi pages in Silverlight Applications, silverlight multiple xaml pages, silverlight multi xaml, Multi pages in Silverlight Applications Codeproject, multi page application silverlight, multi page application in silverlight, multi-page applications in silverlight, programmatically navigate silverlight, multi page xaml, silverlight multiple xaml in single page, silverlight click switch to page, Iswitchable cs, silverlight switch usercontrol, silverlight xaml switch pages samples c, application multi pages silverlight 4, working with multiple page in silverlight, navigate from one usercontrol xaml to another user control xaml, Implementing Multi pages in Silverlight Applications\, utilizestate(object state), void UtilizeState(object state);, silverlight goto page2 xaml, silverlight goto page xaml, what is multi page application in silverlight, what is silverlight user control application class and page, silverlight go to page2, silverlight go to page, silverlight example multipage application, silverlight embed usercontrol in page, silverlight display multiple pages, Silverlight how to navigate to a page from usercontrol, silverlight in vs2010 navigation from page to page, silverlight iswitchable, silverlight multi page business app, silverlight multi page application using vs 2010, silverlight multi page application navigation, using multiple usercontrol in one xaml, using silverlight control in multi application, UtilizeState, silverlight login windows on multipage app, silverlight login page example, silverlight login navigation, utilizeState silverlight, utilizestate wpf, silverlight login, what is the namespace of PageSwitcher?, which namespace will use navigate one page to another page in silverlight, silverlight applications multiple user controls, silverlight add user control to page, silverlight add multiple page to a single page, silverlight 4 programmatically page navigation, silverlight 4 navigate from usercontrol to page, silverlight 4 multiple pages, silverlight 4 muli-page application, silverlight 4 0 multi page application, wpf multi page application, wpf UtilizeState, show multiple silverlight applications, xaml and multiple xaml cs, public void navigate(usercontrol nextpage), silverlight add usercontrol to page, silverlight animate go from page to page, silverlight animation switch page

Integrate Media into Silverlight

alomohora — Fri, 07 Aug 2009 02:12:51 +0000

Silverlight includes support to play audio and video files.

It can play Windows Media Video (WMV), Windows Media Audio (WMA) and MP3 files.

Adding media to a page is as simple as adding a MediaElement to your markup and providing a Uniform Resource Identifier (URI) to the media to play. The following example creates a MediaElement and sets its Source property to the URI of a video file. The MediaElement begins playing when the page loads.

<MediaElement x:Name=”mediaElement” Source=”Bear.wmv” Width=”250″ Height=”250″ />

We can control media playback by using the Play, Pause, and Stop methods of a MediaElement object.

Download Code

Silverlight (Layout Management)

alomohora — Sat, 28 Mar 2009 06:45:46 +0000

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.

Developers using Silverlight and WPF use layout panels to coordinate the position and resizing of controls contained within them. The built-in layout panels in Silverlight 2 include three of the most commonly used ones in WPF:

Canvas
Stack Panel
Grid

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

The code

<UserControl x:Class="SilverlightSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="300" Height="300">
 
    <Canvas Background="#FF5C7590">
        <Button Content="Button1" Width="100" Height="50" Canvas.Left="50" Canvas.Top="50">Button>
 
        <Button Content="Button2" Width="100" Height="50" Canvas.Left="50" Canvas.Top="150">Button>
    Canvas>
UserControl>

This would then render our buttons like below:

Download source code for Canvas Panel

While the Canvas is useful for scenarios where the UI elements contained within it never move, it tends not to be very flexible as you add more controls into it or handle scenarios where the UI needs to resize or move. In cases like these you end up having to manually write code yourself to move things around inside the Canvas (which is a pain). A better solution for these dynamic scenarios is typically to use an alternative layout panel that has built-in semantics to-do this for you – like the StackPanel and Grid.

StackPanel

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.

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

The code

<UserControl x:Class="SilverlightSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
 
    <StackPanel Background="#FF5C7590">
        <Button Content="Button1" Width="100" Height="50" Margin="10">Button>
 
        <Button Content="Button2" Width="100" Height="50" Margin="10">Button>
 
        <Button Content="Button3" Width="100" Height="50" Margin="10">Button>
    StackPanel>
UserControl>

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

Download source code for Stack Panel

We could alternatively set the “Orientation” property of the StackPanel to be “Horizontal” instead of Vertical (which is the default):

<UserControl x:Class="SilverlightSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
 
    <StackPanel Orientation="Horizontal" Background="#FF5C7590">
        <Button Content="Button1" Width="100" Height="50" Margin="10">Button>
 
        <Button Content="Button2" Width="100" Height="50" Margin="10">Button>
 
        <Button Content="Button3" Width="100" Height="50" Margin="10">Button>
    StackPanel>
UserControl>

This will then cause the StackPanel to automatically arrange the Button controls in a horizontal row like below:

Download source code for Stack Panel (Orientation)

Grid Panel

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.

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 code

<UserControl x:Class="SilverlightSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    Width="400" Height="300">
 
    <Grid Background="#FF5C7590">
        <Grid.RowDefinitions>
            <RowDefinition Height="60" />
            <RowDefinition Height="60" />
            <RowDefinition Height="60" />
        Grid.RowDefinitions>
 
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="110"/>
            <ColumnDefinition Width="110"/>
        Grid.ColumnDefinitions>
 
        <Button Content="Button1" Width="100" Height="50" Grid.Column="1" Grid.Row="0">Button>
        <Button Content="Button1" Width="100" Height="50" Grid.Column="2" Grid.Row="1">Button>
        <Button Content="Button1" Width="100" Height="50" Grid.Column="0" Grid.Row="1">Button>
        <Button Content="Button1" Width="100" Height="50" Grid.Column="1" Grid.Row="2">Button>
    Grid>
UserControl>

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

Download source code for Grid Panel

n addition to supporting absolute sizing (for example: Height=”60″) the Grid’s RowDefinition and ColumnDefinition controls also support an AutoSizing mode (Height=”Auto”), which automatically sizes the Grid or Row based on the size of the content contained within it (you can also optionally specify maximum and minimum size constraints – which can be very useful).

The Grid’s Row and ColumnDefinitions also support a feature called “Proportional Sizing” – which enables the size of a Grid’s Rows and Columns to be spaced proportionally relative to each other (for example: you could have the second row grow at 2x the rate of the first one).

You’ll find that the Grid provides a ton of power and flexibility – and it will probably be the most common layout panel control you’ll end up using.

Incoming search terms for the article:

silverlight layout management, GridPanel Delphi, silverlight move canvas based on content, silverlight dynamic layout arrange browser, Silverlight UI Layout, silverlight layout panels, silverlight layout manager, layout management silverlight, silverlight grid with horizontal rows, silverlight layout, silverlight grid with dynamic height size, silverlight layout bottom, silverlight grid layout position elements, silverlight grid get top left position, silverlight grid elements, silverlight get top left of ui element without margin, silverlight auto resize controls, silverlight button fixed position, silverlight canvas top attribute, silverlight change location of control in code, silverlight control move/resize attach property#, silverlight control three panel, silverlight coordinates canvas, silverlight dynamic panel, silverlight fixed control position, silverlight flexible layout, Silverlight Get Position of dyamic button, Silverlight layout cause, silverlight layout control, silverlight set height auto, silverlight stackpanel bottom attached to grid, silverlight stackpanel proportional, silverlight stunning UI#, silverlight usercontrol move grid, silverlight usercontrol position bottom, usercontrol cause arrange silverlight, what is move silverlight control relative to other control, WPF alternative layout, silverlight postion relative to other control, silverlight position on the bottom of canvas, silverlight layout example, silverlight listboxdragdroptarget grid, silverlight layout panel from code, silverlight layout with user control, silverlight layoutcontrol with autosized content, silverlight move control, silverlight moving stackpanel, silverlight panel move, silverlight pixels coordinates, wpf flexible layout with grid, 3 column layout in siverlight, find bottom coordinate silverlight, fix position control on right bottom of browser silverlight, fixed position elements silverlight, fixed position layout in silverlight, flexible width layout in silverlight, get control row and column coordinates in canvas silverlight, get left top parent canvas xaml, google silverlight layout, grid panel silvelight, gridlayout panel alternate column background wpf, elements inside a coordinate in silverlight, communication between different dynamically loaded xaps#sclient=psy-ab, adding a canvas control insside a grid silverlight, arrange control at runtime in stackpanel, attach ui element to canvas, attached properties silverlight, auto adjust the relative position of component in layout silverlight, auto arrange panel in silverlight, better silverlight wpf layout paanel, canvas background samples using xaml, canvas ou grid resize silverlight, ColumnDefinition Proportional Sizing, #FF5C7590, how get uielement from silverlight grid layout, moving controls silverlight canvas, page layout management in silverlight, pixel to layout coordinates silverlight, PollingDuplexBindingElement#, position control right bottom browser silverlight, presentation three columns, proportional panel silverlight, proportional stakpanel, resizable panel silverlight canvas, runtime layout management in silverlight, moving control canvas silverlight, moving a button in a grid in silverlight, how to get button canvas silverlight, how to move the stackpanel from bottom to top in silverlight, how to size margins proportionally silverlight, layout management xaml, layout positioning sizeing in silverlight, layout properties silverlight, layout UserControl width height 100% silverlight, most used silverlight layout, move grid layout to browser screen top position in silverlight, move panel in silverlight, set ListBoxDragDropTarget Grid Column from codeBehind#

Tooltip for Silverlight

alomohora — Sun, 16 Nov 2008 06:23:00 +0000

Silverlight offers a class called “ToolTipService” which can be used to display tooltips for Silverlight controls. This class can be attached to most of the UI elements in Silverlight to display tooltips.

The below sample code shows how to display a simple text tooltip for a Button control:

<ToolTipService.ToolTip>

<ToolTip Content="This is tool tip for Button">ToolTip>

ToolTipService.ToolTip>

Button>

Grid>

And the result

Incoming search terms for the article:

silverlight grid with tooltip

Silverlight (Creating Hello World)

alomohora — Sat, 15 Nov 2008 03:05:22 +0000

These tutorials are helping explain some of the core programming concepts of Silverlight.

We’ll start our SilverlightSample 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 SilverlightSample (note: you will need to download and install the Silverlight Tools for VS 2008 release to get this support).

We’ll name the project SilverlightSample. 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 SilverlightSample.Web.

When we click OK Visual Studio will create a solution for us that have both a Silverlight client application and an ASP.NET web server application in it.

Right now our SilverlightSample 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.

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

This is full code:

<UserControl x:Class=”SilverlightSample.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 x:Name=”MyButton” Content=”Push Me!” Width=”100″ Height=”50″ Click=”MyButton_Click”>Button>
    Grid>
UserControl>

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.

This is full code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightSample
{
   public partial class Page : UserControl
   {
      public Page()
      {
         InitializeComponent();
      }
 
      private void MyButton_Click(object sender, RoutedEventArgs e)
      {
         MyButton.Content = “Pushed”;
      }
   }
}

After making the change above us can re-run the application and push the button again, and now its content is updated with a Pushed! Message.

Download source code

Incoming search terms for the article:

??? ?????????? zeoslib ?? delphi xe, componente zeos para delphi xe2, creating hello world in silverlight, delphi xe2 zeosdbo, instalar zeoslib en delphi xe2, zeos xe2, zeoslib xe2