Recently, I did a presentation on how to structure a Silverlight Application using Styles and Resources. This covered several topics about structuring XAML using only the Blend User Interface as a tool.

When you create a Style, Blend goes in Style Recording mode (even though there is no visual indication of that) and all properties you set in this mode are collected in your styles automatically. Just remember to begin creating a Style, you can’t convert inline properties to styles momentarily.

You can create a Resource from almost everything (although you cannot always use them as such) using the small square to the right of the input box for the property in the Property Panel. Using the Resource Panel in Blend reorganizing Resources is straightforward. You can even move User Control Resources to the application level by dragging the layer to the Application Resource Dictionary in the Resource panel.

Placing animations in App. xaml is certainly possible with the technique I mentioned earlier. You’ll have to start the animation using code.

All this helps to set up a more structured version of your Silverlight Application. But… One thing missing from this list is how to remove large vector illustrations in XAML from you pages and place them as a resource in the application level. That way large chunks of XAML are out of the way and they can be reused using only one line of code: efficient and good for your application’s performance. With the following technique, you can put ANY large, coherent piece of XAML away as a resource. Anything that you can stash in a Grid panel, for example.

The trick is the use of a Content Control and to set it’s Template property to a ControlTemplate that is used as a Resource:

<ContentControl Template="{StaticResource ctpBullet}" />

 

      <ControlTemplate x:Name="ctpBullet" TargetType="ContentControl">
            <Grid Width="12" Height="12" VerticalAlignment="Top" HorizontalAlignment="Center">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition />
                </Grid.RowDefinitions>
                <Ellipse x:Name="Bullet" Grid.RowSpan="2" Stretch="Fill" StrokeThickness="0.5" StrokeLineJoin="Round" Stroke="#FF870000">
                    <Ellipse.Fill>
                        <RadialGradientBrush RadiusX="0.67158" RadiusY="0.671574" Center="0.34738,0.263298" GradientOrigin="0.34738,0.263298">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#FFFF0000" Offset="0.512712"/>
                                <GradientStop Color="#FFCF0000" Offset="0.817797"/>
                                <GradientStop Color="#FFFF0000" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <RotateTransform CenterX="0.34738" CenterY="0.263298" Angle="57.8044"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <Path x:Name="BulletGlow" Margin="2" Stretch="Fill" Data="F1 M 23.0627,100.787C 26.3052,100.787 28.9338,103.416 28.9338,106.659C 28.9338,109.901 26.3052,106.595 23.0627,106.595C 19.8202,106.595 17.1916,109.901 17.1916,106.659C 17.1916,103.416 19.8202,100.787 23.0627,100.787 Z ">
                    <Path.Fill>
                        <RadialGradientBrush RadiusX="1.19041" RadiusY="0.858456" Center="0.332587,0.223982" GradientOrigin="0.332587,0.223982">
                            <RadialGradientBrush.GradientStops>
                                <GradientStop Color="#FFFED4D0" Offset="0"/>
                                <GradientStop Color="#FFF27037" Offset="1"/>
                            </RadialGradientBrush.GradientStops>
                            <RadialGradientBrush.RelativeTransform>
                                <TransformGroup>
                                    <SkewTransform CenterX="0.332587" CenterY="0.223982" AngleX="22.4347" AngleY="0"/>
                                    <RotateTransform CenterX="0.332587" CenterY="0.223982" Angle="71.469"/>
                                </TransformGroup>
                            </RadialGradientBrush.RelativeTransform>
                        </RadialGradientBrush>
                    </Path.Fill>
                </Path>
            </Grid>
        </ControlTemplate>

So, clean up your XAML markup. With this trick you can remove those large vector illustrations from you screen layout and place them out of the way in app.xaml.

Njoy!

Tonight I found this short cryptic message by Bennage on the MSDN Code Gallery site:

Blend 2.0 SP1
bennage
Oct 1 at 4:37 PM  FYI I was able to get the plugin working against 2.0 sp1 simply by recompiling the source against the 2.0 sp1 assemblies.

As a designer, it was a bit too short and cryptic for me. But I decided to have a go anyway. This it what I had to do do make Intellisense working again for Blend 2 SP1:

1. Download the original BlendSense_Install.zip from the MSDN Code Gallery site:
   http://code.msdn.microsoft.com/BlendSense/Release/ProjectReleases.aspx?ReleaseId=1358
2. Install the Addin as explained on the Homepage: http://code.msdn.microsoft.com/BlendSense
   Blend.bat, Addins folder with a DLL and the Schemas Subfolder should all be in place. If you have a failed attempt to install BlendSense for Blend 2 SP1, you’ll probably be in good shape
3. Download the Code from the MSDN Code Gallery site:
   http://code.msdn.microsoft.com/BlendSense/Release/ProjectReleases.aspx?ReleaseId=1358
4. Upzip it to your visual studio or Blend projects directory:
   c:\users\YOU\Documents\Expression\Expression Blend Projects
5. Start Visual Studio or Expression Blend and load the Expression.Blend.Intellisense project
6. Open the Solution Explorer or Project tab and check the References  folder to find several dll’s that are missing or invalid, marked by a yellow exclamation mark
7. Right-click on the References folder and select Add Reference…
   Click the Browse tab in the Add Reference dialogbox and browse to your Blend 2 SP1 location: “c:\program files\Microsoft Expression\Blend 2″
8. Select all the DLL files that are missing by keeping the Ctrl key down while clicking the filenames. Click OK. The yellow exclamation marks in the Solution Explorer or Project tab References folder will disappear.
9. Build the project using Build/Rebuild Solution. If all is well, the build will succeed.
10. Check the debug folder in de Expression.Blend.Intellisense folder for a DLL called Expression.Blend.Intellisense.dll (if you made a release build you’ll find it in the Release folder of course).
11. Copy this file to the Add-In folder in the Expression Blend program folder: “c:\program files\Microsoft Expression\Blend 2\Addins” Replace the existing file with the same name but smaller in size with this new DLL. Don’t paste it in the Blend program folder, but in de Add-in folder.
12. Run Blend.bat from the Blend Program folder.
    This contains the command:
    start Blend.exe -addin:Addins\Expression.Blend.Intellisense.dll
13. Blend wil start and ask you to open your last project. Open the project.
    Press F11 twice or click the XAML tab at the top right of the working area in Blend.
14. Press Ctrl + Spacebar inside any XAML statement to find intellisense working!

Thanks bennage for the original post at: http://code.msdn.microsoft.com/BlendSense/Thread/List.aspx and of course many, many thanks to Stefan Dobrev for making it all possible at http://blogs.telerik.com/StefanDobrev/Posts/08-08-04/IntelliSense_for_Expression_Blend.aspx

Hope this helps (I know it will!) Njoy!

De derde Demo heet Deepest en gaat over interactieve schermen op driedimensionale oppervlakken. Ik spin en flip hier planes met een Registratieformulier erop. Verder schanier ik die planes opzij in twee richtingen en draai ik ze uit de hoek in beeld voor ik ze rechtzet. Ook hier is een Harmonica te zien, eigenlijk twee: een bovenin het scherm met portretjes en een rechtsonder in het scherm die afbeeldingen bevat. Die kunnen gecombineerd worden tot interessante 3D oplossingen voor master/details scenario’s. Verder toon ik hier ook kubussen met formulieren van buiten en van binnen en draai de camera om een kubus met formulieren erop.

Daarnaast zitten er nog wat verassingen in de demo’s. Linksonder in Deep klapt een Expander uit om buttons te tonen waarmee ik de Xbox doos omvorm tot boeken over WPF 3D: 3D Programming For Windows van Charles Petzold, WPF Unleashed van Adam Nathan en mijn eigen Handboek XAML, waar ook een hoofdstuk over 3D in staat.

Om te bewijzen dat andere modellen dat een rechthoekige doos ook kunnen, wilde ik een blikje frisdrank tonen. En welk blikje is beter geschikt dan die van de Macaw Liquid Energy, die ook tijdens de SDC wordt uitgereikt? Het was tamelijk eenvoudig om in de 3D modelleer applicatie ZAM3D de rechter contour van het blikje te tekenen en via de lathe functie (denk draaibank) er een cylinder van te maken. De afbeelding erop is van het oorspronkelijk ontwerp voor het etiket, al aangepast is aan de nieuwe huisstijl. Via de Viewbox en Viewport eigenschappen is die op de juiste plaats gezet en een animatie, die het blikje eindeloos ronddraait, maakt het helemaal af.

Dit alles levert materiaal op voor de mensen, die de sessie op de Software Development Conference bezoeken, met voorbeelden en code om zelf in hun interfaces met 3D aan de slag te gaan. Ze krijgen een CD mee met de presentatie en de mogelijkheid om vanuit de slides deze demo’s op te starten. Verder staat op de CD alle broncode die ik het verzameld en geschreven om deze demo’s te laten werken.

De demo en de source code zijn beschikbaar via mijn public map op mijn SkyDrive:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

Last time I mentioned the first demo of my presentation at the Software Development Conference called Deep. This dealt with product presentation, using a 2D UI for a 3D scene with only one model. In this demo, called Deeper, I will show you several effects you can use for your own UIs with WPF 3D.

The second demo (Deeper) consists of several possibilities to use a series of primitive models (plane, cube, cylinder, sphere) in User Interfaces. It show the spinning, flipping and stacking of planes, cover flow, harmonicas and carousels. Cubes are rotated en cylinders viewed from the inside. It was hard to think of good usage for a sphere and at first I only could come up with the planet Earth. With HitTesting you can point at a specific location and show it on the Earth surface. Later I also created a menu with five revolving spheres. Beyond that, you can see an animated SpotLight, transform of textures via sliders and animation of a camera around a cube.

The Demo executable and the source code are available from the public folder on my SkyDrive at:
http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public.

De tweede demo ( Deeper) bestaat uit een aantal mogelijkheden om een serie primitive modellen (plane, cube, cylinder, sphere) te gebruiken in User Interfaces. Het toont het spinnen, flippen en stapelen van planes, cover flow, harmonica en carrousel. Verder worden kubussen gedraaid en een cylinder van binnen bekeken. Voor een bol kon ik eerst alleen een aarde bedenken, waar je via HitTesting een locatie op kon aanwijzen, maar later heb ik ook een menu van vijf om elkaar heen draaiende bollen gemaakt. Verder zie je hier een geanimeerd SpotLight en is het verschuiven van textures via sliders en het animeren van de camera rond een kubus te zien.

De demo en de source code zijn beschikbaar via mijn public map op mijn SkyDrive:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

Njoy!

Last week Tuesday at de Software Development Conference I finally gave the presentation called Deep, Deeper, Deepest on WPF 3D I had been preparing for weeks. Even though the attendance stuck to 18 indidividuals, evaluations showed a score of 7,6 with high scores for Use of Visual Aids. I will be posting screenshots, executables and code, along with a description of the demos. This will be spread over three consecutive posts. Today is about Deep:

Deep Demo Screenshot

Some people may have seen this first demo. It is called Deep and shows a Xbox box in the middle of the window. The demo is now filled with all features of 3D Graphics: model, geometry, camera, lights and textures. I created animations for it and several elements are controlled by sliders. The intention was to show off the capability for product presentations in WPF. This demo uses a Viewport3D, a control that participates in 2D screen layout like any other, but can only contain 3D information itself. The box is rotated using the buttons and the sliders. Using the textboxes to the left, the Width, Height and Depth are changed to update the size of the box. The Sphere to the left makes rotating the box possible, with the help of Hittesting on the Sphere. Rotating the camera is achieved, using the sliders at the top right hand side of the screen. Buttons below that will animate the camera to different views. The slider at the bottom right of the screen kan dim the lights to demonstrate the difference between AmbientLight, DirectionalLight and SpotLight. URLs of textures in the textboxes at the bottom of the screen allow the textures to be changed using Data Binding.

The Demo executable and the source code are available from the public folder on my SkyDrive at:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

This makes a wonderful toy, playing around with all the possibilities a single model has using a 2D interface with buttons, sliders and textboxes. It works primarily through Element Binding to Sliders and Textboxes and uses Buttons to start the animations. You can also download and use the Code from the link above.

Njoy! 

Sommige mensen hebben willicht de eerste demo al gezien. Het heet Deep en heeft een Xbox doos in het midden. Die demo is nu verder ingevuld, zodat alle onderdelen van 3D Graphics aan bod komen: model, geometry, camera, lights, textures. Daarvoor heb ik animaties gemaakt en bovendien zijn de onderdelen via sliders te besturen. De bedoeling is om de mogelijkheden voor een productpresentatie in WPF zichtbaar te maken. Deze demo maakt gebruik van een Viewport3D, een control dat gewoon in de 2D layout van een scherm meedoet, maar zelf uitsluitend 3D informatie kan bevatten. De doos is met de buttons en sliders om te draaien en met de tekstboxen links kan de Width, Height en Depth aangepast worden om een ander formaat doos te tonen. De bol links maakt het mogelijk om via HitTesting op de bol de rotatie van de box aan te sturen. De camera wordt gedraaid met de sliders rechtsboven. De knoppen eronder animeren de camera naar een bepaalde view. De sliders rechtsonder kunnen de lichten doven en zo het verschil tussen AmbientLight, DirectionalLight en SpotLight inzichtelijk maken. URLs van textures maken het mogelijk om deze snel te veranderen.

De demo en de source code zijn beschikbaar via mijn public map op mijn SkyDrive:

http://cid-8073406c0ec0e68a.skydrive.live.com/browse.aspx/Public

Dit levert erg leuk speelgoed op, waarmee je kan spelen met alle mogelijkheden die een enkel model heeft via een 2D User Interface met buttons, sliders en tekstboxen. Het werkt voornamelijk met Element Binding aan sliders en tekstboxen. Het gebruikt Buttons om de animaties te starten. De code kan je ook downloaden via de link hierboven…

Working in Blend for more than a year and a half now, you should think I  have seen about every screen and dialog there is. Recently I’ve been working with WPF 3D a lot and I found the Material editor in Blend… More surprisingly even was the discovery of the Grid Column en Rowdefintions Dialogs. No more struggling to set the star size of a Column exactly or in XAML. It was there all the time. I’ll keep on the look for more Nooks and Crannies of Expression Blend. If you know one, let me know…

I like to have my animations apart from the rest of the XAML, because they can become very lengthy and are not really relevant to the functionality of the UI. It’s better to edit them separately.

The animations in Silverlight have to be started using Event Handlers in a Code Behind file in Silverlight instead of the Triggers used in WPF. The Triggers were able to connect to the target object for an animation. The Event Handlers won’t do that for you.

You’ll have to find the Animation Resource, assign it to a Storyboard object in the Code Behind file of your page and set the Target element for that Storyboard before starting the animation.

Michel Heijman helped me out with this. This is his solution:

Create a helper class that can find Resources for you (like in WPF). Save this in the root of your project and name it ResourceLocator.cs.

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace AnimationsAsApplicationResources
{
    public static class ResourceLocator
    {
        ///

        /// Helper method for finding resources located in app.xaml
        ///

        ///

        ///
        public static object FindResource(string name)
        {
            if (App.Current.Resources.Contains(name))
            {
                return App.Current.Resources[name];
            }
            else
            {
                FrameworkElement root = App.Current.RootVisual as FrameworkElement;
                return root.FindName(name);
            }
        }
    }
}

In the Code Behind of your page, add the following to access the Animation Resource, set the TargetName for it and to run the Animation:

        private void startStoryboard1(object sender, RoutedEventArgs e)
        {
            // find the storyboard with helper class:
            Storyboard Storyboard1Resource = ResourceLocator.FindResource(“Storyboard1″ ) as Storyboard;
            if (Storyboard1Resource != null)
            {
                // Set target for storyboard:
                Storyboard.SetTarget(Storyboard1Resource, Rectangle1);
                // Begin storyboard:
                Storyboard1Resource.Begin();
            }
        }

Don’t forget to place your animation in app.xaml now No need to change the app.xaml.cs file for this…

Njoy!

Lacking the DropShadow BitmapEffect that is present in Windows Presentation Foundation, we cannot use BitmapEffects to create shadows for containers. This doesn’t mean no shadows are possible in Silverlight 2. In the old days of CorelDraw 5 we used so-called Blends to create shadows in vector drawings. Blends are a feature that morphs one shape to another using several steps. In these steps new shapes are created that are in-between the starting and the resulting shape. Actually I think Expression Design does Blending. Just make sure the program can guess which vertices it can map to vertices on the resulting shape. If you don´t your shapes go haywire .

Using XAML you can emulate Blends in vector drawing programs. Below is a piece of code that mimicks Blends. Note that the Margin used is always 1 to ensure a smooth gradient. Note too, that the used color is almost transparant Black. These transparent colors add up to a nice shade of gray. If you want to have a darker shadow, just make this color darker. I have not used Resources just to keep the XAML concise, but I would make editing the Shadow color easier. Actually, you can make a UserControl like a ShadowBorder that not only allows for changing the shadow color, but also the shadow direction. Anyone who makes a user friendly control like that, please let me know…

<Grid x:Name="LayoutRoot" Background="LightYellow" >
 <Grid  Width="300" Height="200">
  <Border CornerRadius="25" Margin="1" Background="#03000000">
  <Border CornerRadius="24" Margin="1" Background="#03000000">
  <Border CornerRadius="23" Margin="1" Background="#03000000">
  <Border CornerRadius="22" Margin="1" Background="#03000000">
  <Border CornerRadius="21" Margin="1" Background="#03000000">
  <Border CornerRadius="20" Margin="1" Background="#03000000">
  <Border CornerRadius="19" Margin="1" Background="#03000000">
  <Border CornerRadius="18" Margin="1" Background="#03000000">
  <Border CornerRadius="17" Margin="1" Background="#03000000">
  <Border CornerRadius="16" Margin="1" Background="#03000000">
  <Border CornerRadius="15" Margin="1" Background="#FFFFFFFF" />
  </Border></Border></Border></Border></Border>
  </Border></Border></Border></Border></Border>
  <Grid Margin="12" VerticalAlignment="Center" HorizontalAlignment="Center" >
   <TextBlock Foreground="Silver" Text="Your content here..." />
  </Grid>
 </Grid>
</Grid>

Njoy!

I’ve been asked by a client if it was possible to make color versions of a design. I told him that that was actually very easy. And it is. It is just that you have to treat your colors a little different: you’ll have to create color palettes using Color Resources. Because that worked a little different in Silverlight 2 Beta 1 than in WPF I was on the wrong foot for a long time. Finally I worked it out and here it is:

There’s only one way to specify a Color in Silverlight:

<Color x:Key="colAccent">#FF800000</Color>

and this gets underlined in Visual Studio indicating that Color cannot have direct content (meaning the color code between the <Color> and </Color> tags). You’ll have to ignore that

All other ways to specify color won’t work in Silverlight:

  <!-- Colors in Silverlight 2 beta 2:-->
        <!-- all these don't work -->
        <!--<Color x:Key="colBrightAccent" A="FF" R="00" G="00" B="00" />-->
        <!--<Color x:Key="colBrightAccent" A="#FF" R="#00" G="#00" B="#00" />-->
        <!-- <Color x:Key="colBrightAccent" A="255" R="255" G="0" B="0" />-->
        <!--<Color x:Key="colBrightAccent" scA="1" scR="0" scG="0" scB="0" />-->

Note that at least the second and the fourth are valid in WPF. The third seems to go well in Blend, but gives an error in the browser and won’t show anything: the screen remains white.

Still, this allows you to create palettes of color. Here’s one with two colors:

<Color x:Key="colAccent">#FF800000</Color>

<Color x:Key="colBrightAccent">#FFFF0000</Color>

  

You can use these in SolidColorBrushes and LinearGradienBrushes like these:

        <!-- Brushes that can apply those colors using color resources -->
        <SolidColorBrush x:Key="brAccent" Color="{StaticResource colAccent}" />
        <SolidColorBrush x:Key="brBrightAccent" Color="{StaticResource colBrightAccent}" />

        <!--Gradient Brushes can use those colors too! -->
        <LinearGradientBrush x:Key="lgbrAccent" StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="{StaticResource colBrightAccent}" Offset="0" />
            <GradientStop Color="{StaticResource colAccent}" Offset="1" />
        </LinearGradientBrush>

Place all this in app.xaml between de <Application.Resources> tags and you’ll be ready to apply them in some normal XAML:

 <Grid x:Name="LayoutRoot" Width="200" Height="150">
  <Grid.RowDefinitions>
   <RowDefinition /><RowDefinition /><RowDefinition />
  </Grid.RowDefinitions>
  <Rectangle Grid.Row="0" Fill="{StaticResource brAccent}" Stroke="{StaticResource brBrightAccent}" RadiusY="25" RadiusX="25" StrokeThickness="5"/>
  <Rectangle Grid.Row="1" Fill="{StaticResource brBrightAccent}" Stroke="{StaticResource brAccent}" RadiusY="25" RadiusX="25" StrokeThickness="5"/>
  <Rectangle Grid.Row="2" Fill="{StaticResource lgbrAccent}" Stroke="{StaticResource brAccent}" RadiusX="25" RadiusY="25" StrokeThickness="5" /> 
 </Grid>

What makes it easy to make color versions of a design is the fact that you can easily replace the two color codes in the Palette to change the look of the entire application! This would do the trick:

  <Color x:Key="colAccent">#FF008000</Color>
  <Color x:Key="colBrightAccent">#FF00FF00</Color>

Be aware of the use of a Color Resource (colBright) in a LinearGradientBrush, but a Brush Resource (brBright) when you use it for a Fill or a Stroke.

So with about 10 colors as resource in app.xaml, you can actually create a basis for skinning your application. It’s just that now I still have to replace all the separated colors in my project with StaticResources and that will take some time… So now it is easy, but it will take a while If you remember to work like this from scratch, you’ll be fine when a client ask you if color versions are possible…

Njoy!

 Last weekend I played around with the new version of Blend 2.5 to see how the Visual State Manager (VSM) was working. I was pleasantly surprised by the simplicity of it all. Actually it works just like an animation. You just don’t need a timeline for states. So if you know how to animate in Blend, it is fairly easy to add states to buttons. To show you, I’ve adde states to the MediaPlayer-style videobutton I made in the previous post.

First doubleclick the button in the Objects and Timeline category in the Interaction Panel. A yellow line indicates it is selected. Then from the Button in the breadcrumbsbar below the titel of the document, click the little arrow and select Edit ControlParts (Template) and Edit Template. Since we’re using a button with a self-made template we already have a template. If you start with a new button, you’ll have to create a template using the menu first.

In the button Template, the States Category in the Interaction Panel will show several default states for the button. Below,  I’ve selected the pressed state. The “State Recording is on” message appears in red and just like in animating, you can now change Opacity, Color for that state. You can even use transformation, as you may notice that the glow and the TextBlock are moved down a few pixels.

The Name of the elements of the button in the Templates are preceded by a red circle with a white arrow to indicate it is particitpating in the current state. I have not discovered how to delete this using the UI, but you can easily find it in the XAML is you have to.

You can add transitions for the several states of this button using the + icons and – icons on the State bars. Change the transistion time with the (as buttons disguised) TextBoxes. You can drag to change the value like in other TextBoxes in Blend.

These are the states I created: a lighter yellow for the MouseOver, a darker yellow and transitions on the glow and text for the Pressed and a colorless version for the Disabled state. Note the the Focus state kicks in when the button is Pressen and remains Focused when released…

 

 

 

 

 

 

 

 

 

 

 

 

The XAML that the VSM generates is rather lengthy. Just as an example here’s the state which has least code (except for the Normal state that has an empty Storyboard)…

       <vsm:VisualStateManager.VisualStateGroups>
        <vsm:VisualStateGroup x:Name="CommonStates">
         <vsm:VisualStateGroup.Transitions>
          <vsm:VisualTransition Duration="0:0:0.2" To="MouseOver"/>
          <vsm:VisualTransition Duration="0:0:0.1" To="Pressed"/>
         </vsm:VisualStateGroup.Transitions>

         <vsm:VisualState x:Name="Normal">
          <Storyboard/>
         </vsm:VisualState>

         <vsm:VisualState x:Name="MouseOver">
          <Storyboard>
           <ColorAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[2].(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="0" Value="#FFFFFB93"/>
           </ColorAnimationUsingKeyFrames>
           <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFEFF77"/>
           </ColorAnimationUsingKeyFrames>
           <ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Shape.Fill).(GradientBrush.GradientStops)[1].(GradientStop.Color)">
            <SplineColorKeyFrame KeyTime="00:00:00" Value="#FFFDB005"/>
           </ColorAnimationUsingKeyFrames>
          </Storyboard>
         </vsm:VisualState>

        </vsm:VisualStateGroup>
       </vsm:VisualStateManager.VisualStateGroups>

Njoy!