Mix Keynote bij Microsoft NL

Ik had het voorrecht om te gast te zijn bij de presentatie van de keynote bij Microsoft Nederland. De hoofdpersoon van de avond was Windows Phone 7 series. Alle kennis die je als developer of designer hebt opgedaan over Silverlight kan je 100% inzetten voor het maken van applicaties voor WP7. Alle gereedschappen om Windows Phone 7 apps te maken zijn gratis beschikbaar. De ontwikkelsoftware is beschikbaar via developer.windowsphone.com. Dank Microsoft NL voor een geslaagde avond.

Ik had het voorrecht om te gast te zijn bij de presentatie van de keynote bij Microsoft Nederland. In combinatie met de SDN had de Silverlight en Expression Insiders usergroup een aantal plaatsen te vergeven. Mensen die zich ingeschreven hebben op Sixin.nl hebben een e-mail gehad met een link naar het inschrijvingsformulier voor het evenement. Ze hebben een ochtend de tijd gehad om zich in te schrijven.

Uiteindelijk waren er zo’n dertig mensen vanuit verschillende gebruikersgroepen en invalshoeken naar het nieuwe Microsoft hoofdkwartier gekomen om de aftrap van de MIX 2010 op een groot scherm in een grote vergaderzaal mee te maken. Er waren drankjes en borrelhapjes, maar zodra de videostream op gang was gekomen was iedereen ademloos aan het luisteren en kijken. In sneltreinvaart zijn verschillende mensen en evenzoveel verschillende demo’s aan het oog voorbijgekomen. Enkele opmerkelijke feiten heb ik via Twitter kunnen verspreiden, totdat mijn telefoon het opgaf omdat hij te lang had aangestaan.

De tweets gingen over de 60% marktpenetratie van Silverlight (in Nederland 72%), de mogelijkheid om fullscreen Silverlight video te kijken op een tweede (of derde) scherm, Silverlight als techniek achter Pivot, Blend 4 als gratis update voor Blend 3, dat e-bay een appstore heeft waar Silverlight apps verkocht kunnen worden en dat Silverlight 4 vandaag Release Candidate is geworden. De RTW wordt eind april verwacht, waarschijnlijk gelijk met Visual Studio 2010.

Maar de nadruk van de keynote van MIX10 lag niet op Silverlight en niet op de Expression tools. De hoofdpersoon van de avond was Windows Phone 7 series, met een uitgebreide demonstratie van de mogelijkheden van de telefoon, inclusief verschillende typen applicaties, door Joe Belfiore. ScottGu bouwde ter plekke de eerste Twitterclient voor WP7 en een collega van hem maakte binnen 8 minuten een foto-applicatie in Expression Blend 4. De Silverlight versie op WP7 is geen Silverlight lite of aparte Silverlightversie. Het is gewoon Silverlight. Alle kennis die je als developer of designer hebt opgedaan over Silverlight kan je 100% inzetten voor het maken van applicaties voor WP7. Er worden in sneltreinvaart een aantal games getoond die gemaakt zijn in XNA en gespeeld op de telefoon, de computer met de muis en een televisie met een XBox controller. Als je apps of games op WP7 wilt krijgen gaat dat via de Marketplace hub. Exacte voorwaarden worden later nader bekend gemaakt. Alle gereedschappen om Windows Phone 7 apps te maken zijn gratis beschikbaar. De ontwikkelsoftware is beschikbaar via developer.windowsphone.com.

Na de presentatie was er tijd om even bij te praten over de nieuwe mogelijkheden. Daarna was er een live verbinding met een aantal Nederlandse bezoekers van MIX10 en de mogelijkheid om vragen te stellen en beantwoord te krijgen. In het restaurant van het Microsoft gebouw kwamen pizza’s en drankjes beschikbaar, die onder begeleiding van stevige discussies zijn verorberd. Dank Microsoft NL voor een geslaagde avond. Thuis de bits downloaden en installeren en aan de slag voor Windows Phone 7 Series met Silverlight…

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.

<ControlTemplate TargetType=”TabItem”>
    <Grid x:Name=”Root” d:DesignWidth=”150″ d:DesignHeight=”25″>

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!

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!

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 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…