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:


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:


And a view model that supports this model:


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:


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


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:


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…

Code Snippet
  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">
  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}">
  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.

Code Snippet
  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:

Code Snippet
  1. {
  2.     public WindowGameDay()
  3.     {
  4.         this.InitializeComponent();
  6.         // Insert code required on object creation below this point.
  7.     }
  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"];
  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.



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:


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


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).


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:


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:

Define a valid Game, then click Start…

This entry was posted in ViewModel, Xaml. Bookmark the permalink.

One Response to Using Blend with ECO

Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.