Laurent Duveau

Silverlight 4 Clipboard access

pluginbaby — Sat, 21 Nov 2009 20:20:00 GMT

Silverlight 4 (currently in beta) adds support for Clipboard!

In Silverlight 3 we had copy/paste available in the Textbox, programmatic access could be done, some IE only solution exists via HTML DOM bridge (so not OOB) or cross-browser (involving Flash!). But now the game has changed as we now have an API for multi-platform Clipboard access.

In this beta, the support is for (Unicode) text-only, and the Clipboard class has 3 static methods:

GetText()
SetText()
ContainsText()

Clipboard access can only be done from a user initiated action (mouse, keyboard), and user is prompted to acknowledge the first time Clipboard is set or read (once per session).

If the application is running Out Of Browser and under the new elevated permission mode, user gets no prompt and Clipboard methods can be used anytime (not only during user initiated actions).

I built a small sample to try this:

The code is pretty simple:

private void btnCopy_Click(object sender, RoutedEventArgs e)
{
    if (txtCopy.SelectedText.Length > 0)
        Clipboard.SetText(txtCopy.SelectedText);
    else
        MessageBox.Show("Nothing to copy!");
}

private void btnPaste_Click(object sender, RoutedEventArgs e)
{
    if (Clipboard.ContainsText())
        txtPaste.Text = Clipboard.GetText();
}

Note you can also use system clipboard (so text from outside Silverlight works as well), and you can use ctrl+c / ctrl+v instead of the buttons.

Download source code

(requires Silverlight 4 beta)

Technorati Tags: Silverlight

Silverlight 4 Mouse Wheel support

pluginbaby — Sat, 21 Nov 2009 03:00:19 GMT

MouseWheel event was available in Silverlight 3 but you had to manage it yourself.

Silverlight 4 has built-in Mouse Wheel support for TextBox, ComboBox, Calendar, DatePicker and ScrollViewer (so DataGrid and ListBox as well).

Now you can navigate months/years in a Calendar with your mouse wheel!

I created a sample to try mouse wheel on some common controls (DataGrid, ListBox, Calendar and ScrollViewer) as well as using the API (which you could do in Silverlight 3). I take advantage of the MouseWheel event to:

Move a Slider
Rotate a Rectangle
Zoom an Image

The MouseWheel eventArgs has a Delta property (Double) that represents the “amount” of scroll.

// MouseWheel on the Slider
private void slider1_MouseWheel(object sender, MouseWheelEventArgs e)
{
    if (e.Delta > 0)
        slider1.Value += 1;
    else
        slider1.Value -= 1;

    // Handle the event so that it doesn't get to the ScrollViewer
    e.Handled = true;
}

Notice the e.Handled property set to true: as you may know in Silverlight events bubble in the controls hierarchy, so if we don’t handle it, using the mouse wheel over the Slider would also scroll the ScrollViewer.

I do pretty much the same for the Rectangle and the Image.

Here is the code to Zoom the Image (Scale transformation):

private void image1_MouseWheel(object sender, MouseWheelEventArgs e)
{
    imageScale.ScaleX = e.Delta > 0 ? imageScale.ScaleX * 1.1 : imageScale.ScaleX * 0.9;
    imageScale.ScaleY = e.Delta > 0 ? imageScale.ScaleY * 1.1 : imageScale.ScaleY * 0.9;

    e.Handled = true;
}

And the XAML markup:

<Image Stretch="Uniform" Source="/sl4bloglogo.png" MouseWheel="image1_MouseWheel">
    <Image.RenderTransform>
        <ScaleTransform x:Name="imageScale"></ScaleTransform>
    </Image.RenderTransform>
</Image>

Download the source code

(requires Silverlight 4 beta)

Technorati Tags: Silverlight

Silverlight 4 Implicit Styling

pluginbaby — Thu, 19 Nov 2009 02:50:00 GMT

One of the cool new features of Silverlight 4 is Implicit Styling: you can now theme your application without resorting to the ImplicitStyleManager from the toolkit.

For that you just create Styles in resource and do not specify x:keys (just the TargetType).

Code Sample for a Button:

<Grid.Resources>
    <Style TargetType="Button">
        <Setter Property="FontSize" Value="24"></Setter>
        <Setter Property="Background" Value="Red"></Setter>
        <Setter Property="Foreground" Value="#FFAA3434"></Setter>
    </Style>
</Grid.Resources>

Now every Button in your app get styled, no need to specify a style key from resource:

Speaking about resource, did you see that VS2010 has an “Extract Value to Resource…” feature on the properties window ?

Then it asks you where you want to store that resource (current page, app.xaml, …). Unfortunately you can’t extract multiple properties at the same time to create a new Style… but this is still beta, right?

Remember Silverlight 4 beta is a developer release only (the public runtime is not available for this release) so my previous post on ImplicitStyleManager is still valid for your current Silverlight 3 apps, waiting for Silverlight 4 to ship!

Technorati Tags: Silverlight

Silverlight 4 beta released!

pluginbaby — Wed, 18 Nov 2009 19:22:00 GMT

Silverlight 4 beta was announced by Scott Guthrie a few minutes ago during his keynote at PDC 2009.

So only 4 months after Silverlight 3 released, we have a new version to play with!!

Silverlight 4 brings several interesting features:

Webcam/mic support
Printing API
MouseWheel on common controls
Implicit Styles
Controls: RichTextBox, ViewBox and WebBrowser
DataBinding improved
CLR 4.0 (compatibility with dll from the Full .NET 4.0)
and much much more!!!… see full list below

Notice that from the top 10 features request list, 8 out of 10 were addressed, that’s awesome!!!

Silverlight gain maturity for business applications with additions like Printing, MouseWheel, Clipboard, Right click and File Drop.

Several tools have been updated to support Silverlight 4 beta development:

Silverlight Tools for Visual Studio 2010
Expression Blend for .NET 4 Preview
Silverlight Toolkit
WCF RIA Services (new name for .NET RIA Services)

Detailed list of Silverlight 4 new features:

WebCam/Microphone
Printing Support
Media
- WMS Multicast Support
- H.264 Mp4 Playback Protected by PlayReady DRM
- Offline DRM
- Output Protection
Text
- RichTextBox control
- Bidi Support (including Arabic and Hebrew Text)
- UIElement.TextInput event
- IME Improvements for TextBox
Controls
- Implicit Styles (type based style theming – no longer a need to explicitly set styles on controls)
- Built-in MouseWheel Support on ScrollViewer, TextBox, ComboBox, Calendar, DatePicker
- ViewBox
- ICommanding Support with ButtonBase & Hyperlink
- SelectedValue and SelectedValuePath Properties on DropDownLists
- RTL Layout via UIElement.FlowDirection property
- VisualStateGroup.CurrentStateGroup property
DataBinding
- DataBinding Support for DependencyObjects
- IDataErrorInfo Support
- StringFormat, TargetNullValue & FallBackValue Properties on Binding
- ObservableCollection<T> ctor that takes INumerable or Ilist
Networking

UDPListener and Multi-cast support
Memory Usage Fix During Progressive Downloads
Automatically Adding Referer Header
Astoria 2.0 Support
WCF RIA Services
WCF Improvements

Out of Browser Applications
- HTML Hosting Support
- Windowing APIs (resize window, etc)
- Notifications (Outlook-like popup windows that can display even when OOB app is minimized)
- Elevated Privileges Support
  - Cross Domain Networking Access
  - Full file path from Open/SaveFileDialog and File Manipulation APIs
  - No User-Initiation Requirement for Full Screen, Open/SaveFileDialogs
  - COM interop (allowing you to create and use any COM object on Windows)
CLR 4.0 Engine
- NGEN Support for Core Runtime Binaries (faster startup and execution of apps)
- Dynamic keyword support in C# 4.0 and COM interop when running elevated out of browser applications
- MEF – Managed Extensibility Framework
- Binary assembly compat between assemblies that run on SL and on full .NET 4.0 CLR (no recompile needed now starting with .NET 4 Beta2)

Technorati Tags: Silverlight

Skin your Silverlight 3 app with Implicit Style Manager

pluginbaby — Wed, 18 Nov 2009 01:41:21 GMT

Silverlight 3 do not have implicit style like WPF or a Theming feature like ASP.NET which means you can’t [automatically] apply a Style to every Button of the app like in ASP.NET for example.

In Silverlight 3 you need to explicitly set styles on every controls.

Good news is you can find in the free Silverlight Toolkit the ImplicitStyleManager control that allows implicit styling to be applied to any control in a container by defining 2 attached properties.

Applying Theme in Silverlight 3 (auto Style)

Define your styles in a XAML resource dictionary file (like you already do) and set its build action to Content. Then reference it via the ResourceDictionaryUri attached property on a container of your page:

<Canvas themingToolkit:ImplicitStyleManager.ApplyMode="OneTime"
        themingToolkit:ImplicitStyleManager.ResourceDictionaryUri="Assets/ShinyBlue.xaml">

The ApplyMode has 3 values: None, OneTime and Auto.

None: Theme not applied
OneTime: Theme applied once after page load
Auto: Dynamic controls added at runtime will also be styled.

Inside the container (Canvas in my sample), controls are defined normally (I removed the Canvas.* for brevity):

<TextBox Text="TextBox" Width="125" />
<PasswordBox Width="125" />
<ProgressBar IsIndeterminate="False" Maximum="1" Value="0.5"/>
<RadioButton Content="RadioButton 1" IsChecked="True" />
<RadioButton Content="RadioButton 2"/>
<CheckBox Content="CheckBox 1"/>
<CheckBox Content="CheckBox 2" IsChecked="True"/>
[…]

And at runtime they automatically have styles applied to them!

If you don’t want to build your Theme from scratch you’ll find some samples in the toolkit as well.

http://www.codeplex.com/wikipage?ProjectName=Silverlight&title=Silverlight%20Toolkit%20Overview%20Part%203&referringTitle=Home

The XAML files used by those themes can be found on your local folder after installing the toolkit, for the October 2009 toolkit it is located there:

C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Toolkit\Oct09\Themes\Xaml

In my sample I use the ShinyBlue.xaml Theme and apply it via ImplicitStyleManager.

You can find more style in the Expression Community Gallery:
http://gallery.expression.microsoft.com

Specific Theme controls

You can also use the Theme Containers controls to apply Themes from the Silverlight Toolkit. These controls use ImplicitStyleManager and one of the external xaml resource dictionary file under the hood.

So applying ShinyBlue Theme is simply done via:

<shinyBlue:ShinyBlueTheme>
    <Grid>
        ...
    </Grid>
</shinyBlue:ShinyBlueTheme>

The shinyBlue prefix refers to the assembly containing the ShinyBlueTheme control (from the toolkit):

xmlns:shinyBlue="clr-namespace:System.Windows.Controls.Theming;
            assembly=System.Windows.Controls.Theming.ShinyBlue"

Changing Theme at runtime

Suppose you have several themes and would like your users to be able to switch theme at runtime.
In my sample I add another theme (ShinyRed) from the toolkit and move both files to Assets/Themes folder:

Don’t forget to mark your xaml files as “Content” (build action).

Let’s add a “Theme selector” with a ComboBox + Button:

<ComboBox x:Name="cbThemes">
    <ComboBoxItem Content="ShinyBlue" Tag="ShinyBlue.xaml" />
    <ComboBoxItem Content="ShinyRed" Tag="ShinyRed.xaml"/>
</ComboBox>
<Button Content="Apply" Click="Button_Click" />

On the Button_Click eventHandler get the selected Theme and apply it with some static methods of the ImplicitStyleManager class:

private void Button_Click(object sender, RoutedEventArgs e)
{
    if (cbThemes.SelectedItem != null)
    {
        Uri uri = new Uri(String.Format("Assets/Themes/{0}", 
          ((ComboBoxItem)cbThemes.SelectedItem).Tag.ToString()), UriKind.Relative);
        ApplyTheme(uri);
    }
}

private void ApplyTheme(Uri uri)
{
    ImplicitStyleManager.SetResourceDictionaryUri(LayoutRoot, uri);
    ImplicitStyleManager.SetApplyMode(container, ImplicitStylesApplyMode.Auto);
    ImplicitStyleManager.Apply(container);
}

Now we are able to switch the current Theme live:

Dynamic list of available Themes

Let’s go further and list available themes at runtime.

With the help of this small unzip utility for Silverlight:

http://www.sharpgis.net/post/2009/04/21/REALLY-small-unzip-utility-for-Silverlight.aspx

we are able to automatically populate the ComboBox with Themes from the xap (the code below assume that your xaml themes files are located in a Assets/Themes folder - which contains only those files):

public DynamicStyle()
{
    InitializeComponent();

    this.Loaded += new RoutedEventHandler(DynamicStyle_Loaded);
}

void DynamicStyle_Loaded(object sender, RoutedEventArgs e)
{
    WebClient wc = new WebClient();
    wc.OpenReadCompleted += (s, args) =>
    {
        if (args.Error == null)
        {
            UnZipper unzip = new UnZipper(args.Result);

            List<ComboBoxItem> lstComboBoxItem = new List<ComboBoxItem>();

            ComboBoxItem item;
            string fileName;

            foreach (string filePath in unzip.GetFileNamesInZip())
            {
                if (filePath.StartsWith("Assets/Themes"))
                {
                    fileName=filePath.Replace("Assets/Themes/", string.Empty)
                                     .Replace(".xaml", string.Empty);

                    item = new ComboBoxItem();
                    item.Content = fileName;
                    item.Tag = filePath;
                    lstComboBoxItem.Add(item);
                }
            }
            cbThemes.ItemsSource = lstComboBoxItem;
        }
    };
    wc.OpenReadAsync(new Uri("FunWithImplicitStyleManager.xap",
                                   UriKind.RelativeOrAbsolute));
}

UnZipper is a utility class from the link above, and you’ll find it in my sample code.

Note you could also add code to persist the chosen theme during user session (or even between sessions with IsolatedStorage).

Download the source code

Technorati Tags: Silverlight

Silverlight Tour Halifax

pluginbaby — Mon, 16 Nov 2009 00:08:53 GMT

The Silverlight Tour is visiting Halifax (NS), so get ready to enlighten your RIA app with this top Silverlight 3 training!!

When: November 23-25

Where: Halifax, NS, Canada

Registration: http://www.runatserver.com/SilverlightTraining.aspx

If you are looking for 3 days of intensive Silverlight training this is your chance to learn it from soup to nuts!

For other cities and dates please visit:
http://www.runatserver.com/SilverlightTraining.aspx

Technorati Tags: Silverlight

Bing Maps with Silverlight

pluginbaby — Sat, 14 Nov 2009 02:51:39 GMT

Microsoft has released a free Bing Maps Silverlight control.

I gave it a try and I must say I'm really impressed by the quality and level of features of this control. The UX is very nice, it uses DeepZoom, animation and is highly customizable!!

To try it follow these steps:

Download and install the control
Create an account at https://www.bingmapsportal.com to get a Bing Maps Key
Create a Silverlight project in VS and reference both dll from the local folder:
- Microsoft.Maps.MapControl.dll
- Microsoft.Maps.MapControl.Common.dll
Optionally you can add the control in Visual Studio toolbox.

Then just add the proper namespace declaration:

xmlns:bing="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

And set this xaml markup:

<bing:Map CredentialsProvider="yourBingMapsKey" />

Hit F5 and you get a fully functional map in your browser!

I built a sample to experiment some of the features:

You can download my project here:

Don’t forget to set your BingMapCredentials resource key in the Assets/ResDictionary.xaml file!

As you can expect the map expose many properties (ZoomLevel, Center, Layout, LogoVisibility, Navigation, Pushpins, Layers, …) but I was particularly happy to see:

it works OOB (Out Of Browser), as the map do not use HTML bridge.
Supports MouseWheel (ok we are used to it with AJAX apps, but in Silverlight 3 even the listbox do not have MouseWheel support…).
Offers Data Binding to add dynamic items on the map.
It has a nice “label with fade” mode that you should try!
You can change the Culture
Integrate well in Blend designer surface:

But there is a lot more to discover (Geocode, calculate route, …)!! The best way to learn the features is via the interactive sdk:
http://www.microsoft.com/maps/isdk/silverlight/default.htm

For more information on the Bing Maps Platform (they also provide an AJAX control):
http://www.microsoft.com/maps/developers/

Technorati Tags: Silverlight,Bing Maps

Blend SketchFlow project: from prototype to real screens?

pluginbaby — Thu, 12 Nov 2009 19:34:03 GMT

I have been doing many demos of Blend SketchFlow, but never tried the process to go from sketch to real screens when prototyping is finished.
After MIX09, my first understanding was that one of the goals of SketchFlow was being able to easily switch from prototype to "real" app. But I was wrong and I found that many people are.

Maybe the confusion comes from what is written on the site:
http://www.microsoft.com/expression/products/Sketchflow_Overview.aspx

"Traditional prototypes are generally redundant after the concept phase and discarded. SketchFlow enables you to leverage all the previous conceptual work, every asset and component created is reusable in your production project – nothing goes to waste."

I think many people (like me) incorrectly understood that we could simply switch from prototype to real screens, which is not really the case.

On the Blend documentation (Hit F1, select SketchFlow and click on “Convert a prototype”) you can find the official procedure to “convert your SketchFlow prototype into a production-ready project”. Have a look at it and you’ll see the process is long and really painful… far from a “convert to production” button that would remove the Sketch style from every control and clean the solution.

In fact the point is that you generally wouldn’t want to do that, and someone from the Blend Team confirmed this. You should build your prototype without production consideration in mind. The structure of a SketchFlow prototype itself is not done as a typical well-architected production solution would be. SketchFlow is very good to help you build mock-ups in a RAD-style development, then for production you have to start a clean new project and reuse some of the assets you created during the prototype. But no “convert project to production” button here, and no plan to have one as I heard (for the reasons described above).

Note: I am not trying to minimize the benefits of this tool, just pointing out the “switch to production” might be surprising at first.

Technorati Tags: Silverlight,SketchFlow

Silverlight Tour Quebec in December

pluginbaby — Wed, 04 Nov 2009 01:51:19 GMT

The Silverlight Tour is visiting Québec city (Qc) again, so get ready to enlighten your RIA app with this top Silverlight 3 training!!

When: December 14-16

Where: Québec, Qc

Registration (Fr): http://www.runatserver.com/SilverlightTraining.aspx

If you are looking for 3 days of intensive Silverlight training in French this is your chance to learn it from soup to nuts!

For other cities and dates please visit:
http://www.runatserver.com/SilverlightTraining.aspx

Technorati Tags: Silverlight

Update Out Of Browser (OOB) Silverlight apps

pluginbaby — Tue, 03 Nov 2009 01:36:11 GMT

Once your Silverlight application installed on the local computer what happens if there is an update ?

The local application is not updated automatically but you can check that in your code. The CheckAndDownloadUpdateAsync() method downloads the updated application if available and you can notify the user.

I put this code in the constructor of the App:

App.xaml.cs:

public App()
{
    this.Startup += this.Application_Startup;
    this.UnhandledException += this.Application_UnhandledException;

    InitializeComponent();

    if (Application.Current.IsRunningOutOfBrowser)
    {
        App.Current.CheckAndDownloadUpdateCompleted += 
            new CheckAndDownloadUpdateCompletedEventHandler(CheckAndDownloadUpdateCompleted);
        App.Current.CheckAndDownloadUpdateAsync();
    }
}

void CheckAndDownloadUpdateCompleted(object sender, CheckAndDownloadUpdateCompletedEventArgs e)
{
    if (e.Error == null && e.UpdateAvailable)
    {
        MessageBox.Show("Application updated, please restart to apply changes.");
    }
}

Some points to mention:

By default OOB do not automatically check for update.
Use CheckAndDownloadUpdateAsync() method which check, download and install updates for you.
There is no way to separate the Check from the Download…

Technorati Tags: Silverlight

Debug Out Of Browser (OOB) Silverlight apps

pluginbaby — Tue, 03 Nov 2009 00:11:50 GMT

An installed (OOB) Silverlight application is supposed to run the same as in browser, but sometimes you might want to debug it.

First you could attach VS to the sllauncher.exe process, but there is easier:

Run your application in the browser and install it OOB.
In the Silverlight project properties go to the “Debug” tab and select “Installed out-of-browser application”.
In your Solution set your Silverlight project as the Startup Project.
Hit F5 and you’re now debugging the OOB app!

Technorati Tags: Silverlight

Silverlight Tour Montreal in November

pluginbaby — Tue, 27 Oct 2009 20:51:15 GMT

The Silverlight Tour is coming back to Montreal next week.

When: November 02-04

Where: Montreal, Qc

Registration (Fr): http://www.runatserver.com/SilverlightTraining.aspx

If you are looking for 3 days of intensive Silverlight training in French this is your chance to learn it from soup to nuts!

BulletedList in Silverlight

pluginbaby — Tue, 27 Oct 2009 20:32:27 GMT

Today I wanted to add a bulleted list of text items in a xaml page, as there is no BulletedList control in Silverlight, you have to do it yourself. But I don’t need a databound list, just something simple in a TextBlock, so here is what I ended with, using <LineBreak> and <Run> elements:

<TextBlock>
    This Silverlight 3 demo uses:<LineBreak/>
    <Run>• Entity Framework and LINQ</Run><LineBreak/>
    <Run>• .NET RIA Services</Run><LineBreak/>
    <Run>• WCF</Run><LineBreak/>
    <Run>• Export DataGrid to Excel</Run><LineBreak/>
    <Run>• Insert/Update/Delete with DataForm</Run><LineBreak/>
    <Run>• Styling and ResourceDictionary</Run><LineBreak/>
    <Run>• Control Template</Run><LineBreak/>
    <Run>• Out Of Browser mode (OOB)</Run><LineBreak/>
    <Run>• Search Engine Optimization (SEO)</Run>
</TextBlock>

As expected, the result at runtime:

Technorati Tags: Silverlight

Samedi.NET special Silverlight event in Montreal

pluginbaby — Tue, 27 Oct 2009 20:02:14 GMT

The Montreal .NET Community organized a full-day Silverlight workshop last Saturday.

The topic of the day was: “Build a business application with Silverlight 3”.

We were 5 speakers presenting many sessions (all code, no slide) to show different tools and technologies:

Visual Studio 2008 SP1
Expression Blend 3
Expression Designer 3
.NET RIA Services
WCF and LINQ

The event went pretty well, what amazed me the most is the fact that we got more than 160 attendees!!!

So we could feel the excitement for Silverlight growing more and more, and I answered to so many questions both during my presentations and at the end of the day!!!

To change from Northwind we used a simple Db with beers (thanks Andy):

I did 2 talks:

.NET RIA Services
Silverlight and SEO

Here is what I showed during my first talk:

Navigation Framework
Manage Data
- Entity Framework and LINQ
- .NET RIA Services
- DataGrid + DomainDataSource
  - Custom columns
  - DetailsRow Template
  - Sort
  - Filter
  - Group
  - Pagination
- Activity Control
Export to Excel

The download below adds more:

Edit, Delete (with confirm) beer with the new DataForm control.
Insert new beer in a ChildWindow
Beer details page
Out Of Browser mode (OOB)

For more on .NET RIA Services and how you can add it in your existing architecture, have a look at this incredible list of posts:
http://blogs.msdn.com/brada/archive/2009/08/02/business-apps-example-for-silverlight-3-rtm-and-net-ria-services-july-update-summary.aspx

I’ll write more on my second talk (SEO) in another blog post.

Download source code

Also check the post of my co-worker Louis-Philippe, he has lots of pictures of the event.

Technorati Tags: Silverlight

Silverlight presentation at the Quebec User Group

pluginbaby — Sat, 17 Oct 2009 01:53:22 GMT

Yesterday I did a Silverlight presentation at the Quebec User Group and my goal was to show the new features of Silverlight 3 to help build business app, so this was not quite an intro presentation with no animation and video...

As usual I showed only 3 slides and then built live a ginormous demo from scratch ”ScottGu style” in which I took advantage of Silverlight 3 + .NET RIA Services to manage a beers db with :

Navigation Framework
Style and Theme
Data
- Entity Framework
- .NET RIA Services
- DataGrid + DomainDataSource
  - Custom columns
  - DetailsRow Template
  - Sort
  - Filter
  - Group
  - Pagination
- Activity Control
Export to Excel
OOB mode

And I even had enough time for a QnA session!

Download the Powerpoint content (french)

Download the source code (requires .NET RIA Services)