WPF 3D presentation at Software Development Conference (1): Deep

First part of a three-part post on my presentation called Deep, Deeper, Deepest on WPF 3D. This time: Deep, a product presentation demo showing off all possibilities of 3D graphics.

Last week Tuesday at de Software Development Conference I finally gave the presentation called Deep, Deeper, Deepest on WPF 3D I had been preparing for weeks. Even though the attendance stuck to 18 indidividuals, evaluations showed a score of 7,6 with high scores for Use of Visual Aids. I will be posting screenshots, executables and code, along with a description of the demos. This will be spread over three consecutive posts. Today is about Deep:

Deep Demo Screenshot
Deep Demo Screenshot

Some people may have seen this first demo. It is called Deep and shows a Xbox box in the middle of the window. The demo is now filled with all features of 3D Graphics: model, geometry, camera, lights and textures. I created animations for it and several elements are controlled by sliders. The intention was to show off the capability for product presentations in WPF. This demo uses a Viewport3D, a control that participates in 2D screen layout like any other, but can only contain 3D information itself. The box is rotated using the buttons and the sliders. Using the textboxes to the left, the Width, Height and Depth are changed to update the size of the box. The Sphere to the left makes rotating the box possible, with the help of Hittesting on the Sphere. Rotating the camera is achieved, using the sliders at the top right hand side of the screen. Buttons below that will animate the camera to different views. The slider at the bottom right of the screen kan dim the lights to demonstrate the difference between AmbientLight, DirectionalLight and SpotLight. URLs of textures in the textboxes at the bottom of the screen allow the textures to be changed using Data Binding.

The Demo executable and the source code are available from the public folder on my SkyDrive at:

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

This makes a wonderful toy, playing around with all the possibilities a single model has using a 2D interface with buttons, sliders and textboxes. It works primarily through Element Binding to Sliders and Textboxes and uses Buttons to start the animations. You can also download and use the Code from the link above.

Njoy! 

Sommige mensen hebben willicht de eerste demo al gezien. Het heet Deep en heeft een Xbox doos in het midden. Die demo is nu verder ingevuld, zodat alle onderdelen van 3D Graphics aan bod komen: model, geometry, camera, lights, textures. Daarvoor heb ik animaties gemaakt en bovendien zijn de onderdelen via sliders te besturen. De bedoeling is om de mogelijkheden voor een productpresentatie in WPF zichtbaar te maken. Deze demo maakt gebruik van een Viewport3D, een control dat gewoon in de 2D layout van een scherm meedoet, maar zelf uitsluitend 3D informatie kan bevatten. De doos is met de buttons en sliders om te draaien en met de tekstboxen links kan de Width, Height en Depth aangepast worden om een ander formaat doos te tonen. De bol links maakt het mogelijk om via HitTesting op de bol de rotatie van de box aan te sturen. De camera wordt gedraaid met de sliders rechtsboven. De knoppen eronder animeren de camera naar een bepaalde view. De sliders rechtsonder kunnen de lichten doven en zo het verschil tussen AmbientLight, DirectionalLight en SpotLight inzichtelijk maken. URLs van textures maken het mogelijk om deze snel te veranderen.

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

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

Dit levert erg leuk speelgoed op, waarmee je kan spelen met alle mogelijkheden die een enkel model heeft via een 2D User Interface met buttons, sliders en tekstboxen. Het werkt voornamelijk met Element Binding aan sliders en tekstboxen. Het gebruikt Buttons om de animaties te starten. De code kan je ook downloaden via de link hierboven…

Nooks and Crannies of Expression Blend – Part 1

Working in Blend for more than a year and a half now, you should think I have seen about every screen and dialog there is…

Working in Blend for more than a year and a half now, you should think I  have seen about every screen and dialog there is. Recently I’ve been working with WPF 3D a lot and I found the Material editor in Blend… More surprisingly even was the discovery of the Grid Column en Rowdefintions Dialogs. No more struggling to set the star size of a Column exactly or in XAML. It was there all the time. I’ll keep on the look for more Nooks and Crannies of Expression Blend. If you know one, let me know…

Silverlight Animations as Application Resources in app.xaml

I like to have my Silverlight animations apart from the rest of the XAML, because they can become very lengthy and are not really relevant to the functionality of the UI. Here’s a solution…

I like to have my animations apart from the rest of the XAML, because they can become very lengthy and are not really relevant to the functionality of the UI. It’s better to edit them separately.

The animations in Silverlight have to be started using Event Handlers in a Code Behind file in Silverlight instead of the Triggers used in WPF. The Triggers were able to connect to the target object for an animation. The Event Handlers won’t do that for you.

You’ll have to find the Animation Resource, assign it to a Storyboard object in the Code Behind file of your page and set the Target element for that Storyboard before starting the animation.

Michel Heijman helped me out with this. This is his solution:

Create a helper class that can find Resources for you (like in WPF). Save this in the root of your project and name it ResourceLocator.cs.

[sourcecode language=”C#”]
using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace AnimationsAsApplicationResources
{
    public static class ResourceLocator
    {
        ///

        /// Helper method for finding resources located in app.xaml
        ///

        ///         ///
        public static object FindResource(string name)
        {
            if (App.Current.Resources.Contains(name))
            {
                return App.Current.Resources[name];
            }
            else
            {
                FrameworkElement root = App.Current.RootVisual as FrameworkElement;
                return root.FindName(name);
            }
        }
    }
}
[/sourcecode]

In the Code Behind of your page, add the following to access the Animation Resource, set the TargetName for it and to run the Animation:

[sourcecode language=”C#”]
        private void startStoryboard1(object sender, RoutedEventArgs e)
        {
            // find the storyboard with helper class:
            Storyboard Storyboard1Resource = ResourceLocator.FindResource(“Storyboard1” ) as Storyboard;
            if (Storyboard1Resource != null)
            {
                // Set target for storyboard:
                Storyboard.SetTarget(Storyboard1Resource, Rectangle1);
                // Begin storyboard:
                Storyboard1Resource.Begin();
            }
        }
[/sourcecode]

Don’t forget to place your animation in app.xaml now 🙂 No need to change the app.xaml.cs file for this…

Njoy!

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