locked
How do I implement something like "light up the web" on silverlight.net using Blend? RRS feed

  • Question

  • On Silverlight.net, as I move my mouse over the images, the images and the text on the top changes. I love it but struggling to find out the best way to implement it.

    1. I thought layers, but it will be too much to hide and show a layer, there has to be a better way.
    2. Create multiple image and textblock array and show and hide depending on where the mouse moves. But this still seems like a non-efficient way.

    Any suggestions or guidance? Anything you can do to help is greatly appreciated.

    Have a great thanksgiving!

    Sam
    Wednesday, November 26, 2008 9:14 PM

Answers

  • Hi SamShah66,

    Both of the methods you listed can be done, but it wouldn't involve any slick animations which is one of the key features of Silverlight, Animations!

    With Silverlight (& WPF), you can easily create animations, which are stored as storyboards, which can be set to trigger when certain conditions are met, for example, the mouse over animation can be achieved by creating a storyboard of the mouseover animation on your object, maybe a button, and add a trigger via code to begin that very storyboard. There are many tutorials that could provide you with a step-by-step guidance on how to deal with animations in Silverlight. Heres one of them from Silverlight.net on Animations.

    One awesome new feature that I absolutely love, that is extremely useful in certain scenarios (e.g: setting the various animations of a button style) is the Visual State Manager (VSM), which was just recently introduced. In a nutshell, it allows you to define the various states of an object, without the need to manually create a storyboard for each interaction on that object.

    A good example would be styling a button, the original color is blue, the mouseEnter color is light blue, and the mouseLeftButtonDown (Click) color is dark blue, with the VSM you would only need to set the various "states" of the object, and it will trigger accordingly, transitioning from one state to another seamlessly. Without the VSM you would need to create 4 storyboards (mouseEnter, mouseLeave, mousLeftButtonDown, mousLeftButtonUp), and manually write the code to trigger the storyboards based on the events, time consuming and troublesome.

    You can check out Tim Heuer post on VSM and extensive explanations on how to use it here.

    If this answered your question, please mark it to help others facing similar issues.

    -
    • Proposed as answer by Kok Chiann Thursday, November 27, 2008 6:08 AM
    • Marked as answer by Lori DirksModerator Thursday, January 15, 2009 2:19 AM
    Thursday, November 27, 2008 6:08 AM

All replies

  • Hi SamShah66,

    Both of the methods you listed can be done, but it wouldn't involve any slick animations which is one of the key features of Silverlight, Animations!

    With Silverlight (& WPF), you can easily create animations, which are stored as storyboards, which can be set to trigger when certain conditions are met, for example, the mouse over animation can be achieved by creating a storyboard of the mouseover animation on your object, maybe a button, and add a trigger via code to begin that very storyboard. There are many tutorials that could provide you with a step-by-step guidance on how to deal with animations in Silverlight. Heres one of them from Silverlight.net on Animations.

    One awesome new feature that I absolutely love, that is extremely useful in certain scenarios (e.g: setting the various animations of a button style) is the Visual State Manager (VSM), which was just recently introduced. In a nutshell, it allows you to define the various states of an object, without the need to manually create a storyboard for each interaction on that object.

    A good example would be styling a button, the original color is blue, the mouseEnter color is light blue, and the mouseLeftButtonDown (Click) color is dark blue, with the VSM you would only need to set the various "states" of the object, and it will trigger accordingly, transitioning from one state to another seamlessly. Without the VSM you would need to create 4 storyboards (mouseEnter, mouseLeave, mousLeftButtonDown, mousLeftButtonUp), and manually write the code to trigger the storyboards based on the events, time consuming and troublesome.

    You can check out Tim Heuer post on VSM and extensive explanations on how to use it here.

    If this answered your question, please mark it to help others facing similar issues.

    -
    • Proposed as answer by Kok Chiann Thursday, November 27, 2008 6:08 AM
    • Marked as answer by Lori DirksModerator Thursday, January 15, 2009 2:19 AM
    Thursday, November 27, 2008 6:08 AM
  • Thank you for your help on this. Greatly appreciate it.
    I guess what I am still not very clear on is, what type of objects should I use? For example, what should I use for the control strip? Should I have multiple Images and TextBoxes they show up and hide as part of the triggers, or something better?

    Anything you can do to help is greatly appriciated.
    Sam
    Monday, December 1, 2008 12:52 PM