ALOMOHORA » Silverlight

What’s New in Silverlight 4?

alomohora — Thu, 01 Jul 2010 17:01:31 +0000

Silverlight 4 delivers a full suite of powerful capabilities to business application developers, bringing the best-of-breed .NET platform to browser-based experiences. Silverlight provides an ideal platform for developing and deploying modern business applications for both customer facing and staff-facing applications.

Business Application Development

Silverlight 4 consolidates its position as the natural choice for building business applications on the Web:

New Features for Application Developers

Comprehensive printing support enabling hardcopy reports and documents as well as a virtual print view, independent of screen content.
A full set of forms controls with over 60 customizable, styleable components. New controls include RichTextbox with hyperlinks, images, in-line controls, and editing. Enhanced controls include DataGrid with sortable/resizeable columns and copy/paste rows.
WCF RIA Services introduces enterprise class networking and data access for building n-tier applications including transactions, paging of data, WCF and HTTP enhancements.
Localization enhancements with Bi-Directional text, Right-to-Left support and complex scripts such as Arabic, Hebrew and 31 new languages including Vietnamese and Indic support.
The .NET Common Runtime (CLR) now enables the same compiled code to be run on the desktop and Silverlight without change.
Enhanced databinding support increases flexibility and productivity through data grouping/editing and string formatting within bindings.
Managed Extensibility Framework supports building large composite applications.
Exclusive tooling support for Silverlight, new in Visual Studio 2010. Including a full editable design surface, drag & drop data-binding, automatically bound controls, datasource selection, integration with Expression Blend styling resources, Silverlight project support and full IntelliSense.

Developer tools

Fully editable design surface for drawing out controls and layouts.
Rich property grid and new editors for values
Drag and drop support for databinding and automatically creating bound controls such as listbox, datagrid. New datasources window and picker.
Easy to pick styles and resources to make a good looking application based on designer resources built in Expression Blend.
Built in project support for Silverlight applications
Editor with full intellisense for XAML and C# and VB languages.

Empowering richer, more interactive experiences

Silverlight is already in use as a comprehensive platform for building rich experiences both for application and pure media scenarios including HD quality, interactive video through Smooth Streaming. Silverlight 4 introduces additional capabilities to enable creation of ever more rich, appealing high-performance interactive experiences and innovative media experiences:

Fluid interface enhancements advance application usability through animation effects.
Webcam and microphone to allow capture of audio and video on the client.
Bring data in to your application with features such as copy and paste or drag and drop.
Long lists can now be scrolled effortlessly with the mouse wheel.
Support conventional desktop interaction models through new features such as right-click context menu.
Support for Google’s Chrome browser.
Performance optimizations mean Silverlight 4 applications start quicker and run 200% faster than the equivalent Silverlight 3 application.
Multi-touch support enables a range of gestures and touch interactions to be integrated into user experiences.
Multicast networking, enabling Enterprises to lower the cost of streaming broadcast events such as company meetings and training, interoperating seamlessly with existing Windows Media Server streaming infrastructure.
Content protection for H.264 media through Silverlight DRM powered by PlayReady.
Output protection for audio/video streams allowing content owners or distributors to ensure protected content is only viewed through a secure video connection.

Move beyond the browser

Silverlight 3 pioneered the delivery of a new class of Rich Internet Applications to work on the desktop without additional code or runtimes. Silverlight 4 extends this capability:

For Sandboxed applications

Place HTML within your application enabling much tighter integration with content from web servers such as email, help and reports.
Provide support for ‘toast’ notification windows, allowing applications to communicate status or change information while the user is working on another application through a popup window on the taskbar.
Offline DRM, extending the existing Silverlight DRM powered by PlayReady technology to work offline. Protected content can be delivered with a persistent license so that users can go offline immediately and start enjoying their content.
Control over aspects of UI include window settings such as start position, size and chrome.

For Trusted applications

Read and write files to the user’s MyDocuments, MyMusic, MyPictures and MyVideos folder (or equivalent for non-windows platforms) for example storage of media files and taking local copies of reports.
Run other desktop programs such as Office, for example requesting Outlook to send an email, send a report to Word or data to Excel.
COM automation enables access to devices and other system capabilities by calling into application components; for instance to access a USB security card reader.
A new user interface for requesting application privileges access outside the standard Silverlight sandbox.
Group policy objects allow organizations to tailor which applications may have elevated trust.
Full keyboard support in fullscreen mode richer kiosk and media applications.
Enhancements to networking allow cross-domain access without a security policy file.
Custom Window ‘chrome’ to provide a highly branded experience

Incoming search terms for the article:

autoadjust layout in silverlight, Implementing Multi pages in Silverlight Applications, silverlight 4 navigate user control, silverlight iswitchable, silverlight switcher

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, multi page silverlight application, silverlight multi page, silverlight multipage, silverlight page switcher, PageSwitcher silverlight, silverlight Switcher, silverlight next page, multi-page Silverlight application, silverlight pageswitcher, multiple pages in silverlight, page switcher in silverlight, how to navigate from one xaml page to another xaml page in silverlight, silverlight application multiple page, multipage application in silver light 4, multipage application in silverlight, designing multipage silverlight application, silverlight goto page, silverlight multi-page application, multipage silverlight application, ISWITCHABLE SILVERLIGHT, multi-page applications in silverlight, silverlight multi page applications, buliding multiple page silverlight application in asp net codeproject, how to use multiple xaml page in silverlight, silverlight multiple page, how to create multiple page silverlight application, add user control to page xaml in silverlight, multi page silverlight, silverlight application with multiple pages, silverlight page usercontrol, multi-page Silverlight app, silverlight xaml switch pages samples c, silverlight application programming multi pages, silverlight click switch to page, multiple page silverlight 4, go to page silverlight, silverlight multiple xaml in single page, how to nevigate from one page to user control in silverlight, how to create multipage silverlight application, silverlight page navigation animation, silverlight switch usercontrol, how to create multiple page in silverlight application, silverlight switch page, Multi pages in Silverlight Applications Codeproject, How to create multiple pages in silverlight, programmatically navigate to another xaml in silverlight navigation project, changing pages in silverlight programmatically, working with multiple page in silverlight, multi page application in silverlight, adding user control in silverlight page, navigate from one usercontrol xaml to another user control xaml, silverlight multi xaml, programmatically navigate silverlight, page to page in silverlight, application multi pages silverlight 4, wpf iswitchable, silverlight multi usercontrol, silverlight multiple xaml pages, multi page xaml, Iswitchable cs, Implementing Multi pages in Silverlight Applications, multiple usercontrol in xaml silverlight, Implementing Multi pages in Silverlight Applications\, silverlight iswitchable, create a multipage silverlight, multi page application silverlight, silverlight goto new page, silverlight multi page application navigation, silverlight goto page xaml, silverlight goto, silverlight login windows on multipage app, silverlight multiple navigation page, Silverlight how to navigate to a page from usercontrol, Silverlight ISwitchable cs, silverlight layoutroot switchcontrol, silverlight login, PageSwitcher UserControl, silverlight goto xaml page, silverlight goto page2 xaml, silverlight login navigation, silverlight in vs2010 navigation from page to page, silverlight login page example, silverlight go to page2, silverlight go to page, open multiple page in silverlight, run multiple xaml pages in silverlight, show multiple silverlight applications, silverlight 4 0 multi page application, silverlight 4 custom control multiple pages, silverlight 4 muli-page application, silverlight 4 multiple pages, silverlight 4 navigate from usercontrol to page, silverlight 4 programmatically page navigation, public void navigate(usercontrol nextpage), programmatically navigate pages in silverlight, print user control content in silverlight multiple pages, page navigation animation in silverlight, page switch control silverlight

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

Incoming search terms for the article:

MediaElement do not play wmv

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, #FF5C7590, silverlight dynamic layout arrange browser, silverlight move canvas based on content, Silverlight UI Layout, silverlight flexible layout, layout management silverlight, grid background, silverlight layout panels, silverlight layout manager, width * auto silverlight, silverlight auto resize controls, GridPanel Delphi, silverlight grid with dynamic height size, silverlight grid layout position elements, silverlight grid with horizontal rows, silverlight insert element in stackpanel at runtime, silverlight layout, silverlight moving stackpanel, silverlight layout bottom, Silverlight layout cause, silverlight grid get top left position, silverlight grid elements, set ListBoxDragDropTarget Grid Column from codeBehind#, Silverlight ArrangeElement canvas, silverlight button fixed position, silverlight canvas move margin, 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 resizable grid, Silverlight Get Position of dyamic button, silverlight get top left of ui element without margin, silverlight layout control, silverlight layout example, silverlight: resize panel based on browser size, silverlight stackpanel bottom attached to grid, silverlight stackpanel proportional, silverlight stunning UI#, silverlight usercontrol in stakpanel, silverlight usercontrol move grid, silverlight usercontrol position bottom, stunning silverlight layout, usercontrol cause arrange silverlight, what is move silverlight control relative to other control, WPF alternative layout, wpf flexible layout with grid, silverlight stackpanel, silverlight set height auto, silverlight layout panel from code, silverlight layout with user control, silverlight layoutcontrol with autosized content, silverlight listboxdragdroptarget grid, silverlight move control, silverlight move resize ui elements, silverlight panel control, silverlight panel layout left, silverlight panel move, silverlight pixels coordinates, silverlight position on the bottom of canvas, silverlight postion relative to other control, xaml 3 columns layout examples, 3 column layout in siverlight, elements inside a coordinate in silverlight, explicit coordinates, find bottom coordinate silverlight, fix element position silverlight, fix position control on right bottom of browser silverlight, fixed position elements silverlight, fixed position layout in silverlight, flexible grid layout in silverlight, flexible width layout in silverlight, get control row and column coordinates in canvas silverlight, get left top parent canvas xaml, get width control silverlight auto, google silverlight layout, dynamic grid layout in silverlight, delphi dbgrid three rows, ColumnDefinition Proportional Sizing, 3 main built in layout panels in silverlight, adding a canvas control insside a grid silverlight, alternate layouts at runtime silverlight, arrange control at runtime in stackpanel, arranging buttons in a stackpanel, attach ui element to canvas, attached properties silverlight, auto adjust the relative position of component in layout silverlight, auto arrange panel in silverlight, automatic resizing stackpanel at runtime in silverlight, better silverlight wpf layout paanel, canvas background samples using xaml, canvas ou grid resize silverlight, communication between different dynamically loaded xaps#sclient=psy-ab, grid panel silvelight, moving controls silverlight canvas, page layout management in silverlight

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, tooltip on button in silverlight