The MossyBlog Times Archives 2007 - 2009 : Frameworks

Silverlight Experiment: Create a PullDown Menu using Storyboards.

scbarnes — Sun, 29 Jun 2008 07:09:59 GMT

This is a basic example of how to create a "PullDown Menu" using Silverlight and Expression Blend.

The Objectives

The GUI will have a PullDown Menu (UserControl) under the main outer chrome. It's intended that when a user clicks on the "MainMenu" it will not only change state, but animate down or up (depending on the previous state it was resting in - default being Up).
The End User will need to have the ability to interrupt the animation should they decide to cancel the action, as a result the menu will react to the End User's intended action and reflect the direction change as well as state change.

The Expected Outcome.

The Blueprints.

1x OuterChrome Control
- 1x TopLeft Corner Bitmap (Static)
- 1x Top Bitmap (Stretch Horizontally)
- 1x Left Bitmap (Stretch Vertically)
1x PullDownMenu Container
- 1x InnerMenu Control (NxsRibbon)
- 1x LowerBar Bitmap (Static)
- 1x PullDown Tab Bitmap (Static)
- 1x PullUp Tab Bitmap (static)

The Process

Create the the WireFrames.

Create a UserControl in Blend, call it NxsApplication.xaml (this will be your base)
1. Change its Metrics to be 1000px, 760px.
2. Change the NxsApplication.LayoutRoot from Grid to Canvas (as you want things to freely float).
  
  NxsApplication.xaml
```
   1:  <UserControl x:Class="RCIA.Containers.NxsApplication"
```
```
   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
```
```
   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
```
```
   4:      Width="1000" Height="760">
```
```
   5:      <Canvas x:Name="LayoutRoot">
```
```
   6:          <Canvas.Background>
```
```
   7:              <LinearGradientBrush EndPoint="0.5,0" StartPoint="0.5,1">
```
```
   8:                  <GradientStop Color="#FF000000"/>
```
```
   9:                  <GradientStop Color="#FF131313" Offset="1"/>
```
```
  10:              </LinearGradientBrush>
```
```
  11:          </Canvas.Background>
```
```
  12:      </Canvas>
```
```
  13:  </UserControl>
```

Create a UserControl in Blend, call it NxsShell.xaml (this will be your Chrome)

Keep NxsShell.LayoutRoot type as Grid.

Inside NxShell, define the Grid Definition as having the below (you basically want to use the Grid to help you scale-9 the overall assets).

NxsShell.xaml

   1:  <UserControl x:Class="RCIA.Controls.NxsShell"

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="400" Height="300" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

   5:      <Grid x:Name="LayoutRoot">

   6:          <Grid.RowDefinitions>

   7:              <RowDefinition Height="30"/>

   8:              <RowDefinition Height="*"/>

   9:          </Grid.RowDefinitions>

  10:          <Grid.ColumnDefinitions>

  11:              <ColumnDefinition Width="30"/>

  12:              <ColumnDefinition Width="*"/>

  13:              <ColumnDefinition Width="30"/>

  14:          </Grid.ColumnDefinitions>

  15:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Fill="#FFFE0000"/>

  16:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="1" Fill="#FF213986" Grid.ColumnSpan="1"/>

  17:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Row="1" Fill="#FFA42020"/>

  18:          <Rectangle HorizontalAlignment="Stretch" Margin="0,0,0,0" VerticalAlignment="Stretch" Grid.Column="2" Fill="#FF0943FF"/>

  19:      </Grid>

  20:  </UserControl>

Create a UserControl in Blend, call it NxsRibbon.xaml (this will be the container you place your ribbon into).

NxsRibbon.xaml

   1:  <UserControl x:Class="RCIA.Controls.NxsRibbon"

   2:      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

   3:      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

   4:      Width="1000" Height="180" xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows">

   5:      <UserControl.Resources>

   6:          <Storyboard x:Name="PullDown">

   7:              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

   8:                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="130">

   9:                      <SplineDoubleKeyFrame.KeySpline>

  10:                          <KeySpline ControlPoint1="0,0" ControlPoint2="0,1"/>

  11:                      </SplineDoubleKeyFrame.KeySpline>

  12:                  </SplineDoubleKeyFrame>

  13:              </DoubleAnimationUsingKeyFrames>

  14:          </Storyboard>

  15:          <Storyboard x:Name="PullUp">

  16:              <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangle" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">

  17:                  <SplineDoubleKeyFrame KeyTime="00:00:01" Value="0">

  18:                      <SplineDoubleKeyFrame.KeySpline>

  19:                          <KeySpline ControlPoint1="0,1" ControlPoint2="1,1"/>

  20:                      </SplineDoubleKeyFrame.KeySpline>

  21:                  </SplineDoubleKeyFrame>

  22:              </DoubleAnimationUsingKeyFrames>

  23:          </Storyboard>

  24:      </UserControl.Resources>

25:

  26:      <Canvas x:Name="LayoutRoot" Background="#FF0D0D0D">

27:

  28:          <Rectangle Height="160" Width="962" Canvas.Left="30" Canvas.Top="-115" Fill="#FF35E50C" Stroke="#FF000000" x:Name="rectangle">

  29:              <Rectangle.RenderTransform>

  30:                  <TransformGroup>

  31:                      <ScaleTransform/>

  32:                      <SkewTransform/>

  33:                      <RotateTransform/>

  34:                      <TranslateTransform/>

  35:                  </TransformGroup>

  36:              </Rectangle.RenderTransform>

  37:          </Rectangle>

  38:          <Button Height="23" Width="81" Canvas.Left="911" Canvas.Top="149" Content="Open..." x:Name="btnTest"/>

  39:      </Canvas>

  40:  </UserControl>

Inside NxsRibbon.LayoutRoot, create a rectangle and a button.
Name the button "btnTest".

In NxsAplication instantiate the GUI assets.

In NxsApplication.xaml.cs instantiate NxsRibbonMenu UserControl. As this will ensure it has the lowest z index.

In NxsApplication.xaml.cs instantiate NxsShell UserControl. As this will ensure it has the highest z index.

NxsApplication.xaml.cs

   1:      public partial class NxsApplication : UserControl

   2:      {

   3:          public NxsShell NXS_SHELL;

   4:          public NxsRibbon NXS_RIBBON;

5:

   6:          public NxsApplication()

   7:          {

   8:              InitializeComponent();

9:

  10:              // Add the Nexus Ribbon

  11:              NXS_RIBBON = new NxsRibbon();

  12:              this.LayoutRoot.Children.Add(NXS_RIBBON);

13:

  14:              // Add in the Nexus Chrome.

  15:              NXS_SHELL = new NxsShell();

  16:              NXS_SHELL.Width = Width;

  17:              NXS_SHELL.Height = Height;

  18:              this.LayoutRoot.Children.Add(NXS_SHELL);

  19:          }

  20:      }

In NxsRibbon.xaml.cs register the btnTest to initiate the PullDown and PullUp Animations.

In NxsRibbon.xaml.cs register the Animation state to ensure that if the user wishes to interrupt either the PullDown/PullUp animations that they react in a way that halts the current storyboard, switches to the opposite storyboard and then continues to play.

NxsRibbon.xaml.cs

   1:     public partial class NxsRibbon : UserControl

   2:      {

   3:          Boolean CURRENT_PULLDOWN_STATE;

   4:          Boolean IN_MOTION;

5:

   6:          public NxsRibbon()

   7:          {

   8:              InitializeComponent();

   9:              this.btnTest.Click += new RoutedEventHandler(onButtonTestClick);

  10:              this.PullDown.Completed += new EventHandler(PullDown_Completed);

  11:              this.PullUp.Completed += new EventHandler(PullUp_Completed);

12:

  13:              CURRENT_PULLDOWN_STATE = false;

  14:              IN_MOTION = false;

  15:          }

16:

  17:          void PullUp_Completed(object sender, EventArgs e)

  18:          {

  19:              CURRENT_PULLDOWN_STATE = false;

  20:              IN_MOTION = false;

  21:          }

22:

23:

  24:          void PullDown_Completed(object sender, EventArgs e)

  25:          {

  26:              CURRENT_PULLDOWN_STATE = true;

  27:              IN_MOTION = false;

  28:          }

29:

30:

  31:          void onButtonTestClick(object sender, RoutedEventArgs e) {

32:

  33:              if (IN_MOTION)

  34:              {

  35:                  if (!CURRENT_PULLDOWN_STATE)

  36:                  {

  37:                      IN_MOTION = true;

  38:                      CURRENT_PULLDOWN_STATE = true;

  39:                      PullDown.Pause();

  40:                      PullUp.SeekAlignedToLastTick(PullDown.GetCurrentTime());

  41:                      PullUp.Begin();

  42:                  }

  43:                  else

  44:                  {

  45:                      IN_MOTION = true;

  46:                      CURRENT_PULLDOWN_STATE = false;

  47:                      PullUp.Pause();

  48:                      PullDown.SeekAlignedToLastTick(PullUp.GetCurrentTime());

  49:                      PullDown.Begin();

  50:                  }

  51:                  return;

  52:              }

53:

  54:              if (!CURRENT_PULLDOWN_STATE)

  55:              {

  56:                  IN_MOTION = true;

  57:                  PullDown.Begin();

  58:              }

  59:              else

  60:              {

  61:                  IN_MOTION = true;

  62:                  PullUp.Begin();

  63:              }

  64:          }

  65:      }

The Conclusion

I found that it was faster to create the initial StoryBoard for PullDown. Once I was happy with the way it animated in/out, I then Duplicated the StoryBoard (via this ). I renamed the PullDown_Copy to PullUp and under the same icon () I "Reversed" it. This basically figured out how to revert the various properties that are being changed to the appropriate state.
Keeping track of the IN_MOTION and CURRENT_PULLDOWN_STATE was relatively easy, and although I have a few ideas on how we can improve this concept going forward, it's pretty trivial to setup.
Adjusting the animation Easing via the KeySpline editor can attract various results on both Up/Down. It pays to think more about how this will affect the End User firstly, but also the fundamental question you will need to answer going forward "Is this going to annoy them?" if the answer is yes, look to shorten the animation duration or adjust the Easing.

The Outcome.

This took me less then 30mins to complete. You will also note that I used only basic elements found within XAML to setup the wire frames. I did this as this illustrates that an Interactive Persona can setup the various pieces required to ensure the animation and basic events are ready for the next step in the workflow.

This means that you could have someone sitting designing the textures and detailed composition of the artwork in their nominated Art Tool. At the same time you could have an Engineer writing the actual NxsRibbonMenu so that it mimics the Office Ribbon concept.

Once all three have completed their individual contribution to the GUI, they are then able to meet for a "Happy meeting" where they basically look at how they are going integrate the pieces into the GUI.

In this case, the Interactive Persona is able to swap out the rectangle placeholders and apply specific bitmap textures or whatever it is that is required to execute on the visual finish.

Once that's completed, the same persona is also then able to swap out the dummy NxsRibbonMenu place holder and implant the real Control, with it's own black boxed composition.

This could highlight that using Expression Blend, Visual Studio and Silverlight that three individual personas are quite able to build, design and animate independent of one another. It does however also indicate that there needs to be a Interactive Architect in the room to ensure all the various placeholders and external pieces fit into their respective places within the overall Application composition.

Special Notes

Nexus is a home grown Silverlight framework being written by a few friends / co-workers of mine (we decided to collaborate on an idea to test some best practices out). This framework isn't likely to be publicly available but should it do so, I'll let you folks know at that appropriate point in time.
All visual assets are copyright to me. Basically if I see you stealing my art, I'll hunt you down as don't be that guy/gal whom does that. Ask though should you wish to use it, as I'm pretty open.
This was fun and that's what this whole RIA conversation is about, having fun.

Silverlight: How to write your own EventDispatcher.

scbarnes — Mon, 23 Jun 2008 20:44:00 GMT

Gilbert Corrales and I metup last week here at Redmond and he and I were talking to about how I wanted to make use of an EventDispatcher approach to routing events around the code base (the analogy we came up with was "the difference between a cough and a sneeze" - well maybe not a sneeze heh).

EventDispatcher then lead to a framework and before you knew it, we were up to around 2am in my office coding and this is what we ended up with (first cut).

Behold, thine EventDispatcher and all it's glory!

Assume for a second that you have a room full of blind people with no sound, and in the middle you essentially have a machine that handles notifications around Sneezing and Coughing (or any other bodily functions you can think of).

Let's also say that PersonA wants to know if anyone coughs (so he/she react) or that PersonB wants to know if anyone Sneezes.

First things first, lets take a look at the "Room" itself. As it will be the host in this equation (assume it's a really smart room that can detect BodilyFunctions as they happen).

The Room

   1:          private void TheRoom()

   2:          {

   3:              // Add People to the Dark Room.

   4:              Person personA = new Person();

   5:              Person personB = new Person();

   6:              Person personC = new Person();

7:

   8:              // Define the curiousity of all Persons..

   9:              personA.Name = "Scott";

  10:              personA.DefineCuriousity("Sneeze");

  11:              personB.Name = "Gilbert";

  12:              personB.DefineCuriousity("Sneeze");

  13:              personC.Name = "David";

  14:              personC.DefineCuriousity("Cough");

15:

16:

  17:              // If someone Sneezes/Coughs, let's tell everyone in the room

  18:              // about it via a DisplayBoard (in this case, 3 text fields).

  19:              NexusEvent BodilyFunctionEvent = new NexusEvent(OnBodilyFunction);

  20:              EventDispatcher.Subscribe("Sneeze", BodilyFunctionEvent);

  21:              EventDispatcher.Subscribe("Cough", BodilyFunctionEvent);

22:

  23:              // Ok, for arguments sake, lets force a bodily function to occur.

  24:              personA.Sneeze();

  25:              personB.Cough();

  26:              personC.Sneeze();

27:

  28:          }

The Room Dissection

We first (Lines 4-6) establish that there are in fact People in the room. This is basically a generic class called "Person" which I'll dissect below (don't worry at this point).
We secondly (Lines 9-14) determine whom these people are (names) and what they are curious to know (Sneeze or Cough).
We thirdly need to make The Room aware that there is in fact people in the room (Lines 19-20) now and it now needs to listen for a Sneeze or Cough. Once that happens it will then embarrass them all by putting updating a Sign in the background outlining what just happened.

Pretty self-explanatory right?

Let's now take a look at the Anatomy of a person and let's see what makes them tick (don't worry, if your squeamish or can't stand the sight of blood, that's ok, this is rated PG 13 and you won't be offended).

The Person (with their innards exposed).

   1:      public class Person

   2:      {

   3:          public string Name { get; set; }

   4:          private string curiousity { get; set; }

5:

   6:          public void DefineCuriousity(string eventType) {

   7:              // You can add your own Subscription Logic here

   8:              // to each individual Person to react to a case of

   9:              // either a sneeze or cough (ie Move Person 20px to the right

  10:              // then let out a speech bubble "eeww!!!"

  11:          }

12:

  13:          public void Sneeze()

  14:          {

  15:              this.PerformBodilyFunction("Sneeze");

  16:          }

17:

  18:          public void Cough()

  19:          {

  20:              this.PerformBodilyFunction("Cough");

  21:          }

22:

  23:          private void PerformBodilyFunction(string eventType)

  24:          {

  25:              PersonEventArgs prsn = new PersonEventArgs();

  26:              prsn.PersonsBodilyFunction = eventType;

  27:              prsn.PersonsName = this.Name;

  28:              EventDispatcher.Dispatch(eventType, prsn);

  29:          }

  30:      }

The Person Dissection

We give the person some basic metadata to help us humanize them.

Tip:
For those of you whom are new to .NET you will notice that the property Name only has a get; and set; but nothing else? well that's the power of VisualStudio working there. As when you use the "prop" approach to setters/getters it automates the battle for you, so no more creating set/get values with reference to hidden private properties).
These people are easily influenced via our Microsoft Jedi Mind Trick, so we can define their curiosity for them and such they will react to our preference via the DefineCuriousity() method. Once we tell them "You are curious about a Sneeze" they will in turn agree, ask the EventDispatcher to sign them up for anyone whom sneezes (or in technical terms, any "Sneeze" event that may occur in the application). In the above example though, I've not bothered to add that logic - but you hopefully get the idea.
Each person has the ability to also have the Sneeze or Cough knocked out of them, as they are really fragile people (heh). The way in which we do that, again using the Microsoft Jedi Mind Trick is to tell them "You suddenly have an overwhelming need to Sneeze.." and such the Sneeze() method gets fired (via The Room in this example) and as such they tell the EventDispatcher ("I just sneezed, do what you will with that bit of information");
Last but again, is the very act of PerformingBodilyFunction, in this case the Person will setup a data packet to describe whom they are and what they just did (PersonEventArgs which inherits NexusEventArgs, a class that we made - see below). They then tell EventDispatcher that the event just occurred (Cough or Sneeze) and passes the EventDispatcher some metadata to help anyone whom needs to know whom they are

Tip:
I prefer to keep string pointers as once you start embedding object references into various data packets that float around the code, sometimes you can get lost in a Garbage Collection nightmare. Play it safe, agree that its your job as a developer to keep public objects identifiable as much as you can and unique, so others can find you!)

The EventDispatcher

This concept is something I've used for many years in other languages, and it's quite a nice tool for your day to day RIA solutions. As depending on how you implement it, it can at times get you out of a bind fast and it also does a really nice job of enforcing a layer of abstraction where at times it doesn't appear to be required (yet later saves your bacon, as the age old "ooh glad I had that there now i think about it" does apply with this ball of code)

   1:     /// <summary>

   2:      /// Event delegate definition for Nexus related events.

   3:      /// </summary>

   4:      /// <param name="args">Arguments associated to the event.</param>

   5:      public delegate void NexusEvent(NexusEventArgs args);

6:

   7:      /// <summary>

   8:      /// Implementation of a multi-broadcaster event dispatcher.

   9:      /// </summary>

  10:      public class EventDispatcher

  11:      {

  12:          /// <summary>

  13:          /// Holds a list of event handlers subscribed per event.

  14:          /// </summary>

  15:          private static Dictionary<string, List<NexusEvent>> _subscribers = new Dictionary<string, List<NexusEvent>>();

16:

  17:          /// <summary>

  18:          /// Subscribes a handler to an event for deferred execution.

  19:          /// </summary>

  20:          /// <param name="evtName">Name of the event to which the handler will be subscribed to.</param>

  21:          /// <param name="eHandler">Handler to be executed everytime the event gets dispatched</param>

  22:          public static void Subscribe(string evtName, NexusEvent eHandler)

  23:          {

  24:              List<NexusEvent> handlers;

25:

  26:              if (!_subscribers.TryGetValue(evtName, out handlers))

  27:              {

  28:                  handlers = new List<NexusEvent>();

  29:                  _subscribers.Add(evtName, handlers);

  30:              }

31:

  32:              handlers.Add(eHandler);

  33:          }

34:

  35:          /// <summary>

  36:          /// Removes a command from an event for deferred execution.

  37:          /// </summary>

  38:          /// <param name="evtName">Name of the event to which the handler will unsubscribed from.</param>

  39:          /// <param name="eHandler">Handler to be removed from been dispatched.</param>

  40:          public static void RemoveSubscription(string evtName, NexusEvent eHandler)

  41:          {

  42:              List<NexusEvent> handlers;

43:

  44:              if (_subscribers.TryGetValue(evtName, out handlers))

  45:              {

  46:                  handlers.Remove(eHandler);

  47:              }

  48:          }

49:

  50:          /// <summary>

  51:          /// Broadcasts an event thru its correspondant subscribers.

  52:          /// </summary>

  53:          /// <param name="evtName">Name of the event to be broadcasted.</param>

  54:          /// <param name="args">Arguments associated to the event been propagated.</param>

  55:          public static void Dispatch(string evtName, NexusEventArgs args)

  56:          {

  57:              List<NexusEvent> handlers;

58:

  59:              if (_subscribers.TryGetValue(evtName, out handlers))

  60:              {

  61:                  args.EventName = evtName;

62:

  63:                  foreach (NexusEvent d in handlers)

  64:                  {

  65:                      d(args);

  66:                  }

  67:              }

  68:          }

  69:      }

The EventDispatcher Dissection.

NexusEventArgs is simply a class file that has two properties within itself. First being Data (Dictionary) and Second being EventName (ie "what was my triggers name?".
Subscribe & RemoveSubscription are pretty much as you see it. They essentially register an eventName against an object and then keeps such registration in memory until you remove them. It's important to note here, that you really want to think about how you implement this class as memory hoarding can occur fast if you mistreat this class.
Dispatch. As seen earlier in the code, this method will basically take a proposed eventName, cycle through it's internal dictionary, locate the appropriate objects which it needs to then notify of such event and then simply do so.

Cautionary Disclaimer and Words of Wisdom.

Since EventDispatcher uses static approach to keeping itself a live throughout your application, it's important to note that you need to be a good code-citizen. In that you need to think of ways to Subscribe and RemoveSubscription from the EventDispatcher in a manner that can allow the Garbage Collection to safely remove an object. In that if you try and remove an object that has a subscription to EventDispatcher, it will only remove the reference to the said object, but the object will continue to stay a live as it still resides inside the EventDispatcher. Consider looking into more how the "IDisposable" concept works (something I'm working on now in how to position EventDispatcher so it keeps things clean overall).
You could consider the idea of forcing EventDispatcher to live within specific domains, in that say you had a ShoppingCart and a WishList, both share the same concept in terms of approach and execution (whilst same Events?). You could have a ShoppingEventDispatcher and a WishListEventDispatcher if you wanted to, which basically lets you use the same code base but with different domains to be housed within. Simply inherit the original EventDispatcher, change the way the events are stored internally so that they are stored based on "Domain" and all is forgiven. That and consider using a FrontController.Dispatch() approach to dispatching events vs an EventDispatcher.Dispatch() which keeps the two housed within (ie also consider keeping the FrontController static, whilst the two individual EventDispatchers as being instance based. That way if you decide to nuke the FrontController the two EventDispatchers will die with it).