Blog

Change FontSize with ElementBinding

Change text size using ElementBinding between a Slider Value and and TextBlock FontSize. With a Converter and ConverterParameter you can dynamically change the size of the text. Let users control font size!

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!

SketchFlow Behavior CheatSheets

The SketchFlow Behavior CheatSheets make it easier to use the Conditional Navigation and the Global State Behaviors for SketchFlow prototypes.

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!

Handboek Silverlight 3!

Het Handboek Silverlight 3 is uit. Het eerste en vooralsnog enige boek over Silverlight 3 in het Nederlands.

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.

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!

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”.

How to place a vector illustration in Silverlight 2 Application Resources

Place large pieces of XAML in the application resources with the use of a Content Control and it’s Template property. Now you can place those large vector illustrations away from you page layout.

Recently, I did a presentation on how to structure a Silverlight Application using Styles and Resources. This covered several topics about structuring XAML using only the Blend User Interface as a tool.

When you create a Style, Blend goes in Style Recording mode (even though there is no visual indication of that) and all properties you set in this mode are collected in your styles automatically. Just remember to begin creating a Style, you can’t convert inline properties to styles momentarily.

You can create a Resource from almost everything (although you cannot always use them as such) using the small square to the right of the input box for the property in the Property Panel. Using the Resource Panel in Blend reorganizing Resources is straightforward. You can even move User Control Resources to the application level by dragging the layer to the Application Resource Dictionary in the Resource panel.

Placing animations in App. xaml is certainly possible with the technique I mentioned earlier. You’ll have to start the animation using code.

All this helps to set up a more structured version of your Silverlight Application. But… One thing missing from this list is how to remove large vector illustrations in XAML from you pages and place them as a resource in the application level. That way large chunks of XAML are out of the way and they can be reused using only one line of code: efficient and good for your application’s performance. With the following technique, you can put ANY large, coherent piece of XAML away as a resource. Anything that you can stash in a Grid panel, for example.

The trick is the use of a Content Control and to set it’s Template property to a ControlTemplate that is used as a Resource:

[sourcecode language=”XML”]

 

     
           
               
                   
                   
               

               
                   
                       
                           
                               
                               
                               
                               
                           

                           
                               
                                   
                               

                           

                       

                   

               

               
                   
                       
                           
                               
                               
                           

                           
                               
                                   
                                   
                               

                           

                       

                   

               

           

       

[/sourcecode]

So, clean up your XAML markup. With this trick you can remove those large vector illustrations from you screen layout and place them out of the way in app.xaml.

Njoy!

Intellisense for Expression Blend 2 SP1 working again!

I found a message saying: “FYI I was able to get the Intellisense plugin working against 2.0 sp1 simply by recompiling the source against the 2.0 sp1 assemblies”. As a designer, it was a bit too short and cryptic for me. But I decided to have a go anyway. And it works!

Tonight I found this short cryptic message by Bennage on the MSDN Code Gallery site:

Blend 2.0 SP1
bennage
Oct 1 at 4:37 PM 
FYI I was able to get the plugin working against 2.0 sp1 simply by recompiling the source against the 2.0 sp1 assemblies.

As a designer, it was a bit too short and cryptic for me. But I decided to have a go anyway. This it what I had to do do make Intellisense working again for Blend 2 SP1:

  1. Download the original BlendSense_Install.zip from the MSDN Code Gallery site:
    http://code.msdn.microsoft.com/BlendSense/Release/ProjectReleases.aspx?ReleaseId=1358
  2. Install the Addin as explained on the Homepage: http://code.msdn.microsoft.com/BlendSense
    Blend.bat, Addins folder with a DLL and the Schemas Subfolder should all be in place. If you have a failed attempt to install BlendSense for Blend 2 SP1, you’ll probably be in good shape 😉
  3. Download the Code from the MSDN Code Gallery site:
    http://code.msdn.microsoft.com/BlendSense/Release/ProjectReleases.aspx?ReleaseId=1358
  4. Upzip it to your visual studio or Blend projects directory:
    c:\users\YOU\Documents\Expression\Expression Blend Projects
  5. Start Visual Studio or Expression Blend and load the Expression.Blend.Intellisense project
  6. Open the Solution Explorer or Project tab and check the References  folder to find several dll’s that are missing or invalid, marked by a yellow exclamation mark
  7. Right-click on the References folder and select Add Reference…
    Click the Browse tab in the Add Reference dialogbox and browse to your Blend 2 SP1 location: “c:\program files\Microsoft Expression\Blend 2”
  8. Select all the DLL files that are missing by keeping the Ctrl key down while clicking the filenames. Click OK. The yellow exclamation marks in the Solution Explorer or Project tab References folder will disappear.
  9. Build the project using Build/Rebuild Solution. If all is well, the build will succeed.
  10. Check the debug folder in de Expression.Blend.Intellisense folder for a DLL called Expression.Blend.Intellisense.dll (if you made a release build you’ll find it in the Release folder of course).
  11. Copy this file to the Add-In folder in the Expression Blend program folder: “c:\program files\Microsoft Expression\Blend 2\Addins” Replace the existing file with the same name but smaller in size with this new DLL. Don’t paste it in the Blend program folder, but in de Add-in folder.
  12. Run Blend.bat from the Blend Program folder.
    This contains the command:
    start Blend.exe -addin:Addins\Expression.Blend.Intellisense.dll
  13. Blend wil start and ask you to open your last project. Open the project.
    Press F11 twice or click the XAML tab at the top right of the working area in Blend.
  14. Press Ctrl + Spacebar inside any XAML statement to find intellisense working!

Thanks bennage for the original post at: http://code.msdn.microsoft.com/BlendSense/Thread/List.aspx and of course many, many thanks to Stefan Dobrev for making it all possible at http://blogs.telerik.com/StefanDobrev/Posts/08-08-04/IntelliSense_for_Expression_Blend.aspx

Hope this helps (I know it will!) Njoy!

WPF 3D: Presentation at the Software Development Conference (3): Deepest

deepestDe derde Demo heet Deepest en gaat over interactieve schermen op driedimensionale oppervlakken. Ik spin en flip hier planes met een Registratieformulier erop. Verder schanier ik die planes opzij in twee richtingen en draai ik ze uit de hoek in beeld voor ik ze rechtzet. Ook hier is een Harmonica te zien, eigenlijk twee: een bovenin het scherm met portretjes en een rechtsonder in het scherm die afbeeldingen bevat. Die kunnen gecombineerd worden tot interessante 3D oplossingen voor master/details scenario’s. Verder toon ik hier ook kubussen met formulieren van buiten en van binnen en draai de camera om een kubus met formulieren erop.

Daarnaast zitten er nog wat verassingen in de demo’s. Linksonder in Deep klapt een Expander uit om buttons te tonen waarmee ik de Xbox doos omvorm tot boeken over WPF 3D: 3D Programming For Windows van Charles Petzold, WPF Unleashed van Adam Nathan en mijn eigen Handboek XAML, waar ook een hoofdstuk over 3D in staat.

deepmacawenergydrinkOm te bewijzen dat andere modellen dat een rechthoekige doos ook kunnen, wilde ik een blikje frisdrank tonen. En welk blikje is beter geschikt dan die van de Macaw Liquid Energy, die ook tijdens de SDC wordt uitgereikt? Het was tamelijk eenvoudig om in de 3D modelleer applicatie ZAM3D de rechter contour van het blikje te tekenen en via de lathe functie (denk draaibank) er een cylinder van te maken. De afbeelding erop is van het oorspronkelijk ontwerp voor het etiket, al aangepast is aan de nieuwe huisstijl. Via de Viewbox en Viewport eigenschappen is die op de juiste plaats gezet en een animatie, die het blikje eindeloos ronddraait, maakt het helemaal af.

Dit alles levert materiaal op voor de mensen, die de sessie op de Software Development Conference bezoeken, met voorbeelden en code om zelf in hun interfaces met 3D aan de slag te gaan. Ze krijgen een CD mee met de presentatie en de mogelijkheid om vanuit de slides deze demo’s op te starten. Verder staat op de CD alle broncode die ik het verzameld en geschreven om deze demo’s te laten werken.

De demo en de source code zijn beschikbaar via mijn public map op mijn SkyDrive:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public