Archives

Archives / 2009 / November
  • Silverlight 4 Training Montreal in December

    formation silverlight montreal

    formation silverlight montreal The Silverlight Tour is coming back to Montreal next week, and we already have Silverlight 4 content!!!

  • When: December 07-09
  • 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!

    While the labs will continue to be in Silverlight 3, the instructor will be using Visual Studio 2010 and Silverlight 4 to explain how the new features work and how they may impact how you architect your Silverlight solution. So the content cover all Silverlight 3 features as well as Silverlight 4!

  • Silverlight 4 presentation in Montreal (Qc)


    Jesse LibertyDon’t miss the next Montreal .NET Community meeting which RunAtServer Consulting will be the proud sponsor.

    Indeed we invited Jesse Liberty, the "Silverlight Geek” from Microsoft Boston, to speak on Silverlight 4!!
    This event is scheduled for December 7, 2009 at 6:15pm.

    As usual the presentation will be held in the Microsoft Montreal office at 2000 McGill College, 4th floor, Montreal, QC, H3A 3H3.

    Hope to see you there!

     

     

     

     

    Technorati Tags:
  • Silverlight 4 Text Trimming

    Silverlight 4 Another feature which was in WPF but not in Silverlight 3… TextTrimming is now available in Silverlight 4!

    With previous version of Silverlight you could try some workaround (calculate the width of your text depending on the font size and family), but Silverlight 4 beta add a TextTrimming property to the TextBlock element to make it much easier!

    A basic xaml sample looks like this:

    <TextBlock Text="This is a text I want to trim"
    TextTrimming="WordEllipsis" Width="140"></TextBlock>

    And at runtime we get:
    image

    Same text, but let’s try to change the font and/or size:

    <TextBlock Text="This is a text I want to trim"
    FontFamily="Verdana" FontSize="18"
    TextTrimming="WordEllipsis" Width="140"></TextBlock>

    We get:
    image

    Note that VS2010 supports this in its design surface as well.

    Silverlight 4 beta currently only supports WordEllipsis for TextTrimming (no CharacterEllipsis).

     

    I wanted to try this in a different way so I added a DataGrid and filled it with a Sample Data Source in Expression Blend.

    I have 3 columns:

      • Id: Width 35px
      • Name: Width 100px with TextTrimming
      • Description: Width * with TextTrimming
    <data:DataGrid AutoGenerateColumns="False" ItemsSource="{Binding Collection}" >
        <data:DataGrid.Columns>
            <!--Id Column-->
            <data:DataGridTextColumn Binding="{Binding Id}" Header="Id" Width="35"/>
            <!--Name Column-->
            <data:DataGridTemplateColumn Header="Name" Width="100">
                <data:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Name}" TextTrimming="WordEllipsis"></TextBlock>
                    </DataTemplate>
                </data:DataGridTemplateColumn.CellTemplate>
            </data:DataGridTemplateColumn>
            <!--Description Column-->
            <data:DataGridTemplateColumn Header="Description" Width="*">
                <data:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <TextBlock Text="{Binding Description}" TextTrimming="WordEllipsis"></TextBlock>
                    </DataTemplate>
                </data:DataGridTemplateColumn.CellTemplate>                        
            </data:DataGridTemplateColumn>                
        </data:DataGrid.Columns>
    </data:DataGrid>

    At runtime we get the second column text trimmed if longer than 100px, and the third column is trimmed depending on the browser size.

     

    Note if the user resize the Name column, it automatically adds “…” if needed.

    Also if user resize the whole browser window, the Description is trimmed as well.

     

     

    Download source code

    (requires Silverlight 4 beta)

     

     

    Technorati Tags:
  • Silverlight 4 Clipboard access

    Silverlight 4 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:

    Silverlight clipboard sample

    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 4 Mouse Wheel support

    Silverlight 4 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

     Silverlight 4 MouseWheel sample

    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 4 Implicit Styling

    Silverlight 4One 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:

    image

    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 4 beta released!

    Silverlight 4 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:

    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:
  • Skin your Silverlight 3 app with Implicit Style Manager

    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!

    ImplicitStyleManager sample

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

    Silverlight Toolkit Themes

    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 Tour Halifax

    Silverlight Tour Halifax

    silverlight training halifaxThe 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:
  • Bing Maps with Silverlight

    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:

    1. Download and install the control
    2. Create an account at https://www.bingmapsportal.com to get a Bing Maps Key
    3. Create a Silverlight project in VS and reference both dll from the local folder:
      • Microsoft.Maps.MapControl.dll
      • Microsoft.Maps.MapControl.Common.dll
    4. 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!

    Bing Maps Silverlight control

    I built a sample to experiment some of the features:

    Bing Maps OOB

    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:
      Bing Maps Silverlight control in Blend

    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: ,
  • Blend SketchFlow project: from prototype to real screens?

    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 Tour Quebec in December

    formation silverlight quebec 

    formation silverlight 3 quebec 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:

  • Update Out Of Browser (OOB) Silverlight apps

    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:
  • Debug Out Of Browser (OOB) Silverlight apps

    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:

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