The MossyBlog Times Archives 2007 - 2009 : Expression Blend

How to: Make Innerglows with Expression Blend.

scbarnes — Sun, 14 Sep 2008 22:25:04 GMT

I'm knee deep in a WPF project i'm writing for my team. I had the need today to have an innerglow, and noticed that we seem to have forgotten this little BitmapEffect of goodness (which I'll be promptly hassling Jon tomorrow for in the next revision).

That being said, as stubborn as I am I decided to try my hand at producing my own InnerGlow effect. It was actually very simple procedure to replicate inside Expression Blend.

Step 1.

Define your shape. In this case I went with a rounded Rectangle, but you can use any shape you see fit and firstly you need to figure out your base shape.

Note:
Now it's important here to note, that you need to think of this as being "Pancakes" in terms of the design composition.

Don't worry to much about pixel perfect precision inside Vector either. A illustrator friend of mine once gave me a basic rule to live with when it comes to Vector art:

You can hide a lot of imperfections, as given you can zoom endlessly you get to the point were the naked eye can't see it and move on..

Couldn't agree more.

Step 2.

Simply copy the shape (CTRL+C) and hit Paste keys (CTRL+V). It should paste exactly on top of the previous shape and retain the exact x/y co-ordinates.

Rename your layer to something suites you, I myself called it IcnInnerGlow

Step 3.

Selecting the layer you just copied, you now want to add a BitmapEffect called "Outerglow". This can be found via your Properties area, under the group called Appearance. You will need to click on the expander for this group in order to see the below.

You should see something like this:

Not really inspiring is it?

Step 4.

You now need to knockout the Fill and bump up the Border. So in this case, go to your Fill and click on the No Brush Tab.

You will also need to ensure the Border's Brush is set to a color or setting that you feel comfortable with. In this case, I chose a solid color and ensured the Opacity was 53%.

The results should now look like this.

Step 5

Now comes the real magic. You select your layer, and again hit CTRL+C and CTRL+V (duplicating your layer basically).

With this new layer (it should increase the glow effect, make a note of that!) you now want to make this a clipping path. In that everything inside this shape is what you only want to make visible. The rest is something we want to discard.

To do this, right-click on the newly duplicated layer, Choose Path, then Make Clipping Path.

A new Modal window will now appear, asking which path you want to attach this clipping path to (think masking in Flash). Choose your "InnerGlow" shape, and you should now have the following result:

Notice no bleeding beyond the shape's actual borders? Now you have a uniform InnerGlow that matches your shape. It's now up to you what you want to do from here on out, but overall this is a quick and fairly friction free way of achieving an InnerGlow using the basic BitmapEffects in place.

I personally, adjusted the color to white, added another BitmapEffect (Blur) and tweaked the settings in a way that I ended up with the following visual effect.

Doesn't look like much does it? well keep in mind I'm Zoomed In here, when I zoom back out to 100%, this is the visual look I pulled off.

Now to add some Gloss to the buttons..as we all know, there isn't enough "Gloss" online today :)

Summary.

Expression Blend isn't meant to be a Adobe Photoshop replacement, it's meant to essentially act as a bridge between the Designer Tools and Developer Tools. That being said, it has a fair amount of hidden power under the hood (when dealing with WPF). I've found that I can achieve a lot of the visual effects I've commonly used in Photoshop via Expression Blend (yes its weird I know). It requires more hand-crafting but overall visually once I've put it into place, I can re-use across a lot of controls throughout my WPF application.

I think at times the Vector UI's look absolutely crap and its dying of gradient brush overkill, so I'm hoping to show folks a few tricks here and there to produce visually appealing art.

Here's the best part of all. If you like the above, then cut and paste this XAML code into your application, and you're off to the races.

Yet another upside to using XAML, sharing art is as easy as pasting XML.

                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Grid.Column="0" Grid.ColumnSpan="1">
                        		<Rectangle.BitmapEffect>
                        			<DropShadowBitmapEffect Opacity="0.835" ShadowDepth="1" Softness="0.305"/>
                        		</Rectangle.BitmapEffect>
                        		<Rectangle.Fill>
                        			<LinearGradientBrush StartPoint="0.538462,0.98077" EndPoint="0.538462,-0.576924">
                        				<GradientStop Color="#FF232323" Offset="0"/>
                        				<GradientStop Color="#FF5D5B5B" Offset="1"/>
                        			</LinearGradientBrush>
                        		</Rectangle.Fill>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z" d:IsHidden="True">
                        		<Rectangle.BitmapEffect>
                        			<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.415"/>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>
                        	<Rectangle Stroke="#87757575" StrokeDashCap="Square" StrokeEndLineCap="Flat" StrokeLineJoin="Miter" StrokeThickness="0.5" RadiusX="3" RadiusY="3" x:Name="icnBase_Copy1" Margin="2,2,2,0" HorizontalAlignment="Stretch" Width="32" Height="32" Fill="{x:Null}" Clip="M0.25,3.25 C0.25,1.5931458 1.5931458,0.25 3.25,0.25 L28.75,0.25 C30.406854,0.25 31.75,1.5931458 31.75,3.25 L31.75,28.75 C31.75,30.406854 30.406854,31.75 28.75,31.75 L3.25,31.75 C1.5931458,31.75 0.25,30.406854 0.25,28.75 z">
                        		<Rectangle.BitmapEffect>
                        			<BitmapEffectGroup>
                        				
										<OuterGlowBitmapEffect GlowSize="2" GlowColor="#FFF9F9F9" Opacity="0.5"/>
                        				
                        			</BitmapEffectGroup>
                        		</Rectangle.BitmapEffect>
                        	</Rectangle>

Silverlight: VisualState Manager, Storyboards and why designers should care about them both.

scbarnes — Mon, 30 Jun 2008 09:50:18 GMT

I've seen a lot of talk around VisualState Manager online and it mostly covers button states and so on. What I want to do here in this post is illustrate why VisualState Manager is a handy tool for the average interactive designer out there and how it can kind of short-cut a lot of animation transition logic automatically for you.

You can make your own States.

In Silverlight via Expression Blend you will have the ability to make your own VisualStates. In my case I have a Menu that when a button is clicked it fly's down. Once clicked again, it fly's back up.

First things first, I setup a basic wire-frame UI (always prototype people!) in which I have an outer-chrome and underneath it, I have a Green rectangle which represents the "menu".

Closed:

Opened:

That's the intent anyway.

Inside Expression Blend, on the Far left you should see this:

This is the area where you can add your own VisualStates. In this case, if you click on the icon, you will get "Add State Group", which should automatically add a StateGroup for you.

New StateGroup added.

Now, notice the 0s next to the StateGroup Label (You can change the Label if you want by the way to suite a more appealing name). The 0s input is essentially the total duration of time it will take to go between each state housed within this group. It's currently at 0s which means that there will be no animated transition between states. To enable an animation between states, bump this up to more than 0, (0.5seconds will be great starting point, as anything lower and it's hard to visually gauge the transition).

At this point, go ahead and Add two States via the menu (+ meaning add, - meaning remove).

You should end up with the following:

Setting up the States.

At this point, go ahead and rename the State and State1 to PullDown and PullUp.

Click on PullDown's state.

If you are familiar with the way StoryBoards work inside Expression Blend, then you will notice that the timelines per state can exist (by default they aren't added until you add them via clicking on the icon). This is called "in-state animation".

This is quite a powerful, as basically we've provided you the ability to add your own amount of animation per state. In this case, I've made my Green Rectangle fly down from 0y to 130y within the PullDown in-state animation.

I've made the duration for the animation around 2seconds which in this case means that although my animation for that state is expected to run for 2 seconds it won't (well not quite like that)

Why won't it?

The 0.5s here will add to the overall actual animation. As the way VisualStateManager works is that it will take 0.5s to go from PullUp state to PullDown state. Once the transition has completed, it will then play the 2second animation.

In total, your entire transition will take 2.5 seconds. Important thing to note here, is that should you want it to take 2seconds you just make the actual StateGroup (NxsRibbonMenuState) 0s.

The reason I would opt for a 0s Duration is that this allows you to attach your own easing (in/out) sequence per state, whilst allowing you to have a multi-step animation (meaning the animation can play different effects per tick on the Timeline).

This could also be done simply using a basic Storyboarding approach, but you don't get the flexibility of accessing the VisualStateManager via code-behind and you also have to write your own reverse routines should the user wish to interrupt the sequence of animation.

Why use States for Animations then?

In my case I wanted to enable a Menu to come down and up when the user clicks on a button. I also want it to also allow the user to change their minds and reverse the animation should they click the button half way.

VisualState Manager's can provide a great way to achieve this, as in my Button's Click handler, I simply tell it which state to go to and the rest automatically takes care of itself.

What does that mean though? say you've clicked on PullDown and the animation of PullDown state is half-way through (meaning 1sec into the animation). If you then trigger the state change to PullUp, VisualStateManager will automatically figure out how to transition all properties adjusted whilst in PullDown State back to PullUp state, automatically.

Note: When I say automatically (it's half true) what really happens is that Blend will create some storyboards within the VisualState tags. This is done at design-time but at run-time it essentially is automated in terms of figuring out how to go from AS-IS to a TO-BE.

Pretty powerful yes?

Here's some code to illustrate how you switch between states.

   1:  public partial class NxsRibbon : UserControl

   2:  {

   3:      public NxsRibbon()

   4:      {

   5:          InitializeComponent();

   6:          CURRENT_STATE = "PullDown";

   7:          VisualStateManager.GoToState(this, CURRENT_STATE, true);

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

   9:      }

10:

  11:      public string CURRENT_STATE;

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

13:

  14:          switch (CURRENT_STATE)

  15:          {

  16:              case "PullDown":

  17:                  CURRENT_STATE = "PullUp";

  18:                  break;

19:

  20:              default:

  21:                  CURRENT_STATE = "PullDown";

  22:                  break;

  23:          }

  24:          VisualStateManager.GoToState(this, CURRENT_STATE, true);

  25:      }

  26:  }

VisualState Manager is quite a powerful feature within Silverlight and Expression Blend. You just have to treat it with care, and keep your eye on the durations as the StateGroup will always win the fight.

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.

Voice Activated Commands in Blend.

scbarnes — Wed, 14 May 2008 03:31:52 GMT

Most folks whom know me would agree I am quite lazy at times. This being true, I've discovered a product which will help me out to become even lazier.

Voice Activated Commands is a product which retails for $18 USD and what it enables you to do is type in a text like "mossyblog" and then assign it to a shortcut.

The real reason I got this, was that when I'm on a plane or in a cramped environment, the mouse options at times is a pain in the butt, that and I can never really remember most Keyboard Functions off by heart. Words I can.

You can setup VAC with any program, and Microsoft Blend is one of them. I use this application for Microsoft Blend, Adobe Photoshop and Hexagon.

I've found it quite accurate and it surprised me, I guess last time I used a software that had voice command was many years ago with a product called "Dragon Dictate". Things have come a long way since then.

More Info: http://www.dwvac.com/

RIA, building your control framework.

scbarnes — Mon, 13 Aug 2007 09:38:40 GMT

Silverlight 1.0 is around the corner, and it won't have controls assigned to it upon official release. Yet, this is something very important to the success of Silverlight going forward, as without a control framework there is really no point right?

This is where Silverlight 1.1 will come through strong, and win over some folks with its upcoming new pieces to the first iteration puzzle. Yet, already 3rd Party vendors are producing controls today and automatically folks whom have been waiting impatiently for controls in Silverlight are likely to flock to these vendors.

Is this bad? not really, people want to build today, not tomorrow and so it's understandable. Yet, you can also build your own framework today should you wish to. The primitives in Silverlight have been in place for quite some time, and they will be available for 1.0 (with some extra benefits thrown in 1.1 of course).

The key ingredients to a framework are simply the following:

Text Input
Mouse Events
Support for External Media / Graphic elements
Animation / Threaded timed looping.

Armed with these, you could produce an entire framework ranging from a button all the way up to a tabbed layout. In fact, I've seen some folks produce Accordion Panels already. Yet, their is a lot to take on and namely it's most difficult piece to overcoming complexity is how do you not only make the framework work, but also for developers & designers at the same time?

Here are some considerations you should undertake if you decide to build a control / application framework tomorrow in Silverlight or Windows Presentation Foundation (WPF).

Part 1 - Skinning

Skinning and styling are somewhat confused with one another at times. In that changing a Font Color for a button label is not skinning. Adding your own custom texture to the surface of the button is skinning. It's can be both an easy and complex task to achieve, as when you think about a Button for example, it initially has 4 states associated to it.

Each state represents how the button will be displayed. Typically the default state shown when a user first see's a button is that of either "Normal" or "Disabled" depending on the context of use. This is basic skinning 101 style stuff, and the approach of a RIA Producer is to look at ways of injecting their own style of button without having to bust open lines of code to do so. Ideally the best option would be to see the button state in a tree format, then when you click on the "Normal" node, you are asked a bunch of questions around how you would like to apply skinning techniques to produce an expected result. This can either be done as part of an XML Editor of your own (which in turn spits out say XAML) or it can be done via a design tool (Expression Design / Blend ).

This is basic skinning, yet the more creative souls you work with, the more control they wish to rule over the skins. An example would be a design in which I want a Modal window to display.

In the Diagram to the Right, there are two pieces that are to be displayed inside a RIA (Rich Interactive Application) application (wrote many moons ago in Adobe Flex).

The first piece, represents the outer shell, in that this was to be the "overall" window in which I would dock my graphical interface into.

The second piece (smaller window) represented how my Modal/Non-Modal windows would be displayed.

Each of these pieces had a variety of display states, and the objective for me was to change the colors depending on how the user interacted with the application in question. In that they were not only context aware but also stretched according to screen real-estate.

As you can imagine the complexity of skinning just went up a few points, and doing this inside Adobe Flex at the time was quite hard (in fact I had to re-write a lot of the framework to adhere to specific skinning principals of my own). Yet, all I was doing was inserting an array of skin states to the equation?

It comes back to Skinning is something which is quite fluid and needs to be looked at from all sorts of angles. You're dealing with both a designer - and - a developer in one hit, so you need to provide turn-keys if you will to empower them in choosing multiple states, with multiple stretching techniques that can be bolted on via an array of modes - which in turn are flipped on/off through different event contexts.

In looking at the above graphic, you'll also note that there is a lot of static gray in the design? Should this change per state change or should this stay static. We could easily argue that the colored gradients are realistically the changing pieces and therefore can be adjusted by swapping in respective PNG files (alpha transparency remaining per color context). This the smart approach, and probably the least expensive (given there will need to be an entire update to the overall UI should one chose to repaint the gray bits every time).

Overall, the point is there are many variables at play and to approach skinning through a "4-state" update sequence for example, is quite immature and not realistically helpful to the RIA Producer of tomorrow.

The way forward is simple, there needs to be a GUIStateManager Class, in which has nodes. Think of these nodes as you would a tree control. Each node has a cluster of elements associated to it, yet each node can be shared or duplicated (duplication is much easier but can be expensive for memory). A Designer needs to assign these nodes to a control / layout of their respective choosing (in my case, a Window). The trick is you need to think of ways in which you can empower your developers & designers of tomorrow in making this happen, as it's not good enough to build a prescribed skinned control framework like many others have done in the past.

As this defeats the whole purpose of why Silverlight and WPF exist, and using Expression Design + Expression Blend there are strong hints to a more streamlined approach to building a complex hierarchy of skin states, whilst providing flexibility in choosing how each state should be displayed per control.

You can view a more structured example of the Window via:

http://www.mossyblog.com/archives/614.cfm
(My Originating blog post back in my Adobe Flex days)

http://www.mossyblog.com/SynergyFLEX/v2_0_1/SynergyFLEX.html
(See the above GUI inside Adobe FLEX, scaling according to your screen resolution)

Next... Part 2 - Stretching...

Microsoft UX.Artu.Tv

scbarnes — Mon, 13 Aug 2007 08:08:15 GMT

Arturo Toledo, Product Manager for UX Platform & Tools (Silverlight, WPF, Expression...) has spun up his own blog found over at http://www.ux.artu.tv/. Arturo is a classic artistic soul and he has some interesting insights once you get to know him - hint: subscribe to his blog as you will see one of the inner working UX minds behind the scenes in Microsoft.

He also has a list of updated features in Expression Blend 2 - August Preview. He should know as chances are he's the one of the few overlooking them.

One standout feature for me is:

Make User Control
Expression Blend 2 August Preview contains an early look at new functionality that lets you re-factor existing content into a control that can be reused (instantiated). Currently, only selected elements—and their referenced resources—can be re-factored into the new control. Any referenced animations are currently lost, but the current plans for next release are to preserve these as well. You also need to build the project to be able to see and instantiate the new control.

Other UX related bloggers are:

RIA is a belief, Silverlight is the execution.

scbarnes — Fri, 03 Aug 2007 04:26:58 GMT

I interact a lot around discussions in the Rich Interactive/Internet Application (RIA) space. I read as much as I can on it and keep tabs on what I find interesting around theories associated to RIA. I also engage folks whom never have even heard the acronym RIA and it's interesting conversation to have as how do you explain it without going deep into a detailed technology discussion.

What does RIA represent really.
It's effectively an idea, on how to get maximum user experience through a browser payload initially. In that we all can agree that we'd love to balance our general ledgers via the browser as it's an easy footprint to leverage whilst at the same time we can get a sense of depth via such a small footprint.

HTML combined with JavaScript (aka AJAX) is doing a lot of interesting things, but it effectively hits a barrier at some point and it could come down to simple GUI (Graphic User Interface) positioning of elements that or involvement of other forms of media (animation, movie, audio, remote data connection points). RIA on the other hand overall is about clawing our away out of this realm of limitation and into the next natural existence, by aggregating as many of the media elements and the twists and turns that are associated with them into a rich interactive experience, which can empower end-users to solve real world business grade solutions (that or simply provide an existence to goof around in).

How does Silverlight Play a role then?
Silverlight has and will always be the missing piece in the overall Microsoft Platform stack. It's been missing for years and whilst we have made substantial bold movement in the Windows Form Project space and at the same time really pumped a lot of goodness into the Web Form Project space, we still have this missing piece in the middle. It's usually filled by Flash but in reality what does that do to the overall development practices buried deep within our customer base?

It means you may have to learn an alterative technology that has similar syntax to C# / XAML but is obviously different. It also means that you're not really getting an end to end tool driven solution (Visual Studio is a fantastic productive tool, so one has to agree that if we can keep in the one space and tweak/pull code to suite life is good right?).

Enter Silverlight's existence, in that our bet at Microsoft is to enable folks to move upwards and downwards in the three tiers of platform experience (ASP/AJAX | Silverlight | WPF). Each has their own righteous approach to execution but the underlying win for the average .NET punter is that you get to re-use your skill set and understanding of Microsoft's approach throughout. In that if you were a to study C# and XAML tomorrow, this effectively becomes your passport up and down the stack right?

Furthermore, it's a natural progression in enabling customers around the world to enhance their existence online both through browsers but also soon via other client surfaces using an enriching experience. That's the overall bet anyway. Is it going to happen tomorrow? nope, it's a marathon not a sprint and simply put focus on up skilling now as that will be your safest bet.

Well, what is Microsoft's vision overall around RIA then (Silverlight + VS2008 + Expression?)
Once you've grasped the context of what RIA represents you're probably going to either want to build or give it a miss. If you chose the earlier, you're now looking down the barrel of a whole new world in which to approach. You're going to have to weigh up both your developer & designer capabilities, along side associated logistics (servers, bandwidth etc) associated to the cost in implementation.

It's a lot of variables trust me (a lot of years playing in this space telling you hehe)

The key ingredient that we believe is worth the investment in Silverlight is that you're basically buying one socket but opening up into other realms of possibility. In that down the road the overall eco-system that surrounds Silverlight is growing to a rate that I've never personally seen.

For example, Visual Studio 2008 has a lot of new features and productivity gains associated to it and Silverlight is buried deep within. You also then have Expression Studio to match, so in a nutshell you have both ends of a gradient (developer vs designer) meeting in the middle via these two suite of tools. On top of this, you then have an entire platform stack to pick from, and given some of the improvements associated with Windows 2008, this is heating up to solid solution (eg: IIS 7.0 is quite an exciting piece). It gets better though, as we are making some strategic movements associated with Live.com cloud, and one thing I've came to a crashing conclusion is that folks internally are really looking to push the Microsoft service cloud further and deeper then it is today.

Overall you have an entire ecosystem, many brands and i mean many! waiting for you to pickup and engage. Silverlight is effectively one of many points of entry and it's journey is to be the middle guy, the one that is bound by obvious security restraints but at the same time hints at strong end-user experience over the wire (Internet). Looking to do more in client surface reach as well!

Are Microsoft competing with Flash?
Honestly, no. I think there is a lot of overlap and intersection points between Silverlight and Flash but if you step back and look at the entire product spectrum you'll see to isolate the argument down to feature vs feature in Flash battle, really undervalues you the proposition put forward around Microsoft's bet in Rich Interactive Applications. Silverlight has a roadmap that differs in my opinion from Flash, and realistically it both can be fused together or if you prefer to pick one then so be it.. choice is a brilliant thing to have.

Microsoft is simply looking to complete the circle of User Experience. Any questions?

Some minor Silverlight assumptions/queries.

scbarnes — Fri, 08 Jun 2007 14:17:31 GMT

It's been an interesting couple of days for me, as I've meet some developers in both business meeting setting and via social setting (aka WebJam).

In my chats with these developers, they all seem very keen to learn more about Silverlight but have hesitations on it that range from "Isn't it bleeding edge?" to "It looks good but I'm not a .NET developer".

I'm not a .NET developer, so I guess Silverlight isn't for me.
Wrong, it can be, you can use Silverlight with HTML as if you would with Flash and HTML. Having zero .NET experience won't hamper you in anyway from building applications in future with Silverlight. You can do a lot with Silverlight today + HTML + AJAX. Microsoft wasn't kidding around with it being a natural progression from AJAX To the next step. You can control the entire Silverlight SDK from JavaScript (no .NET assembly required). So "Silverlight bots, transform and roll out!"
What does Silverlight do differently to Flash
Lots, none and some. Wrong question, what does Silverlight do for you going forward and if you are a .NET developer it compliments your skill set (removing the need to learn new tooling & languages together. Expression Studio isn't that bad of an effort to be honest, as it took me 2 days of playing and I got it).

If you are a budding Flash Developer and are looking for a reason to take it on as an extra piece to your portfolio, do so with that in mind. It's another hammer for your tool kit, another piece of clay to sculpt with and so on. It approaches things differently to Adobe Flash, but that is because the roadmap beyond its release has different visions of where RIA is likely to go thus Microsoft's approach. Rich Web, Rich Client & Rich Device is your mantra.
How do I combine ASP.NET AJAX with Silverlight then?
That's easy, you create a Project Solution in Visual Studio Orcas, you nominate ASP.NET Futures (with AJAX Toolkit installed) as your chosen template. You then create a Silverlight Project within the same solution.

Now comes the really hard part.

You then right click on the ASP.NET AJAX Futures project and hit the "Add Silverlight Link" to this project.

Congratulations you've just linked the two projects together and every time you make changes to your Silverlight project, it will reflect into your ASP.NET AJAX Futures project. "Look mah, no hands".
What would you tell me that's cool about Silverlight?
Honestly, so far I've found (even after today) the Brush Fills to be the sexiest thing in this round of releases. I like it for it's simplicity and allow me to demonstrate

<Rectangle>
	<Rectangle.Fill>
		<Image Source="myimage.jpg"/>
	</Rectangle.Fill>
</Rectangle>

I'll post more of these leading up to ReMIX as it amazes me some of the questions being asked (hey you don't know what you don't know, no harm, no foul) and if these are all that are stopping folks from having a go, then consider it greenlight time hehe.

Vista's doing well, which means WPF = Good.

scbarnes — Fri, 27 Apr 2007 21:37:16 GMT

Paul Sakuma/Associated Press - Image Link to New York Times

I see a lot of hype, street talk around Windows Vista and how it's doing world-wide. It usually ends up in a Apple conversation and it gets noisy from there.

At any rate, Microsoft announced yesterday that we are essentially growing the Windows Vista & Office market well. You can read more if you want the specifics below, but what does all this mean for developers?

In context, it means that Windows Presentation Foundation (WPF) applications are shaping up to be a realistic discussion around going beyond the browser experience with approaches like (XBAP) for example. As you don't download .NET 3.0 runtime, it's free inside the operating system and some applications I've seen inside WPF have super small payloads attached to them and do significantly a lot.

A classic example in the WPF space is Expression Blend itself, as when you remove the Sample Source Code Examples, you're left with approx under 20mb in size. I'd argue the actual Help file takes up a large piece of that as well. Overall, that's pretty damn exciting as not only does Expression Blend use WPF pieces to then create WPF (so dog fooding)

There is room to move here folks and with success stories like New York Times reader being profiled out there, it offers a compelling argument going forward in terms of adopting Microsoft User Experience offerings.

It doesn't stop there, SideBar Gadgets is probably one of the coolest features in Windows Vista as you can do some very creative and interesting things with it. You can use this in LOB applications to snapshot pieces of the application and so on.

Bottom line, now is the time to get your mind around WPF, what it means to you, what you can do with it and start thinking about adding it to your development roadmap going forward.

[ Continue to NYT article on how well it's doing - that or read it inside NYT Reader itself! ]

I love electric Rain Standout.

scbarnes — Mon, 23 Apr 2007 04:47:32 GMT

In my role, Powerpoint Presentations is usually a must and while I don't mind all the new bells and whistles in Office 2007 Powerpoint, it's still not as good as if I would build in say Flash Professional (like I've done in the past).

Never fear, for Electric Rain have come to the resource and put together a Rich Media presentation tool which empower geek's like me to whack some funky presentations with minimal effort but with a rich experience as my output - and - it plays well with Expression Blend! HOW COOL IS THAT!

Now I just need to work on the presentation scripts themselves as I have more to learn in that space (Give me a year)

http://www.erain.com/products/standout/ExpressionVideo.html

Very cool!