Archives

Archives / 2010 / June
  • [Cool Tool] Assembly minifier tool

    If you are using Silverlight controls from the Telerik suite, you’re going to love this.

    Telerik provide a new free tool to help reduce the size of your Silverlight xap. The Telerik Assembly Minifier can be found here:
    http://minifier.telerik.com/

    From the website: “Telerik Assembly Minifier is a tool that lets you extract only the controls’ classes and resources you need to use in your application development, thus significantly reducing the size of the assemblies. Using the Assembly Minifier you will achieve significantly better loading time when the Silverlight XAP files containing the minified (optimized) assemblies are to be loaded on the client side.”

    Note: this apply to Telerik assemblies only (for now).


    I decided to give it a try and create a fresh new Silverlight 4 app then insert a Telerik GridView in a page. VS automatically adds reference to these assemblies:

    • Telerik.Windows.Data.dll
    • Telerik.Windows.Controls.Input.dll
    • Telerik.Windows.Controls.GridView.dll
    • Telerik.Windows.Controls.dll

    That’s 645KB (compressed) added in your xap file, ouch!

    Now let’s add a CoverFlow and a Scheduler controls in my app. This adds 2 more assemblies in the resulting xap:

    • Telerik.Windows.Controls.Scheduler.dll
    • Telerik.Windows.Controls.Navigation.dll

    That’s an additional 413KB in the xap.


    At that point my xap file is 1.2MB, and my app is quite empty, most of the size is coming from the Telerik assemblies. Great features comes with a price, right ?

    Now let’s try the Assembly Minifier tool.
    Go to http://minifier.telerik.com/ and upload the Telerik assemblies used in your app.

    Then I select the controls to be extracted (GridView, CoverFlow and Scheduler here):

     

    Now I can click on the “Extract” button to download the compressed assemblies and reference them in my app (I removed the originals first).

    After recompiling my xap is now 845KB, that’s 32% off.

    So finally for my very specific test (empty Silverlight 4 app with 3 Telerik controls: GridView, CoverFlow and Scheduler) I get this result:

     xap file size

    Before

    After

    1.2MB

    845KB

     

    [32% gain]

    Overall this is good, as always Telerik innovate in new tools and it’s nice to see them answering concern like xap files size. But to me the whole process to manually choose your controls and manually upload and manually replace dll is totally inefficient for now. The tool is still beta (and free!) so I do not complain, I just hope to see more features and a better integration in VS later. In a perfect world a VS add-in would do the job automatically when I build in release mode.

     

    Note the tool is working properly, but the way to replace your dll in VS is not (always grab the old replaced dll). You can find some tips to fix it but it is definitely painful for now. Hope VS will provide an easier way to handle this in the future, or maybe Telerik to create a VS addin or something... 
    Waiting for that you’ll find great help here:
    http://www.telerik.com/community/forums/silverlight/assembly-minifier.aspx

     

    Technorati Tags: ,
  • Jesse Liberty at the Montreal User Group, take 3

    Jesse LibertyThis is our last attempt to get Jesse Liberty at the Montreal User Group (and there won’t be any take 4 as this is the very last meeting of the season), so we cross fingers that everything will be fine this time!
    RunAtServer Consulting is the proud sponsor of this event.

    • What: Silverlight 4, MVVM and Test-Driven Development
    • When: June 16, 2010 at 6:15pm.
    • Where: UQAM, Room DS-R520, 320 Sainte-Catherine East, H2X 1L7, http://www.uqam.ca/campus/pavillons/ds.htm.
    • Price: Free for members of the User Group, 5$ for anyone else.
  • Expression Blend 4 available and training resources

    As you may know Expression Blend 4 has shipped!

    It is still part of Expression Studio, which now comes in 2 “flavors”:

    • Expression Studio 4 Ultimate
      • Expression Blend
      • SketchFlow
      • Expression Web + SuperPreview
      • Expression Encoder
      • Expression Design
    • Expression Studio 4 Web Professional
      • Expression Web + SuperPreview
      • Expression Encoder
      • Expression Design

    So the version you want for Silverlight is Expression Studio 4 Ultimate (because you can’t buy Expression Blend alone).

    Expression Blend is an awesome tool but might be difficult to approach at first, specially for people coming from Visual Studio… this tool target designers so it can takes time for a developer to get comfortable enough.

    Good news is the availability of a free “Blend Fundamentals Training” which contains plenty of resources to help you master Expression Blend in 5 days:
    http://www.microsoft.com/expression/resources/BlendTraining/

     

    Also don’t forget the .toolbox:
    http://www.microsoft.com/design/toolbox/
    This Microsoft website contains courses and tutorials to help you learn UI Design for Silverlight with Expression Blend.

  • Silverlight Tour in Montreal this summer

    silverlight training montreal

    Silverlight Training Montreal Get an awesome Silverlight training this Summer!

    The Silverlight Tour has a new class in Montreal, and provide top Silverlight 4 content!!!

    >> This course will be taught in English <<

  • What: Silverlight training
  • When: July 19-22 (4 days)
  • Where: Montreal, Qc
  • Registration/info: http://www.runatserver.com/SilverlightTraining.aspx

     
    Also note that we offer a free license of Telerik's RadControls for Silverlight to every attendee ($999 value)!!
    For more information on RadControls, visit:
    http://www.telerik.com/products/silverlight.aspx
    Telerik_Logo 

     

  • Dynamically apply and change Theme with the Silverlight Toolkit

    This tutorial shows you how to Theme your Silverlight app and allow the user to switch Theme dynamically.

     

    Introduction

    It’s been a while since Silverlight Toolkit has Theming support, but with the April 2010 version and the new features of Silverlight 4 it is now easier than ever to apply those themes.

    What you need to know:

    • ImplicitStyleManager was removed from the Toolkit, this is because implicit styles are now supported in Silverlight 4.
    • The Toolkit has now a Theme control to apply Themes on your pages.
    • Also a ContextMenuService and ContextMenu control that can allow the user to switch Themes at runtime in this scenario.

    As of April 2010 here are the themes available from the Toolkit:



    You could easily create your own, the XAML files used by those themes can be found on your local folder after installing the toolkit, for the April 2010 version the path is:

    C:\Program Files\Microsoft SDKs\Silverlight\v4.0\Toolkit\Apr10\Themes\Xaml

     

    Get Started

    If you don’t have it yet, install the latest version of the Silverlight Toolkit from:
    http://silverlight.codeplex.com/

     

    Then open Visual Studio 2010 and create a new Silverlight Navigation Application (or Silverlight Business Application).

     

    Reference Toolkit themes dll

    Right click in your Silverlight project, choose “Add Reference…” and select all the System.Windows.Controls.Toolkit.* dll in the .NET tab:

    Theme control

    With the toolkit installed, you now have a Theme control in your toolbox, add one outside the Frame control of MainPage.xaml. Here I just want the Theme to apply to the content section of the pages.
    Then set its ThemeUri property to one of the themes in the referenced dll, note the specific syntax to get a file from a dll:

    <toolkit:Theme x:Name="ThemeContainer"
    ThemeUri="/System.Windows.Controls.Theming.BubbleCreme;component/Theme.xaml">
    <Border x:Name="ContentBorder" Style="{StaticResource ContentBorderStyle}"> <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="/Home" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed"> <navigation:Frame.UriMapper> <uriMapper:UriMapper> <uriMapper:UriMapping Uri="" MappedUri="/Views/Home.xaml"/> <uriMapper:UriMapping Uri="/{pageName}" MappedUri="/Views/{pageName}.xaml"/> </uriMapper:UriMapper> </navigation:Frame.UriMapper> </navigation:Frame> </Border> </toolkit:Theme>

    If you dragged the Theme control from the toolbox, Visual Studio automatically added the “toolkit” namespace prefix, if not, add the following to the page header:

    xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit" 

    Add a few controls (TextBox, Button, Calendar, …) to the home page (/Views/Home.xaml) and test you app in your browser, you should see the Theme applied in the content section:

    That’s is, very easy.

    Now let’s add the ability for the user to select a Theme from a list.

     

    Add a context menu to list available Themes

    Insert a ContextMenu control with the ContextMenuService (so it will appear with a right-click at runtime) inside the Theme control:

    <toolkit:ContextMenuService.ContextMenu>
        <toolkit:ContextMenu>
            <toolkit:MenuItem Header="Theme" IsEnabled="False"/>
            <toolkit:Separator />            
            <toolkit:MenuItem Header="Default" />
                
            <toolkit:MenuItem Header="Bubble Creme"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="BubbleCreme"/>
    
            <toolkit:MenuItem Header="Bureau Black"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="BureauBlack"/>
    
            <toolkit:MenuItem Header="Bureau Blue"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="BureauBlue"/>
    
            <toolkit:MenuItem Header="Expression Dark"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="ExpressionDark"/>
    
            <toolkit:MenuItem Header="Expression Light"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="ExpressionLight"/>
    
            <toolkit:MenuItem Header="Rainier Orange"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="RainierOrange"/>
    
            <toolkit:MenuItem Header="Rainier Purple"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="RainierPurple"/>
    
            <toolkit:MenuItem Header="Shiny Blue"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="ShinyBlue"/>
    
            <toolkit:MenuItem Header="Shiny Red"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="ShinyRed"/>
    
            <toolkit:MenuItem Header="Whistler Blue"
                                Command="{StaticResource themeCommand}"
                                CommandParameter="WhistlerBlue"/>
        </toolkit:ContextMenu>
    </toolkit:ContextMenuService.ContextMenu>

    You may have to add a reference to this dll:
    System.Windows.Input.Toolkit

     

    So now the structure of your page should be:

     

    Note that each MenuItem is mapped to a Command and pass the Theme name as parameter.

    You have to create a new class and implement ICommand interface. The goal here is to get a reference to the Theme control (by name, but you may find better way to do that) and set its ThemeUri property.

    public class ThemeChangeCommand : ICommand
    {
        #region ICommand Members
    
        public bool CanExecute(object parameter)
        {
            return true;
        }
    
        public event EventHandler CanExecuteChanged;
    
        public void Execute(object parameter)
        {
            Theme themeContainer =
    (Theme)((FrameworkElement)Application.Current.RootVisual).FindName("ThemeContainer"); string themeName = parameter as string; if (themeName == null) { themeContainer.ThemeUri = null; } else { themeContainer.ThemeUri =
    new Uri("/System.Windows.Controls.Theming." + themeName +
    ";component/Theme.xaml", UriKind.RelativeOrAbsolute); } if (CanExecuteChanged != null) CanExecuteChanged(this, new EventArgs()); } #endregion }

    If using the “Silverlight Business Application” template, you should change with something like:

    Theme themeContainer = (Theme)((FrameworkElement)
    ((ContentControl)Application.Current.RootVisual).Content).FindName("ThemeContainer");


    Finally put the Command in Resource of MainPage.xaml (or in Application Resource):

    <Grid.Resources>
         <local:ThemeChangeCommand x:Key="themeCommand" />
    </Grid.Resources>

    “local” would be the namespace prefix of my app. 

     

    Test!

    Now when you run the test page you can right click and choose a Theme:

    After selected “Shiny Red”:

    Or “Bureau Blue”:

    Now you would have to store the user preference. You have multiple strategy (Isolated Storage, Server Profile, even cookies, …) so this could lead to a future blog post...

     

    Download the code