Silverlight 2 beta 2 dropshadows using Blends

Lacking the DropShadow BitmapEffect that is present in Windows Presentation Foundation, we cannot use BitmapEffects to create shadows for containers. This doesn’t mean no shadows are possible in Silverlight 2. In the old days of CorelDraw 5 we used so-called Blends to create shadows in vector drawings. Blends are a feature that morphs one shape to another using several steps. In these steps new shapes are created that are in-between the starting and the resulting shape. Actually I think Expression Design does Blending. Just make sure the program can guess which vertices it can map to vertices on the resulting shape. If you don´t your shapes go haywire :).

Using XAML you can emulate Blends in vector drawing programs. Below is a piece of code that mimicks Blends. Note that the Margin used is always 1 to ensure a smooth gradient. Note too, that the used color is almost transparant Black. These transparent colors add up to a nice shade of gray. If you want to have a darker shadow, just make this color darker. I have not used Resources just to keep the XAML concise, but I would make editing the Shadow color easier. Actually, you can make a UserControl like a ShadowBorder that not only allows for changing the shadow color, but also the shadow direction. Anyone who makes a user friendly control like that, please let me know…

[sourcecode language=”XML”]

 
  
  
  
  
  
  
  
  
  
  
  
  

  

  
   
  

 


[/sourcecode]

Njoy!

Color Palettes using Color Resources in Silverlight

I’ve been asked by a client if it was possible to make color versions of a design. I told him that that was actually very easy. And it is. It is just that you have to treat your colors a little different: you’ll have to create color palettes using Color Resources. Because that worked a little different in Silverlight 2 Beta 1 than in WPF I was on the wrong foot for a long time. Finally I worked it out and here it is:

There’s only one way to specify a Color in Silverlight:

[sourcecode language=”XML”]#FF800000[/sourcecode]

and this gets underlined in Visual Studio indicating that Color cannot have direct content (meaning the color code between the <Color> and </Color> tags). You’ll have to ignore that 🙂

All other ways to specify color won’t work in Silverlight:

[sourcecode language=”XML”]
  
       
       
       
       
       
[/sourcecode]

Note that at least the second and the fourth are valid in WPF. The third seems to go well in Blend, but gives an error in the browser and won’t show anything: the screen remains white.

Still, this allows you to create palettes of color. Here’s one with two colors:

[sourcecode language=”XML”]#FF800000[/sourcecode]
[sourcecode language=”XML”]#FFFF0000[/sourcecode]

  

You can use these in SolidColorBrushes and LinearGradienBrushes like these:

[sourcecode language=”XML”]
       
       
       

       
       
           
           
       

[/sourcecode]

Place all this in app.xaml between de <Application.Resources> tags and you’ll be ready to apply them in some normal XAML:

[sourcecode language=”XML”]
 
  
   
  

  
  
   
 

[/sourcecode]

What makes it easy to make color versions of a design is the fact that you can easily replace the two color codes in the Palette to change the look of the entire application! This would do the trick:

[sourcecode language=”XML”]
  #FF008000
  #FF00FF00
[/sourcecode]

Be aware of the use of a Color Resource (colBright) in a LinearGradientBrush, but a Brush Resource (brBright) when you use it for a Fill or a Stroke.

So with about 10 colors as resource in app.xaml, you can actually create a basis for skinning your application. It’s just that now I still have to replace all the separated colors in my project with StaticResources and that will take some time… So now it is easy, but it will take a while 🙂 If you remember to work like this from scratch, you’ll be fine when a client ask you if color versions are possible…

Njoy!

Using the Blend Visual State Manager (VSM) on the MediaPlayer-style VideoButton

 Last weekend I played around with the new version of Blend 2.5 to see how the Visual State Manager (VSM) was working. I was pleasantly surprised by the simplicity of it all. Actually it works just like an animation. You just don’t need a timeline for states. So if you know how to animate in Blend, it is fairly easy to add states to buttons. To show you, I’ve adde states to the MediaPlayer-style videobutton I made in the previous post.

First doubleclick the button in the Objects and Timeline category in the Interaction Panel. A yellow line indicates it is selected. Then from the Button in the breadcrumbsbar below the titel of the document, click the little arrow and select Edit ControlParts (Template) and Edit Template. Since we’re using a button with a self-made template we already have a template. If you start with a new button, you’ll have to create a template using the menu first.

In the button Template, the States Category in the Interaction Panel will show several default states for the button. Below,  I’ve selected the pressed state. The “State Recording is on” message appears in red and just like in animating, you can now change Opacity, Color for that state. You can even use transformation, as you may notice that the glow and the TextBlock are moved down a few pixels.

The Name of the elements of the button in the Templates are preceded by a red circle with a white arrow to indicate it is particitpating in the current state. I have not discovered how to delete this using the UI, but you can easily find it in the XAML is you have to.

You can add transitions for the several states of this button using the + icons and – icons on the State bars. Change the transistion time with the (as buttons disguised) TextBoxes. You can drag to change the value like in other TextBoxes in Blend.

These are the states I created: a lighter yellow for the MouseOver, a darker yellow and transitions on the glow and text for the Pressed and a colorless version for the Disabled state. Note the the Focus state kicks in when the button is Pressen and remains Focused when released…

 

 

 

 

 

 

 

 

 

 

 

 

The XAML that the VSM generates is rather lengthy. Just as an example here’s the state which has least code (except for the Normal state that has an empty Storyboard)…

[sourcecode language=”XML”]

       
        
         
          
          
         

         
          
         

         
          
           
            
           

           
            
           

           
            
           

          

         

        
       

[/sourcecode]

Njoy!

Create a MediaPlayer11-style Playbutton with glow

Just to show how easy it is to make a button in MediaPlayer11-style. Here’s a short HowTo on how to do this in Expression Blend:

In Blend, open a New Project…

Select Ellipse in Toolbox

Drag Ellipse 150px, Hold Shift to constrain to circle

 

 

 

Click Stroke, Add 3px brown stroke to the circle

Create RadialGadient Yellow, Dark Yellow, Yellow

Click Brush Transform in Toolbox (G):

 

 

 

 

[sourcecode language=’xml’]















[/sourcecode]

Copy And Paste Ellipse in front of existing Ellipse

Hold ALT and Shift dragging lowerleft handle to the middle of the ellipse.

 

 

 

Fill LinearGradient White on Top, White op bottom, with Alpha set to Zero.
Set Stroke to none

 

 

 

Select Object/Path/Convert to Path

Select Direct Selection Tool in ToolBox (A)

 

 

 

Drag bottom Controlpoint up above the middel of the lower ellipse

 

 

 

 

Finish up with characters from WingDings font and a circle with Black to White diagonal LinearGradient behind the button.

 

 

 

Njoy!

[sourcecode language=’xml’]

 
  
   
    
     
     
    

   

  

  
   
    
     
      
       
       
      

     

     
     
     
    

   

  

  
  
   
    
     
     
    

   

  

 

[/sourcecode]

Visual Studio 2008 Design View uitzetten

Omdat ik toch in Blend werk en VS2008 uitsluitend gebruikt voor het Rebuilden van de Solution, heb ik de Design View niet echt nodig. Ik wissel altijd de Panels om en klik de Design View weg. Sterker nog, het stoort erorm als ik even  een XAML file wil openen in VS2008, omdat de XAML code er meteen staat, maar het programma toch de tijd neemt om de XAML te redeneren in een Design View die buiten beeld staat. Ik heb even geklaagt en daarna toch nog even beter gezocht, maar je kan de Design View toch uitzetten. De omschrijving van de optie in VS2008 is een beetje cryptisch, maar met deze afbeelding zou je het zelf moeten kunnen uitvoeren:

 Remove Design View voor XAML in Visual Studio 2008

Succes!

“Handboek XAML”, specifiek voor designers van applicaties en websites

Eerste boek dat in het Nederlands uitleg geeft over XAML

Macaw-medewerker Antoni Dol schrijft “Handboek XAML”, specifiek voor designers van applicaties en websites

Macaw-medewerker en Senior Designer Antoni Dol heeft een handboek geschreven over XAML. XAML staat voor eXtensible Application Markup Language en is de nieuwe taal voor het programmeren van gebruikersinterfaces voor Windows-applicaties, Silverlight-browserapplicaties en applicaties voor Windows Mobile en mobiele telefoons van Nokia. Wat HTML is voor websites, is XAML voor dit soort applicaties. Het eerste exemplaar van het boek is gisteren uitgereikt tijdens de Microsoft Mix Essentials aan Martin Tirion, User Experience Evangelist van Microsoft Nederland. Microsoft DevDays is het jaarlijkse evenement voor professionele softwareontwikkelaars en architecten in Nederland. Mix Essentials wordt tijdens de DevDays gehouden en is speciaal voor designers.

 Het “Handboek XAML” is het eerste boek dat in het Nederlands uitleg geeft over hoe ontwerpers van gebruikersinterfaces XAML kunnen toepassen bij het vormgeven van schermen voor Windows Vista programma’s en Silverlight browserapplicaties. Sinds 2006 werkt Antoni met Windows Presentation Foundation (WPF) en XAML en sinds dit jaar is daar Silverlight bijgekomen. Informatie die hij voor de uitvoering van zijn WPF en XAML projecten nodig had, haalde hij uit boeken die door programmeurs waren geschreven, maar vanwege het jargon voor een designer moeilijk te begrijpen waren. Dit was voor Antoni de aanleiding om zijn ervaring en kennis te bundelen in een handboek dat zich  specifiek richt op designers, in de taal die zij begrijpen en met onderwerpen en illustraties die hen aanspreken.

 XAML is dé mark-uptaal voor applicaties op basis van Windows Presentation Foundation (WPF), onderdeel van het .NET 3.x-platform, waarmee interfaces voor Windows Vista en browserapplicaties in Silverlight geprogrammeerd worden. Beide zijn bedoeld om gebruikersinterfaces te maken die de User Experience veel beter ondersteunen dan Windows- en browserapplicaties tot nu toe hebben gedaan. Het Handboek XAML is een compleet en een helder naslagwerk van de uitgebreide mogelijkheden van XAML en WPF.

Handboek XAML is uit!

Vandaag heb uit uit handen van de uitgever van Van Duuren Media het eerste exemplaar van het Handboek XAML ontvangen. Het is een mooi, handzaam boek geworden, volledig in kleur en hoewel helemaal bekend, ook helemaal nieuw… Het boek is vandaag (en wordt ook morgen 23 mei) tijdens de pauzes tussen de sessies op de DevDays verloot op de stand van Macaw. 23 mei is ook een nieuwe signeersessie gepland, dus als je mijn krabbel in het boek wil, kom langs!

Hieronder een paar foto’s als bewijs 🙂 

Handboek XAML in de stand van de TechBookShop

Poster met aankondiging signeersessie

Poster met Handboek XAML

Kickoff: Droplet

Om mee te beginnen wil ik een projectje delen, waarin ik geprobeerd heb het logo van een interactieve TV aanbieder in XAML te bouwen. Het bleek een leuke exercitie, met een resulaat dat veel had van het origineel:

In XAML bleek een eenvoudige droplet een combinatie van twee cirkels en een ‘cashewnoot’ Path Shape voor de glimmer. Deze laatste heb ik met de hand getekend in Blend, maar ze zijn eenvoudig te maken door van een cirkel het onderste punt met een “Direct Selection Tool” omhoog te trekken tot voorbij het midden van de cirkel…. De druppels aan elkaar was echter een ander verhaal: hoe krijg je die druppels zo dat ze in elkaar overvloeien?

Uiteindelijk werd het een combinatie van het buitenste Path, aanvankelijk samengesteld uit drie cirkels, maar daarna omgebouwd tot een Path Shape. Het gewenste overvloei effect werd bereikt door een BlurBitmapEffect op de binnenste cirkels te zetten. (Ik snap dat dat niet werkt in Silverlight…)

Dit is de XAML code voor een enkele Droplet:

[sourcecode language=’xml’]


 
  
  
  
 

 
  
  
  
 

 
  
   
     
     
     
   

  

  
   
  

 

 
  
   
    
    
    
   

  

 

 
  
   
    
    
    

  

 

[/sourcecode]

De doelgroep voor Addendum

Find XAls je je afvraagt voor wie deze blog is bedoeld, kijk eens naar deze afbeelding…

Als je nu aan het berekenen bent wat X is, of dat ondertussen al hebt gedaan of als je het antwoord gewoon al wist, dan is deze blog in principe niet voor jouw. Als je het probleem niet ziet en het logisch vindt dat de X die gezocht wordt er gewoon staat, dan ben je meer visueel ingesteld, waarschijnlijk een designer, en zijn deze blogpost wel voor jou bedoeld. Njoy!