Tag: Handboek Silverlight 3

Silverlight en Expression Insiders, de user group voor Silverlight Designers

Als je een groep van vakbroeders in Silverlight en Expression Studio wel ziet zitten, laat dan je e-mail adres achter op de Sixin site, zodat we je op de hoogte kunnen houden van de ontwikkelingen.

WOHMBLGE Sinds Silverlight 1.1 in beta uitkwam, is mijn doel geweest om mooie en krachtige internetapplicaties te maken met de Expression tools en Silverlight. Gelukkig sluit dat aan op mijn werkzaamheden als senior designer bij Macaw, waar we de afgelopen jaren veel mooie WPF- en Silverlight-projecten hebben mogen uitvoeren voor verschillende opdrachtgevers. Ik ben er van overtuigd dat Silverlight ongekende mogelijkheden biedt om indrukwekkende userinterfaces te creëren. Juist dat ongekende houdt me bezig. Daardoor schrijft in artikelen, waarin in webdesigners van Nederland probeer te vertellen wat je allemaal kan creëeren en bereiken met XAML als taal, Silverlight als techniek en Expression Studio als tools. Daarom is het ook logisch dat ik bestuurslid ben van de Silverlight en Expression Insiders.

Ik verwacht dat er meer ontwerpers zijn als ik. Ik heb groot respect voor de software die Adobe in de markt zet. De Creative Suite is onmisbaar als het gaat om de creatie van bitmap- en vectorillustraties. Zelf gebruik in geen Mac, maar heb er in het verleden wel mee gewerkt en vind het mooie apparaten. Vanuit mijn werk en de relatie van mijn werkgever met Microsoft is het gebruiken van een Mac op z’n zachts gezegd onhandig. Als ontwerper bedien ik uitsluitend klanten die al voor het Microsoft platform hebben gekozen om hun zakelijke applicaties op te draaien. Het is logisch dat de taal, techniek en tools voor het creëren van deze software ook op het Microsoft platform draait. Met Expression Studio en Silverlight is dat realiteit.

Maar waar zijn die andere ontwerpers op het Microsoft platform? Ontwerpers die, behalve met de Creative Suite, met Expression Studio en Silverlight hun werk doen? Tot voor kort was er geen echte user group voor deze ontwerpers. Ik verwacht dat ze vanuit de developers discipline komen en verknocht zijn geraakt aan de interface naar gebruikers. Of het zijn ontwerpers, zoals ik, die voornamelijk voor het Microsoft platform werken. Met de Silverlight en Expression Insiders (Sixin) is er nu een user group voor deze ontwerpers. Mensen die lid zijn van de Adobe User Group kunnen heel goed ook lid zijn van de Sixin, net als ik naast Expression Design en Blend bijna dagelijk met Photoshop en Illustrator werk. In een komend SDN Event laat ik Blending Creative Suite en Expression Studio zien.

Ik ben op zoek naar vakbroeders, die ook de nieuwe mogelijkheden in Silverlight 4 willen ontdekken en in bijeenkomsten en discussies op de hoogte blijven van de ontwikkelingen en samen leren om het allerbeste en mooiste werk te maken met Silverlight en de Expression tools. Sluit je aan bij de Silverlight en Expression insiders, zodat we elkaar verder kunnen helpen. Ik kan zelf niet events organiseren. Ik ben een designer, geen manager. Maar als designer kan ik op zo’n event natuurlijk wel bijdragen. Door te presenteren, door te reageren en te discussiëren. Dat is ook precies wat ik van plan ben te gaan doen op komende Sixin events. Voorlopig werkt de Sixin samen met de andere .NET user groups in Nederland om tot inspirerende bijeenkomsten te komen.

looksGREATeverywhereAndere initatieven die klaarliggen om verder te ontwikkelen zijn, even afgezien van Sixin website zelf, een Gallery waarin we ons werk kunnen delen en er op kunnen reageren. Zie dit als een goede mogelijkheid om feedback op je werk te krijgen van vakbroeders, van wie je de mening kunt respecteren omdat ze weten waarover ze spreken. Zo kunnen we elkaars werk zien en de laatste ontwikkelingen van andere ontwerpers volgen. Een van mijn dromen is om, naast de twee boeken die ik nu over XAML en Silverlight heb geschreven, een puur visueel boek te maken, waarin de pracht en praal van ontwerpen in Silverlight en met Expression Studio verzameld zijn. Het zoeken is naar een uitgever, die inziet dat je mensen voornamelijk kan inspireren door de mooiste resultaten die je met Silverlight kan bereiken visueel en toegankelijk te maken. De Gallery op de website van Sixin zou een mooie basis zijn om ontwerpen uit te selecteren voor zo’n koffietafelboek. Verder zou ik graag een eigen magazine uitbrengen, waarin ontwerpers hun werk kunnen toelichten, maar ook educatieve artikelen in staan. Deze initiatieven zijn we nu nog niet aan ontwikkelen, maar geven wel aan waar de Silverlight en Expression Insiders naar toe kan groeien. Als je zo’n groep van vakbroeders in Silverlight en Expression Studio wel ziet zitten, laat dan je e-mail adres achter op de Sixin site, zodat we je op de hoogte kunnen houden van de ontwikkelingen.

Njoy!

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…

[sourcecode language=”XML”]
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;
}
[/sourcecode]

…er dit staan:

[sourcecode language=”XML”]
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;
}
[/sourcecode]

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

[sourcecode language=”XML”]
<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 };
[/sourcecode]

…er dit staan:

[sourcecode language=”XML”]
WriteableBitmap wbmUI = new WriteableBitmap((int) TheGrid.RenderSize.Width,(int) TheGrid.RenderSize.Height);

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

Njoy Writeable Bitmaps!

10 Silverlight loading animations using percentages (HBSL3 Addendum 1)

I’ve been thinking about what ways you’d have to show a loading animation using the progress percentage in a meaningful way.

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.

[sourcecode language=”XML”]
<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>
[/sourcecode]

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

[sourcecode language=”XML”]
<param name="splashScreenSource" value="SplashScreen.xaml"/>
<param
    name="onSourceDownloadProgressChanged" 
    value="onSourceDownloadProgressChanged" />
[/sourcecode]

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

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

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!

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.