Sunday, January 17, 2010

Using Blend with ECO

Blend is the XAML-high-level tool. It is very powerful if you know what you are doing. Having that special designer eye that helps you to stop messing with something when it is done is probably a very useful skill when working with Blend – I do not have it, yet. But still here is my 5 minutes crash course into Microsoft Blend for ECO developers.

First: Blend is all about UI. Nothing about data. You can bind the UI to a datasource, but you cannot do anything else useful with the datasource in Blend – just use it.

Second: XAML is all about binding – in that sense it is very declarative. You do not do any imperative coding in Blend (ideally). Instead you declare rules that makes things happen for you; i.e. you declare bindings and animations.

I continued on the WPF-Hockey sample I wrote about earlier. To do anything cool in Blend you need to have an idea on what you want (that statement is sort of generic) – if that idea includes data then ECO is your best friend.

I find it useful to declare the processes in ECO, it helps me to keep my objectives clear and focused:

image

The SetUpGame thing I did in the previous post. Now I am going to do the “Show teams and players”.

I added LineUp and Player to the model:

image

And a view model that supports this model:

image

That was the easy part. The above steps are done quickly with Enterprise core objects. Good! More time left to spend in Blend (and boy will you need it!).

Start up Blend (I use Microsoft Expression Blend 3). File, Open, Project/Solution:

image

You can add UserControls just as you would have done in Visual studio:

image

So I did a user control looking like a hockey rink (took me forever!) ; that will come in handy. Doing stuff like this in Blend is just as complicated as in any other competent drawing tool (Photoshop or what have you). But Blend has an advantage with the split xaml view. You can fine tune stuff just by changing the xaml.

I then create a new WPF-Window and add my user control:

image

I add some comboboxes to show the lineups for each team. I also add some textblocks to show the players for each LineUp. I also add two images up on the ice, to show the team images. All of these controls should show data. So I need to bind…

   1: //This is how I bind the Image to my ViewModel
   2: <Image  x:Name="imageHome" Margin="153,111,224.54,0" 
   3:     Source="{Binding Path=Class[GameDay]/Home_Image,Mode=OneWay,Converter={StaticResource ImageBlobConverter} }" 
   4:     Stretch="Fill" RenderTransformOrigin="0.5,0.5" VerticalAlignment="Top" Height="107">
   5:  
   6: //This is how I bind one of the textblocks
   7: <TextBlock  x:Name="textBlock" 
   8:         HorizontalAlignment="Left" VerticalAlignment="Bottom" 
   9:     Text="{Binding Path=Class[LineUp]/CenterForward_Name}" 
  10:    TextWrapping="Wrap" Margin="76.088,0,0,88.08" RenderTransformOrigin="0.515,0.055" Style="{DynamicResource playerstyle}">
  11:  
  12: // And the comboboxes
  13: <ComboBox DisplayMemberPath="Name" 
  14:     IsSynchronizedWithCurrentItem="True" 
  15:     ItemsSource="{Binding Path=Class[LineUp]}"  
  16:     Height="23" Margin="225,0,140,110" Name="comboBox1" VerticalAlignment="Bottom" />

Ok, now I have said what I want to bind to, that is not enough, I need to get the data there as well.

   1: // Add a ViewModelContent component to the resource section, tell it what your ViewModel is called, and what type your EcoSpace has:
   2: <Window.Resources>    
   3:     <ecoVM:ViewModelContent x:Key="VM1" ViewModelName="GameDay" EcoSpaceType="{x:Type ecospace:HockeyContEcoSpace}" ></ecoVM:ViewModelContent>

I now switch back to Visual Studio to actually put a “Game” into the GameDay ViewModel:

   1: {
   2:     public WindowGameDay()
   3:     {
   4:         this.InitializeComponent();
   5:  
   6:         // Insert code required on object creation below this point.
   7:     }
   8:  
   9:     private EcoSpace _es;
  10:     internal void SetEcoSpace(EcoSpace es, Game aGame)
  11:     {
  12:         _es = es;
  13:         (Resources["VM1"] as Eco.ViewModel.WPF.ViewModelContent).SetEcoSpace(_es);
  14:         (Resources["VM1"] as Eco.ViewModel.WPF.ViewModelContent).RootObject = aGame;
  15:         (Resources["VM1"] as Eco.ViewModel.WPF.ViewModelContent).GetCollectionView("LineUp").MoveCurrentToFirst();
  16:         (Resources["VM1"] as Eco.ViewModel.WPF.ViewModelContent).GetCollectionView("LineUpVisitor").MoveCurrentToFirst();
  17:         LayoutRoot.DataContext = Resources["VM1"];
  18:  
  19:     }

Notice that I expect to be handed a EcoSpace and a Game for this window to display. Also I use the method GetCollectionView of the ViewModel so that I can position the LineUp combos to show the first line up when we start.

TestRun:

image

Ok. Now to Animations. This is how animations work: They change a value over time, from an initial value to a desired value. Animations can be grouped together into a Storyboard.

Switching back to Blend. Go to menu Window, Workspaces, Animation:

image

Now your Blend workspace switch and you will see this pane at the bottom of your screen:

image

Use the plus sign (I marked it with red) to add a new storyboard.

PAY ATTENTION TO THE LITTLE DOT MARKED WITH GREEN!!!! When this is red – recording is on, click it to turn off recording (it toggles, so you can start and stop).

When Recording is on: WHEN YOU MOVE AROUND CONTROLS, THE NEW POSITION IS THE DESIRED POSITION FOR THE TIME INDICATED BY THE YELLOW MARKER.

Animation will make a linear move from start to goal over time (you can control this if linear is not what you want).

So this is how you go about animating the Image Opacity from 100% to 0% in 3 seconds:
- Turn recording on
- Move the Yellow time line to zero
- Set Image Opacity to 100% (you use the standard panes to set the values)
- Move the yellow line to 3
- Set Image Opacity to 0%
- Turn Animation off.

You repeat this process for all the stuff you want to move around. This is a very powerful tool and you have every chance to destroy all the work you have done so far – but it is sort of fun.

The sample now animates the Players for the selection LineUp up onto the Ice, while the team images fade out and disappear:

image

And when you change the Line up, the names change no matter what the current position of the animation is.

I was about to create a video to show the animation, but I went for a ClickOnce install instead:

http://www.capableobjects.com/publishedsamples/Hockey/publish.htm

Define a valid Game, then click Start…

3 Comments:

Anonymous Anonymous said...

Thanks for the ECO-Blend intro, Hans.

How would you allow for point tracking for goals and assists by dragndrop say between scorer and opponent goal images, assuming the appropriate addtional classes and associations were modeled?

throg

January 20, 2010 at 7:06 PM  
Anonymous Anonymous said...

Please add a button to print a single post or better print all posts.

January 25, 2010 at 5:20 PM  
Anonymous Anonymous said...

I found a useful video on getting around Expression Blend 2.0. It's 80 minutes long and has some coverage of dragndrop at 30-31 minute point.

http://www.intertech.com/downloads/blend/

throg

February 6, 2010 at 12:58 AM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home

 
Contact Us | Terms of Use | Privacy Statement © 2009 CapableObjects