I’ve been looking for a way the use themes just swapping ResourceDictionaries (RD’s) for some time. Now, with Silverlight 3 being able to use MergedDictionaries, this becomes possible.

It’s still not Blendable, because Blend can only use RD’s with Build Action Resource and not Content. This is annoying enough to give it another go another time. You can use the workaround of having a copy of the default RD in your App.xaml file or using a different RD with build action as Resource for use with Blend only. Want you ultimately want is to address the RD’s as Resource…

This method can help you when you:

  • want to load a theme once on application startup
  • want to set the theme as an initParam on the Silverlight plug-in
  • don’t want to use implicit styling: you’ll need two or more RD’s with identically named Styles and Resources

Restrictions of this method are:

  • Not Blendable (yet), but workarounds exist
  • You have to use one Default theme (which can have any name you want).
  • You cannot dynamically update the theme: you can set a certain theme only once at application startup.

If this is the method for you, this is what you need to do:

  • Create ResourceDictionaries for the Default Theme and for one or more other Themes that you want to load in the root of your Silverlight project. Use x:Keys for Styles and Resources and keep them the same between RD’s. Set the Build Action for these RD’s to CONTENT in Visual Studio or by editing your .CSPROJ file by hand.
  • Insert an initParam in the <Object> tag in your startup file:

<param name="initParams" value="Theme=TheTheme" />
  • Add a Default MergedDictionary in App.xaml:

<Application.Resources> 
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="Default.xaml"/>
        </ResourceDictionary.MergedDictionaries>
  • Declare a private currentTheme variable in App.xaml.cs

public partial class App : Application
{
    private string currentTheme = "Default";
    …
  • Set the Default theme, get the initParam, make an URL to the filename and create and RD from that. Then add the RD to the MergedDictionaries:

private void Application_Startup(object sender, StartupEventArgs e)
{

    //set the current theme to the currentTheme variable
    string currentThemeName = string.Format("{0}.xaml", currentTheme);

    //get the theme name from the initParam
    string themeParameter = e.InitParams["Theme"];

    if (!string.IsNullOrEmpty(currentThemeString))
    { 
        //set the current theme to the theme parameter and create filename
        currentThemeName = string.Format("{0}.xaml", themeParameter);

        //create an URL from the currentThemeName
        Uri themeUrl = new Uri(currentThemeName, UriKind.RelativeOrAbsolute);

        try
        {
            //create a RD and set the source to the URL
            ResourceDictionary themeDictionary = new ResourceDictionary
            {
                Source = themeUrl
            };

            //Add the RD as a MergedDictionary
            Application.Current.Resources.MergedDictionaries.Add(themeDictionary);
        }
        catch (Exception ex)
        { 
            //communicate theme doesn’t exist
            throw; 
        } 
    }

    this.RootVisual = new MainPage();

}

Many thanks to Tony Tromp and Michaud Venant for helping me out with the code.

Njoy!

Gepost door: antonidol | dinsdag 20 oktober 2009

Writeable Bitmap API heeft een parameter minder.(HBSL3 Erratum 1)

In het Handboek Silverlight 3 staat op pagina’s 155-157 de code voor een Writeable Bitmap en een Bitmap van een gedeelte van de userinterface. Deze code werkt niet goed, omdat de WriteableBitmap Class bij het aanmaken een parameter minder heeft gekregen in de definitieve versie van Silverlight 3. De PixelFormats parameter is vervallen en de bestandsindeling is nu altijd Pbgra32. Daarom moet de Writeable Bitmap iets anders geïmplementeerd worden. Bovendien zijn de Lock() en Unlock() methodes vervallen, maar het is nog steeds nodig om Invalidate() aan te roepen.

Bij aanmaken van een WriteableBitmap moet in plaats van…

private void WriteBitmap()
{
    const int imageWidth = 200;
    const int imageHeight = 200;
    WriteableBitmap wbm = new WriteableBitmap(
        imageWidth, imageHeight, PixelFormats.Bgr32);
    wbm.Lock();
    for (int x = 0; x < imageWidth; x++)
    {
        for (int y = 0; y < imageHeight; y++)
        {
            // genereer een kleur in Pbgra32 format
            byte[] components = new byte[4];
            components[0] = (byte)(x % 255); // blauw
            components[1] = (byte)(y % 255); // groen
            components[2] = (byte)(x * y % 255); // rood
            components[3] = 0; // alpha transparantie
            int pixelValue = BitConverter.ToInt32(components, 0);

            // zet de waarde van de pixels
            wbm[y * imageWidth + x] = pixelValue;
        }
    }
    wbm.Invalidate();
    wbm.Unlock();
    TheBitmap.Source = wbm;
}

…er dit staan:

private void WriteBitmap()
{
    const int imageWidth = 200;
    const int imageHeight = 200;
    WriteableBitmap wbm = new WriteableBitmap(imageWidth, imageHeight);
    for (int x = 0; x < imageWidth; x++)
    {
        for (int y = 0; y < imageHeight; y++)
        {
            // genereer een kleur in Pbgra32 format
            byte[] components = new byte[4];
            components[0] = (byte)(x % 255); // blauw
            components[1] = (byte)(y % 255); // groen
            components[2] = (byte)(x * y % 255); // rood
            components[3] = 255; // alpha transparantie
            int pixelValue = BitConverter.ToInt32(components, 0);

            // zet de waarde van de pixels
            wbm.Pixels[y * imageWidth + x] = pixelValue; 
        }
    }
    // zet de source van de afbeelding en teken opnieuw.
    wbm.Invalidate();
    TheBitmap.Source = wbm;
}

Bij het vastleggen van een deel van de userinterface in een WriteableBitmap moet in plaats van…

<Grid x:Name="TheGrid">
…
</Grid>

wbmUI = new WriteableBitmap((int) TheGrid.RenderSize.Width, (int) TheGrid.RenderSize.Height, PixelFormats.Bgr32);
wbmUI.Render(TheGrid, new TranslateTransform());
imgResult.Content = new Image() { Source = wbmUI };

…er dit staan:

WriteableBitmap wbmUI = new WriteableBitmap((int) TheGrid.RenderSize.Width,(int) TheGrid.RenderSize.Height);

wbmUI.Render(TheGrid, null);
imgResult.Content = new Image() { Source = wbmUI };

Njoy Writeable Bitmaps!

Gepost door: antonidol | vrijdag 16 oktober 2009

10 Silverlight loading animations using percentages (HBSL3 Addendum 1)

Following Mike Taulty’s rant avoiding the “Blue Balls” when loading a Silverlight application, I’ve been thinking about what ways you’d have to show a loading animation (a.k.a. Splash Screen :) using the progress percentage in a meaningful way.

The idea was to come up with 10 way to do this and it proved to be harder than I thought. I’ve made a little sketch that is a little further down this post, but first let’s have a look at how to show this. Actually is it XAML only, because the application is not loaded yet, so it can only use Javascript code behind. Creating a XAML-file and a JS-file in your Web project is enough.

Create a new XAML file called SplashScreen.xaml without code behind and a Grid or Canvas as the outer container. Place a Textbox to show a percentage and some Rectangles to show the progress.

<Canvas
    xmlns="<a href="http://schemas.microsoft.com/winfx/2006/xaml/presentation&quot;">http://schemas.microsoft.com/winfx/2006/xaml/presentation"</a>
    xmlns:x="<a href="http://schemas.microsoft.com/winfx/2006/xaml&quot;">http://schemas.microsoft.com/winfx/2006/xaml"</a>
    Width="640" Height="480" Background="White">
  <Canvas Canvas.Top="100" Canvas.Left="100" Width="440" Height="280">
    <Rectangle x:Name="rctProgressBarTrack" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Silver" />
    <Rectangle x:Name="rctProgressBar" Width="300" Height="25" Canvas.Top="50" Canvas.Left="10" Fill="Red">
      <Rectangle.RenderTransform>
          <ScaleTransform x:Name="rctProgress" ScaleX="0" ScaleY="1"/>
      </Rectangle.RenderTransform>
    </Rectangle>
    <TextBlock x:Name="txtStatus" Height="20" Canvas.Top="55" Canvas.Left="125" Text="Loading: " TextWrapping="Wrap"/>
  </Canvas>
</Canvas>

In your startup file in the Web project add two lines to the Silverlight plug-in:

<param name="splashScreenSource" value="SplashScreen.xaml"/>
<param
    name="onSourceDownloadProgressChanged" 
    value="onSourceDownloadProgressChanged" />

Create a small SplashScreen.js file in your Web project containing only this:

function onSourceDownloadProgressChanged(sender, eventArgs) {
    sender.findName("txtStatus").Text =
        "Loading: " + Math.round((eventArgs.progress * 1000)) / 10 + "%";
    sender.findName("rctProgress").ScaleY = eventArgs.progress;
}

Now copy the SplashScreen.xaml file to your Web project. If you change it later, don’t forget to copy it into your XAML project again . You may want to create something in your MainPage.xaml so there’s something to show after loading…

progress

LoadingAnimations Here are  a 10 ideas for creating interesting loading animations. Most a using the progress percentage in some way. A few are “indeterminate” so, they could run forever. Note that the last 2 are dynamic, so should update every second or so. You can use the bars to fill other paths too, like coffee cups. You may need to scale a Clipping Mask for that.

Don’t make a Splash Screen that needs it’s own loading animation :)

Njoy!

Gepost door: antonidol | woensdag 30 september 2009

Change FontSize with ElementBinding

Jakob Nielsen says: “Let users control font size”. Unfortunately in Silverlight the nice features of the WPF FlowDocument control are not available (yet). You cannot use the automatic font size feature of that control in a Silverlight app. But in Silverlight 3 ElementBinding enables you to bind a value to the FontSize attribute of a TextBlock. Using a Converter with a ConverterParameter, dynamic font size becomes available:

Click for working version...

The trick is to use TextBlock controls for your text and set it’s properties in a Style, like you would normally do. This time, leave the FontSize attribute out.

<Style x:Key=”Body” TargetType=”TextBlock”>
    <Setter Property=”FontFamily” Value=”Trebuchet MS” />
    <Setter Property=”TextWrapping” Value=”Wrap” />
</Style>
<Style x:Key=”Header” TargetType=”TextBlock” BasedOn=”{StaticResource Body}”>
    <Setter Property=”FontWeight” Value=”Bold” />
</Style>
<Style x:Key=”Caption” TargetType=”TextBlock” BasedOn=”{StaticResource Body}”>
    <Setter Property=”FontStyle” Value=”Italic” />
    <Setter Property=”Foreground” Value=”Gray” />
</Style>

Create TextBlocks with these Styles and Text, but set the FontSize attribute to an ElementBinding with the Value of a small Slider.

<TextBlock x:Name=”txtHeader1″ Style=”{StaticResource Header}”  FontSize=”{Binding Value, ElementName=Slider, Converter={StaticResource FontSizeConverter}, ConverterParameter=H1}” Text=”Header 1″/>

<Slider x:Name=”Slider” Value=”10″ SmallChange=”1″ LargeChange=”12″ Minimum=”6″ Maximum=”72″ Width=”100″ />

The converter will set the FontSize for you. The ConverterParameter has string values from “H1” to “H7”, like you would use in HTML. You can set this to any string you like, but these seem to make sense…

The converter looks like this:

using System;
using System.Windows.Data;

namespace Converters
{
    public class FontSizeConverter : IValueConverter  
    {
        public object Convert(object value, Type targetType, object parameter,
System.Globalization.CultureInfo culture)  
        {
            double v = (double)value;

            if (parameter != null)
            {
                string fontSizeString = parameter.ToString();
                if (!string.IsNullOrEmpty(fontSizeString))
                {
                    switch(fontSizeString)
                    {
                        case “H1″ :
                            value = 2.4 * v;
                        break;
                        case “H2″ :
                            value = 1.8 * v;
                        break;
                        case “H3″ :
                            value = 1.4 * v;
                        break;
                        case “H4″ :
                            value = 1.2 * v;
                        break;
                        case “H5″ :
                            value = 1 * v;
                        break;
                        case “H6″ :
                            value = .8 * v;
                        break;
                        case “H7″ :
                            value = .6 * v;
                        break;
                    }
                }
            }
            value = System.Convert.ToInt32(value); // we need an integer, not double…
            return value.ToString(); // …but as a string
        }
    }
}

As you can see the value is updated with different multipliers, depending on the header parameter you pass in. H5 is the basic text size, used by the Body Text, so its multiplier is 1. You can play with these multipliers if you want a different effect.

Add the namespace to your XAML file and put the converter as a resource at the top of the file…

<UserControl x:Class=”ControlFontSize.MainPage”
    xmlns:cvs=”clr-namespace:Converters”>
    <UserControl.Resources>
        <cvs:FontSizeConverter x:Key=”FontSizeConverter” />
    </UserControl.Resources>

… and you’re good to go. Let users control text size!

Working code is on my SkyDrive… Njoy!

Gepost door: antonidol | maandag 28 september 2009

SketchFlow Behavior CheatSheets

Personally, I think that not enough Behaviors for Blend and SketchFlow are available, but luckily Christian Schormann recently presented some SketchFlow Behaviors that make Conditional Navigation and Global States possible in SketchFlow prototypes. For my workshop on SketchFlow for PICNIC09, I created two CheatSheets in SketchFlow, because working with Behaviors is too complex to explain quickly in a workshop. Since the workshops are done, I’d like to share these CheatSheets with you so you can learn quickly how to use the behaviors Christian created.

ConditionalNavigationCheatSheet GlobalStateCheatSheet

The Conditional Navigation behaviors enables you to navigate to a different screen based on a TargetScreen variable that is set using events in the interface.

The Global State behavior is similar but makes it possible to navigate to a screen that shows a particular state, depending on a GlobalState variable, setting the state.

If you can’t reach a result using these cheatsheet, please read the explanation from Christian on his blog. Check out the CheatSheets and enjoy using SketchFlow!

Gepost door: antonidol | woensdag 2 september 2009

Kleurgebruik in Blend

Kleurgebruik in Expression Blend

Kleurgebruik in Expression Blend

Het handboek Silverlight 3 is in zwart-wit. Deze illustratie in Hoofdstuk 4 komt dus niet heel goed over. Hierbij de originiele gekleurde versie van de illustratie over kleurgebruik in de Expression Blend userinterface.

Gepost door: antonidol | dinsdag 18 augustus 2009

Handboek Silverlight 3!

9789059403888klein_thumb.jpgEind augustus is het Handboek Silverlight 3 uitgebracht. Het eerste en vooralsnog enige boek over Silverlight 3 in het Nederlands.

Silverlight is de spannende, nieuwe techniek om met behulp van vectorafbeeldingen websites en -applicaties te creëren. Hierdoor worden visuele elementen haarscherp getoond en zijn ze schaalbaar, terwijl het downloaden sneller gaat dan bij bitmapafbeeldingen. De capaciteiten voor transparantie, kleurverlopen, animatie en 3D-projectie bieden u de kans om indrukwekkende ontwerpen te realiseren.

Wilt u een Silverlight-project van begin tot eind doorlopen, dan is dit boek voor u. Vier fasen in het proces van het creëren van een Silverlight-applicatie komen uitgebreid aan de orde:

  • Ontwerpen: over creativiteit, concept, schetsen en de gereedschappen SketchFlow en Expression Design.
  • Produceren: over XAML en de gereedschappen Expression Blend, Expression Encoder en Deep Zoom.
  • Programmeren: over de programmeeromgeving Visual Studio, aangevuld met een aantal praktische toepassingen in C#.
  • Publiceren: over het online brengen van Silverlight-sites en -applicaties, waaronder zoekmachineoptimalisatie, aangepaste installatie en uitrol in een zakelijke omgeving.

Webdesigners leren werken met eXtensible Application Markup Language (XAML), programmeurs leren hoe Silverlight aansluit op C# en het .NET-platform en ontwerpers leren hoe de grafische gereedschappen voor Silverlight precies werken. Dit boek bevat talloze bruikbare oplossingen voor problemen die u bij uw Silverlight-projecten tegen kunt komen.

Microsoft staat pal achter deze techniek en neemt het op in eigen websites, nieuwe platformen en toekomstige ontwikkelingen. Silverlight kunt u in de browser draaien, op de desktop installeren en het is onderdeel van de komende versie van SharePoint. De markuptaal XAML is niet alleen onderdeel van Silverlight, maar ook van Windows Presentation Foundation voor Windows-applicaties en van Microsoft Surface, de multi-touch tafelcomputer. Uw kennis van XAML kunt u op deze platformen ook toepassen.

Bestel ‘m alvast bij je favoriete boekhandel online:

http://www.boox.nl/nl/boek-handboek-silverlight-3-9789059403888

http://www.comcol.nl/detail/67156.htm

http://www.bol.com/nl/p/boeken/handboek-silverlight-3/1001004006437928/index.html

http://www.bruna.nl/boeken/handboek-silverlight-3-9789059403888

http://www.computerboek.nl/boek/9789059403888/handboek_silverlight_3_antoni_dol

http://www.proxis.nl/BENL/Product/Silverlight_3__Handboek/3472212__detail.aspx

Meer informatie vindt je bij de uitgever, Van Duuren Media.

Gepost door: antonidol | vrijdag 10 juli 2009

Silverlight 3 RTW!

Het feestje is op 10 juli pas, maar als je nu de Silverlight plug-in opnieuw installeert,
 krijg je de Silverlight 3 RTW versie:

Silverlight 3 RTW

Silverlight 3 RTW

Er is ook een Beta van Expression Blend publiekelijk gemaakt.

Er is een 3.0 SDK en de Silverlight Tools voor Visual Studio 2008 SP1.

Njoy!

Gepost door: antonidol | zaterdag 25 april 2009

Mix Essentials Europe is Serious: Serious Games in Silverlight

It took a while, but finally the session on Serious Games is added to the reserved slot at the end of the first day of Mix Essentials Europe on the 28th of May.

Together with TNO, André van der Plas and myself will present our experience and some cases, where we successfully used serious games to educate employees and citizens.

It is going to be very interesting! See you there!

Gepost door: antonidol | maandag 6 april 2009

Simple rules for an enjoyable experience

“Having clear goals and expectations for whatever we do, paying attention to the consequences of our actions, adjusting skills to the opportunities for action in the environment, concentrating on the task at hand without distractions – these are the simple rules that can make the difference between an unpleasant and an enjoyable experience” Mihaly Csikszentmihalyi in Creativity.

Dit citaat kwam ik tegen terwijl ik research deed voor het handboek Silverlight. Het lijkt perfect te passen als definitie en voorwaarden voor wat we User Experience (UX) noemen. Dit geeft je handvaten bij het vraag: wat moet ik doen om een goede UX te bereiken?

  • Zorgen dat de doelen van de eindgebruikers duidelijk gedefinieerd zijn en dat je een ontwerp gemaakt heb waarmee ze dat kunnen bereiken.
  • Goede en onmiddellijke feedback, zodat duidelijk is wat er gebeurd en wat de gevolgen zijn van acties. Gebruik van Direct Manipulation om het gevoel van controle te vergroten.
  • Ervoor zorgen dat gebruikers met verschillende vaardigheden de site of applicatie goed kunnen gebruiken. Scaffolding: leren in kleine stappen en het geleerde weer toepassen in nieuwe taken. Progressive disclosure maakt het mogelijk om met een eenvoudige interface te beginnen, maar toch geleidelijk steeds meer functionaliteit zichtbaar en bruikbaar te maken.
  • Direct Manipulation in een venster maakt het mogelijk om op een taak te concentreren.Voorkomen dat dialoogvensters en messageboxen de flow van de applicatie onderbreken.

Dit citaat komt uit de vorige eeuw en is niet geschreven met ontwerpen voor software in gedachten. Toch lijkt het uitstekend te passen bij wat we deze dagen als uitdaging voor interactie ontwerp zien: een “enjoyable experience”.

Categorieën