Real World WPF Videos: Introduction to Blend





Picture of blend video


Well, it has been a little time since I last posted, and since, there has been a real flurry around WPF – at last, it is shipped! As is Windows Vista and Office 2007.


I have been busy on a number of projects, my learning from which I shall be sharing in the coming weeks. I have also been working with DPE (Developer and Platform Evangelism) to create a series of real world WPF Videos. The videos are focussed on real questions our customers are asking us about WPF and the tools they will need to get into to get the most from the platform.


The first video we shot was a 4 part introduction to using Microsoft Expression Blend (formerly Interactive Designer / Sparkle). Richard Godfrey and I walk through the new look tool and show you how to build a simple, but pretty, data driven application. I have posted the four links for the four parts below, as well as attached the data we used in the sample in case you want to have a crack yourself. It is a pretty simple scenario, so you may want to put your own twist and ideas in the mix.


Enjoy!


Introduction to Blend Part 1: Introduction


Introduction to Blend Part 2: Interface Overview


Introduction to Blend Part 3: 2D Build


Introduction to Blend Part 4: 3D & Effects


 


 

GameData.zip

Comments (35)

  1. Martin Grayson , a UX guru in the Microsoft Services part of our business has worked with a colleague

  2. Below are a list of resources which are relevant for attendees of the UK Technical Roadshow running across

  3. This page is your one resource for following up from the sessions that were delivered at this year’s

  4. Steve says:

    Great resource, can’t wait for the next series of videos! 😉

  5. Para facilitar o desenvolvimento de aplicações utilizando WPF e XAML com animações, uma boa opção, é

  6. There are new Expression Blend demo videos on Channel 9 (and kudos, cos they’re from the UK). …

  7. .NET says:

    Below is my latest list on resources that I have so far found invaluable in getting to grips with WPF…

  8. Bruce Philp says:

    I noticed with the current Beta 2 release of Blend, when you were demoing the BitmapEffect and OuterGlowEffect, that these options were not currently available. Is there a programmatic way to implement these features?

  9. martin.grayson says:

    Hi Bruce. Yep, the BitmapEffect stuff has moved. You will actually find it tucked away in the Appearence Pallette. You can also search for any properties by using the search box at the top of the properties panel too – e.g. type BitmapEffect in there and the properties list will filter down.

    Also, great thing about XAML is that you can programmatically add anything, really. Everything you do in the Blend UI just adds and changes properties in the XAML. I recommend regularly flipping to the XAML view to have a look.

    For example, adding a bitmap effect will change this textblock…

    <TextBlock Text="{Binding …}" />

    to

    <TextBlock Text="{Binding…}">

     <TextBlock.BitmapEffect>

       <OuterGlowBitmapEffect Color="Black" />

     </TextBlock.BitmapEffect>

    </TextkBlock>

    Martin

  10. Bruce Philp says:

    Thanks Martin,

    Since watching these vidoes, which you have put together, has inspired myself to start porting some of our current products over to XAML. We spend such a long time building rich user controls with Winform development, with the introduction of XAML we can really now focus on the end user requirements crossing every tick box with little easy and enhacing their experience.

    Thanks again,

    Bruce Philp    

  11. martin.grayson says:

    Thanks Bruce, great feedback, and glad to hear you are looking at WPF as your nwe platform of choice.

    Please stay tuned, as we will be producing even more videos on some hot topics like – Designer/Developer relationships, User vs. Custom controls, WPF+Blend for LOB, templating complex controls, 3D in Blend etc. etc.

    Martin

  12. Ahmed says:

    This is great video and it did push me to use Blend and understand WPF/E ( SelverLight ).

    I wondering if you can post the code of this video and also the project it self so we can test it.

    Thanks…

  13. Hari says:

    This is a gr8 tutorial.. But i would also like to know how to do the 3D effect of a video clip.. and how to give a motion for that clip along a 3D path .

    Thankz

  14. Marcelo Paiva says:

    Thanks for these! Do you suggest any other links for video tutorial on Exp. Blend and XAML?

  15. Peter Johansson says:

    Thanks Martin,

    I have been working with web development in general, ASP.NET and AJAX for the last couple of years, and your introductory videos was all I needed to get going with Blend and WPF. Fantastic…

    One thing though; how did you manage to get the blur effect working with the Visual Brush? I am on XP SP2 and I this will not work for me. I have tried many (MANY) different ways.

    Cheers

    Peter

  16. Anonymous says:

    The UK MCS User Experience Team and a number of UK partners have been working on WPF for over 12 months and this Real World WPF series is intended to show some of their work and capture/share some of their learnings.

  17. Anonymous says:

    The UK MCS User Experience Team and a number of UK partners have been working on WPF for over 12 months and this Real World WPF series is intended to show some of their work and capture/share some of their learnings.

  18. Anonymous says:

    The UK MCS User Experience Team and a number of UK partners have been working on WPF for over 12 months and this Real World WPF series is intended to show some of their work and capture/share some of their learnings.

  19. Anonymous says:

    The UK MCS User Experience Team and a number of UK partners have been working on WPF for over 12 months and this Real World WPF series is intended to show some of their work and capture/share some of their learnings.

  20. Kamil says:

    Hi there,

    Thank you very much for this excellent tutorial. I have decided to give it a go myself and when following the videos I have got stuck on the bit where I edit the listbox settings. When I select the border the padding and CornerRadius do not appear. I can’t even set the border thickness – these properties are simply not there. Do you have any idea why this might be?

    Thank you in advance

    Kamil

  21. systyle says:

    Hi

    I am new to this but this is amazing. I can’t believe I just struck gold.

    This is exactly the software I needed as a designer and my wife is a programmer. Oh brother – are we going to have fun with expression blender!

    Great tutorial. Looking forward to more. Thanks!

  22. systyle says:

    I tried the tutorial, but when I dragged the game array file onto the screen, then itemsource, everything was fine to go into the big window.

    But, when I later changed the BOXimage in Create Data window, it does not preview the image at all. And when I said ok, I just saw the data text file.

    I followed it all the way through and still couldn’t understand it. Is there something I have missed because I went through video, time and time again. Thanks

  23. Thank You very very much for these videos tutorial. I been very thirsty for it.

    This kind of things really help.

    Reagrds

    Syed Wahab Ali

  24. Ashraf says:

    Really helpful tutorial for silverlight learner. I start learing and start seaching for video tutorial and found it. Helpful. Thanks a lot.

  25. phiredrop says:

    Hey,

    Awesome stuff here. I need a little help though. I’m trying to follow along with the tutorial, and I successfully imported my .xml file, but when he resizes the margins to ‘auto’ in part 3, his automatically fits the screen with all his images displayed. I follow his steps exactly and nothing happens. The margins don’t go to the ends of the project like his does. It only shows about 2.5 of the 5 pictures, and when I resize the window by dragging it, it shows whitespace where the rest of the pictures should be. I also noticed that when I imported the .xml file, mine didn’t have the ‘chained down’ icons on its sides like his does. Does that have anything to do with it? Anyone else run into this issue?

    Thanks in advance for your help guys!

  26. Weddings says:

    Well, it has been a little time since I last posted, and since, there has been a real flurry around WPF – at last, it is shipped! As is Windows Vista and Office 2007 . I have been busy on a number of projects, my learning from which I shall be sharin

  27. Karen says:

    Could you post the xml file for the game data?

    Thanks,

  28. martin.grayson says:

    Hi Karen, sorry for the delay.

    This stuff is attached. If you look at the bottom of the post, you will see a GameData.zip link.

    Thats it!

    Martin

  29. HR says:

    How do you create reflection effect for ListBox in Silverlight 2.0/3.0 as VisualBrush as well as 3D effect not available?

    I tried to use VideoBrush/ImageBrush as alternative but no luck

  30. martin.grayson says:

    In Silverlight, you would essentially need to replicate your UI upside down in the list box item template, as there is no other way of creating a visual copy.

    Not ideal, but until VisualBrush comes to Sivlerlight, the only way.

    Thanks,

    Martin

  31. Jim says:

    Hi Martin, would there be an updated version using Expression Blend 3?

  32. Alex says:

    How can we disable the Canvas (displaying the Game Title) from being displayed in the rectangle where VisualBrush was applied. As the game is selected (and the title displayed) the reflection also shows the title.

    It has been a while ago…

    Thanks,

    Alex

  33. Marc says:

    (Many years later..)

    I'm enjoying the videos, brilliantly done, but am lost when I try and drag'n'drop the .xml file from the Data tab into the Grid.  Nothing happens.

    I can *manually create* a ListBox, right-click on it, ask it to bind the ItemSource to use this data source, but am confused by the "Create Data Binding" dialog that pops up, and can't get it to automatically generate the list of games, or Items to go into that ListBox.

    It looks like the most recent version (Blend 3) is quite different to the version you recorded, back in 2007.

  34. Evance says:

    thank's, I think your video is more valuable than most costly training videos on blend

  35. Urfan says:

    Hi Martin

    I have the same issue as Marc (above).  It seems that in Blend 4 the functionality to drag/drop the datasource and then follow the 'wizard' screen for "Create Data Template"  to set the child controls is nowhere to be found.

    I cant seem to find anything similar and have to add the controls (listbox and then the textblock etc..).

    Otherwise a fantistic article

    Urfan