ADdendum

Gepost door: antonidol | vrijdag 20 november 2009

Top 10 Silverlight 4 beta features for Designers

Silverlight 4 beta is out and delivers several new features for programmers, media people and designers. As a designer I was most interested in some specific features, so I’d like to share my top 10 with you.

10. Command property on buttons and hyperlink

I’ll have to explain this one. John Papa’s whitepaper only speaks of the MVVM pattern context, but in the WPF world commands are well known. Actually it is a feature not unlike Behaviors, because they encapsulate programming code in a simple property on a button or a hyperlink. The action that follows when clicking that button or hyperlink is determined by the command. Also, it is possible to include a parameter that the command can use. Thus it is used more dynamically and is more flexible. When developers create commands, designers can easily connect them as a simple property of a button or hyperlinkbutton.

9. StringFormat, TargetNullValue, FallbackValue on Data Binding

Again, maybe not straightforward, but these additions to the data binding functionality of Silverlight helps designer to format the results of data binding with more ease. TargetNullValue will show a value when the binding has null as a result, so you can insert a zero or other sensible value instead. The FallBackValue is about the same, but it shows up when a binding is unsuccessful. You can apply a different value instead. The best of the three is the StringFormat property, which allows you to format the text resulting from data binding. This way a designer can easily indicate that output is a currency or a percentage or a date in a specific format.

8.Webbrowser control and HTML brush

This seems like a nobrainer, but some restrictions are present. This only works in sandboxed applications, which means that you have to have an Out-Of-Browser application. You can use inline HTML (NavigateToString), an inline HTML document (Navigate) or an URL (Source).

string html = "<HTML><HEAD></HEAD><BODY style=’margin:0 padding:0′><IFRAME width=’100%’ style=’overflow: hidden;’ height=’100%’ src=’http://www.microsoft.com’ /></BODY></HTML>";

HtmlContent.Navigate(html)

The HTML brush lets you paint with a webpage, so you can use it as a Brush in any Shape.

<Path.Fill>

</Path.Fill>

</Path>

And in C# set the source: htmlBrush.SetSource(MyWebBrowser);

7. CompositeTransform

This makes a designers’ live a bit easier: combine Translation, Rotation and Scale in one go:

</Rectangle.RenderTransform>

</Rectangle>

6. Webcam and Microphone support

This one is self-explaining, but… What are designers and developers going to do with it? Check out the blog-post by Rob Houweling on the Silverlight and Expression Insiders site for details about this feature.

5. Rich Text Area control

Finally a way to create richer text experiences using the Rich Text Area. This will end the struggle with Run elements in TextBlocks to change a color, font or font size inside a text object. The Rich Text Area control welcomes every type of content. This includes other controls like Images and UI controls. Create bold, italic, colored text inside a block of text with ease using the Rich Text Area control. Will this lead to the inclusion of FlowDocuments in Silverlight one day?

4. ViewBox

A ViewBox is a handy container that allows you to scale up or down any graphic or large element that you want to display on a screen. Use the original sizes for the content and set the ViewBox to the size you want the content to show up. It’s that easy and very convenient at times. A ViewBox can contain only one element inside. It’s StretchDirection can be UpOnly, DownOnly or Both. The content can be Stretch-ed using None, Fill, Uniform and Uniform to fill, just like it’s WPF version.

</Viewbox>

3. Fluid UI States for ItemsControl

I’d be very interested to see what designers and developer create with this feature. Create an ItemsControl and hook up interesting appearing and disappearing animations when adding or deleting items from the control. This not only allows you to animate ListBoxItems with ease, but opens the door to exiting navigation using items in ItemControls. Who’s up for the challenge? The new visual states are: BeforeLoaded, Loaded, and Unloaded.

2. Implicit Style

Styling an application helps in acceptance and defining a look for different groups of users. Implicit Styles will help a lot in implementing Themes. Actually the ToolKit people have already removed the Implicit Style Manager that took care of this. Just omit the x:Key and all controls of a the specific type will take on the style you give them. Combined with swapping ResourceDictionaries you have theming solutions available.

1. Printing support

Even though it is only possible in code, printing support is a huge improvement from a designers’ point of view. This is the most requested feature for a reason. It is possible the print the content of a page using the LayoutRoot, or any other container that you specify. It is also possible to print objects that are entirely invisible on the screen, but you’ll have to build a tree of objects in memory a feed that to the print command. This opens up enough possibilities to satisfy business consumers. So output your work to printers everywhere…

PrintDocument pd = new PrintDocument();

pd.PrintPage += (s, args) => {

args.PageVisual = LayoutRoot;

};

pd.Print();

These are the features that caught my eye as a designer. Some didn’t make it to the top ten, like the WordEllipsis TextTrimming property, Right Mouse Click Events and ScrollWheel events and ClipBoard support. Other features are more interesting for media people or developers. Check out Tim Heuer’s blog or John Papa’s white paper for all details on all new Silverlight 4 features.

Njoy!

1 Reactie

Geplaatst in Silverlight, Silverlight 4 Beta

Gepost door: antonidol | vrijdag 20 november 2009

Tip: Set DesignWidth and DesighHeight when styling Silverlight 3 controls

I rediscovered the usefulness of the DesignWidth and DesignHeight Blend properties while styling several controls.

Next time you are looking at a very small ControlTemplate in Resource Editing Mode in Expression Blend, don’t forget to set the design-time width and height. It will make your life easier. You can set it at the expected size of the control in de real interface and you can work in the control and see a reasonably sized control.

Styling a TabItem, for instance, will show the tab at the MinimumWidth en MinimumHeight of 10 pixels, leaving you a 10×10 pixel tab to work with. Setting the DesignWidth and DesignHeight properties on the root grid of the control to, say 150 and 25 gives you room to work with and a more realistic view on the tab.

This needs the Blend NameSpaces at the top of the page to work:

xmlns:d=”http://schemas.microsoft.com/expression/blend/2008″
xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006″ mc:Ignorable=”d”

Njoy!

Laat een reactie achter

Geplaatst in Blend, English Only

Gepost door: antonidol | zondag 15 november 2009

Silverlight Style: GlassBorderStyle

Created a simple, but nice Glass Border for a panel in my current Silverlight 3 project. I’d like to share it with you…

To use this style:

Njoy!

Laat een reactie achter

Geplaatst in Silverlight, XAML

Gepost door: antonidol | vrijdag 30 oktober 2009

Use initParams to swap ResourceDictionaries and load a Theme in Silverlight 3

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!

Laat een reactie achter

Geplaatst in ADdendum, English Only, Silverlight, XAML

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!

Laat een reactie achter

Geplaatst in Dutch Only, Erratum, Handboek Silverlight 3, Silverlight

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…

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!

2 Reacties

Geplaatst in ADdendum, English Only, Handboek Silverlight 3, Silverlight, XAML

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:

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.

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

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…

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

Working code is on my SkyDrive… Njoy!

Laat een reactie achter

Geplaatst in English Only, Silverlight, XAML

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.

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!

Laat een reactie achter

Geplaatst in Blend, English Only, Handboek Silverlight 3, SketchFlow

Gepost door: antonidol | woensdag 2 september 2009

Kleurgebruik in 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.

Laat een reactie achter

Geplaatst in Blend, Dutch Only, Handboek Silverlight 3 | Tags:Blend, Handboek Silverlight

Gepost door: antonidol | dinsdag 18 augustus 2009

Handboek Silverlight 3!

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

1 Reactie

Geplaatst in ADdendum, Dutch Only, Handboek Silverlight 3, Silverlight, XAML

Oudere Berichten »