August 2010 Entries
Expression Blend is a great tool to for young web devs

Basic layout

One day when I came home, my youngest daughter said “I could never be a geek like you”.  So I put her in front of Expression Blend and we started messing around.  She has produced her first silverlight site and isn’t done yet.  All the development is done in Expression Expression Blend and with a little direction, she has done it herself.  There is a secret password that pops up a secret message for her friends (nope, I can’t tell you where or what or it wouldn’t be a secret).  I can tell you that if you mouse over the lone flower on the main page, the page changes.   She is already working on the next iteration so whatever I tell you may change.

Update:   I don’t get to put a link to the site at this time (which is a bummer because it is good) but the main goal for this article is to help plant some ideas to help get children involved so hopefully I can do that without the actual site.

 

Main
 

For Taylor’s project, we started in Expression Blend with a new Silverlight Application + Website.  She put a grid inside the layout grid and split it to make a small area for the menu and a main area for her content.  The idea for the hills and sun came from the weather project from the Design .Toolbox.

The Rainbow is a full ellipse with a round gradient fill.  The trick is that just the edge of the gradient makes up the visible rainbow (see settings for the gradient fill below).  For the Rainbow to size properly, it extends beyond the visible image and is contained in a ViewBox so the dimensions shrink and grow evenly (second image below).


image                 image 

She chose to show one flower, the sun and the hills when you go to the page then if you mouse over the single flower, the rainbow and a lot of other various flowers show up and the page will look like the first image above. 
 

Introducing a user control – how about a flower??  how about pedals that spin when you mouse over them? and the ability to set the pedal color?
Flower

To create the flower, add a new item to the project and chose UserControl.

She wanted pedals that will spin so she chose to use a path list box.  Start with an ellipse that will run through the center of where you vision all of the pedals.   Right click on the ellipse and choose Path - Make a Layout Path.  Next make ellipses that will serve as pedals.  Pedal colors should be gradient from dark on the outside to white in the center.   Either make them all and drag and drop them on the path list box or make one ellipse on the path and copy and paste it multiple times (there are other ways to add items to a path list box but these are the easiest visual ways).  Set the Layout Paths to have  Orient to Path and set the FillBehavior to FullSpan (see settings image below on the right).

                   image   image

The head of the flower needs a white background (or whatever color you chose for the inside of the pedal gradient).  This background allows the flower to be placed on any background and still have the radiant look you see in the image.  To do this, choose the original center ellipse (that the path list box was made from the first time), make the fill color white (or the same color as the inside gradient on the pedals).  With it centered above the current pedals, right click to bring up a menu, choose Order and click on “send to back”.

The last part to the head of the flower isn’t difficult to do but can be hard to conceptualize.  The pedals are made out of a path list box.  The key here is “list box” which gives it the same template behaviors as a list box.  This means that when one of the pedals are selected, the outline gets a color, when you hover over one, the color changes, and more selection changes that come with a list box. 

To remove the “list box” look behaviors, just right click on the pathListBox (see image below left) choose Edit Additional Templates - Edit Generated Item Container - Edit a copy (NOTE:  If you come back to modify after, you should choose Edit Current because the first time you click Edit a copy, it makes a copy of the template and makes it the current template for this project – Edit Current is unavailable the first time).

image   image

After you are in the template, your view will look like the image on the right above (NOTE: “bread crumb” arrows at the top of the image).  Click on the States tab at the top.  You will need to go through each state and see the highlights/color changes that each state makes and remove them but we are just showing the Focused state here.  To see the Focused state changes, click Focused.  There will be a red outline around the object.  Then look at the objects and timeline for anything that has a red dot next to it (shown in image to the right above).  When you highlight an item with a red dot, you can look at the properties panel to see the current properties.  In this case, the blue Stroke is not wanted so highlight Stroke and choose no stroke (or click on the little advanced box and click reset).  When you are done editing all the states, double click on the first item in the “breadcrumb” in this case, that is the first arrow above the image canvas that says pathListBox.

If you can’t figure out the rest of the state changes from this one, shoot me a comment and I will post more details.

 

Now the flower needs a stem.  The stem is just a pen stroke slightly bend at the end with a wider StrokeThickeness and green fill.  The same way the center was sent to back, send  the stem backwards so it is behind the pedals.

The leaves are a little challenging but the trick is to use the pen tool and make half of one leaf.  Fill it with a gradient from dark at the bottom to light at the top (see left and center image below).

 

image                     image   

 

Then copy and paste to make a second half leaf.  Flip the copy using the transform - Flip  (tool box part shown below) then Rotate using the transform rotate until the two sides match to make a leaf.  Overlap the top of the two halves and make sure the bottom has a little separation (very little.  Then select both paths you just made and choose path - make compound path.  If you had proper overlap and separation, your leaf should now be one path and look close to the image to the far right below.

   image     image

 

Make a copy of the full leaf and flip using the same transform tool you did in the previous step for the second leaf.  Place both on the stem.

 

image
 


 

OK… time to animate the pedals

Make a new animation storyboard in the objects and timelines.  At 0, the pathListBox Start will be at 0% then at 2 seconds, it should be set to 100% (image2).  Run this and it should spin the pedals.  Now look in the properties for the animation itself (image 3) and set the RepeatBehavior to Forever.

image    image  image


In Taylors case, she wanted the pedals to spin when moused over and stop spinning when the mouse leaves it.  To control the story board, use the ControlStoryboardAction Behavior.  To find this, go to the Assets panel, highlight Behaviors and find ControlStoryboardAction in the list.

image     Drag that behavior and drop it on the pathListBox.  Repeat so you have two of the same behaviors.  One will start the animation on mouseEnter and one to stop it on mouseLeave (see last two images).

     image     image     image
 

OK… so now there is a full flower that spins and is a user control so it can be added anyplace in the project multiple times but she also wanted to set each one to a different color.  In order to do that there has to be a little code involved.  So here we go.  In the flower.xaml.cs , we need to define a color called pedalColor.  In order to bind it in Expression Blend, we need to also register it as a DependencyProperty.

public static DependencyProperty pedalColorProperty = DependencyProperty.Register("pedalColor",typeof(Color),typeof(flower),null);
 
 
        public Color pedalColor
        {
            get{ 
                return (Color)GetValue(pedalColorProperty);
                }
            set{
                SetValue(pedalColorProperty,value);
            }
            
        }

 

 

Rebuild your project.

Now go back to each of the pedals and just bind the dark side of the gradient to this new property.  When you click on the dark color side of the gradient tool, the binding is behind the magic square next to editor.  You see it in yellow in the image below because it is bound.  If you clicked the white part of the gradient, the magic square would be white to indicate it is not bound.

imageimage
      


 

image


That user control is now done.  When it is placed in the project, there is a property called pedalColor that can be set.


image

 

After the flower is done, it is now available in the Assets panel under project.  Plant as many flowers as you want all over the hills by dragging them from the Asset panel to the main layout covering the hills.

She set all the additional flowers and the rainbow to a 0 opacity and used another animation to make them appear over time.  To make a flower appear, pick a time on the time line and se the opacity for that flower to 100.  To propery stager flowers apearing (so they all don’t start apearing at the same time), also stagger the beginning 0 opacity.  What this does is keeps them at 0 from the start until the point you set them to 0 then they will fade in to the time that is set to 100%.  In this case, the Rainbow starts at the beginning and is the last thing set to 100% opacity.

image

 

She is still working on the rest of her pages.  It is extremely fun to help her and watch her learn and explore on her own.   Her pages are published so after a few more people see them, hopefully I can publish the url here.  I will wait until she is comfortable.

4 Comments Filed Under [ Expression Blend ]