locked
Need help on designing a mouse over.....thing RRS feed

  • Question

  • Greetings. I'm pretty new to Blend and struggling a bit. Not as intuitive as I had hoped since I have no code background. So here is what I'm trying to do, with no luck I might add.

    I am creating a map, which I've done and imported from Photoshop. Now, I need a way to have items pop up, like list boxes for example, when I mouse over a country. Then I need them to disappear once the mouse exits the country. Like pop ups I suppose. But in those pop up, I need links to show up that I can click that either take me to documents or websites. Is any of this possible? I've searched literally this whole week and haven't found much out there.

    Again, new to Blend, so whoever can step up to the plate on this one...explain it to me like I'm five.

    Thursday, January 31, 2013 7:17 AM

All replies

  • Hello New.

    What sort of project is this?  WPF?  Silverlight?  Phone?  Is it a Sketchflow project or regular project?

    Did you build the project with C# or VB set as the language?  What version of Blend are you using?

    ~Christine

    Edit... You may want to walk through the school tutorials.  They are a bit older, but the basics still apply.  And you'd be amazed at all the "tricks" you pick up with regards to using Blend. 

    http://www.microsoft.com/design/toolbox/school/default.aspx?lc=1033

    Thursday, January 31, 2013 3:18 PM
  • I would first make your map the background of something, like a Grid, or Canvas.

    <Grid>   

    <Grid.Background>          

    <Image/>   

    </Grid.Background>

    </Grid>

    Then using either the Pen or Pencil tool in Blend (You'll find it on your toolbar on the left side by default) to draw a Path around each country to give you something to attach a Click a event to.

    Once you've done that, and you have a Path shape around each country, you'll need to create your little pop-up box. You can usually make this simple like a Border control with your stuff in it. Then give it a name like "YourPopUpObject" and set its visibility to Collapsed.

    Next you'll need to attach a way for each of your country paths to accept a MouseEvent, one easy way you can do that is with Interaction Triggers like

    (namespaces required)

    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"

    <Path>                  

    <i:Interaction.Triggers>                       

    <i:EventTrigger EventName="MouseEnter">                           

    <ei:ChangePropertyAction TargetName="YourPopUpObject" PropertyName="Visibility" Value="Visible" />                       

    </i:EventTrigger>                       

    <i:EventTrigger EventName="MouseLeave">                           

    <ei:ChangePropertyAction TargetName="YourPopUpObject" PropertyName="Visibility" Value="Collapsed" />                       

    </i:EventTrigger>                   

    </i:Interaction.Triggers>

    </Path>


    Now you have Countries that when you Mouse over them your Pop Up will appear, which you change the Event to something like Click or MouseLeftButtonDown. You could also get fancier and change things like the Stroke and Fill Colors to change your Countries visually to show they've received MouseOver etc. Then repeat the steps for each country and voila, you have a beginners Image map equivalent. Realistically you would want to refine this in different ways to avoid xaml clutter later but it should be enough to get you started, best of luck!





    Please mark answers as helpful when used, and answered when completed.


    Thursday, January 31, 2013 4:43 PM
  • Thank you for the replies. I'll take a look at this and let you know how it goes!
    Friday, February 1, 2013 3:40 PM
  • ok...pride swallowing sequence initiated

    My background is in 3D modeling and animation. I'm also reasonably good with the Adobe line of products. However, code baffles me. That was the draw of Blend. I thought that the GUI was designed for monkeys like me. Is there a way I can tie the interaction triggers in via the GUI? I've tried almost everything I can. After I put the elements in and use the pen tool I'm afraid I get lost.

    In the assets box I have the behaviors options. Do I use those in some way? The only thing I've been able to do is turn my mouse pointer into a hand via the events box....pretty impressive huh.

    Again, thank you for the help and I appreciate any more advice to help me get past this last hurdle.

    Monday, February 4, 2013 7:54 AM
  • Update on this. I've watched the tutorials and am trying to tie everything together. Here is my big issue:

    I am starting from a basic level. I have created a grid and an elipse. I have the elipse placed inside the grid within the user controls. I have also set two states for the elipse "Hidden" and "Visable". I have the default transition set up so that the elipse goes from 0% opacity and 25% scale to 100% opacity and 100% scale. I have then tied two GoToStateActions to the elipse. Here is where the problems start...

    When I click on the GoToStateAction the trigger events are available in the right hand column. I use the grid as my source object and mouse enter from the drop down menu. In "common properties" I select my target object (blue elipse). But in the "StateName" drop down the list is empty. Why aren't the states that I set up being displayed?

    Monday, February 4, 2013 11:10 AM
  • Where are your states defined?  When you look at the xaml?

     

    Here is a simple WPF sample based on what you described...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
    	xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    	x:Class="WpfApplication2.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot">
    		<VisualStateManager.VisualStateGroups>
    			<VisualStateGroup x:Name="VisualStateGroup">
    				<VisualStateGroup.Transitions>
    					<VisualTransition GeneratedDuration="0:0:3"/>
    				</VisualStateGroup.Transitions>
    				<VisualState x:Name="State1">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="myEllipse">
    							<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="myEllipse">
    							<EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="myEllipse">
    							<EasingDoubleKeyFrame KeyTime="0" Value="0.25"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    				<VisualState x:Name="State2">
    					<Storyboard>
    						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="myEllipse">
    							<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="myEllipse">
    							<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    						<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="myEllipse">
    							<EasingDoubleKeyFrame KeyTime="0" Value="1"/>
    						</DoubleAnimationUsingKeyFrames>
    					</Storyboard>
    				</VisualState>
    			</VisualStateGroup>
    		</VisualStateManager.VisualStateGroups>
    		<Grid x:Name="myGrid" Background="Transparent" HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100" Margin="8,8,0,0" Cursor="Hand">
    			<i:Interaction.Triggers>
    				<i:EventTrigger EventName="MouseEnter">
    					<ei:GoToStateAction StateName="State2"/>
    				</i:EventTrigger>
    				<i:EventTrigger EventName="MouseLeave">
    					<ei:GoToStateAction StateName="State1"/>
    				</i:EventTrigger>
    			</i:Interaction.Triggers>
    			<Rectangle Fill="White" Stroke="Black" RadiusX="5" RadiusY="5"/>
    			<Ellipse x:Name="myEllipse" Fill="Blue" Stroke="Black" RenderTransformOrigin="0.5,0.5" Opacity="0">
    				<Ellipse.RenderTransform>
    					<TransformGroup>
    						<ScaleTransform ScaleX="0.25" ScaleY="0.25"/>
    						<SkewTransform/>
    						<RotateTransform/>
    						<TranslateTransform/>
    					</TransformGroup>
    				</Ellipse.RenderTransform>
    			</Ellipse>
    		</Grid>
    	</Grid>
    </Window>

    And the behavior setup...

    ~Christine

    PS.. If your grid does not have a background defined in the xaml, you will probably need to manually add Background="Transparent".  Unless it has a background, even a transparent one, the MouseEnter and MouseLeave events will probably not trigger.

    Also, if you click the small box to the right of TargetObject you can select "Reset" to clear any binding you have done.




    Monday, February 4, 2013 4:28 PM
  • ok....

    So I think I'm making progress. I have all the animation down since that's the easy part for me. But the states were really giving me trouble. What I finally did was to make all of the states I wanted, then use a gotostate behavior on the root. When I did that the state name drop down populated with all of the states. Then I used the same behaviors on the other peices. It's not even close to done, but I think it's the right direction.

    Thank you so much for the help!!! If you guys are ever in Stuttgart I owe you a coffee/beer/meth?....well, whatever you're into. :)

    Tuesday, February 5, 2013 12:22 PM