I have a set of buttons in a grid on a Map/MapControl. I've been trying to figure out how to make it so that the buttons and the grid are usually invisible, but appear as soon as the user hovers their pointer over them. Suggestions?
http://msmvps.com/blogs/theproblemsolver/archive/2009/02/17/changing-the-mouseover-effect-on-a-silverlight-listbox.aspx
Here is an article that goes through a tutorial (using blend) to setup various Visual States. About 3/4 down the page there is a sample xaml snippet. Look for this section:
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.2"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
Instead of changing the scale, you could change the Opacity... There's no reason this can't be written in Visul Studio, for the Blend-Challenged (like myself).
Also, refer to http://jesseliberty.com/2010/07/09/visual-state-manager-a-z/ for a set of tutorials for using the huge capabilities of the Visial State Manager.
Related
I am trying to play a bit with the badged control from Mahapps. Is it possible to change the size of the badge (not just the color/value/etc..)
Finally I am trying to do some sort of bigger pulse effect when the badge value changed, I tried the following for the color but it didn't work:
<Controls:Badged.Triggers>
<EventTrigger RoutedEvent="Controls:Badged.BadgeChanged">
<EventTrigger.EnterActions>
<BeginStoryboard Name="AnimateVisibilityChanged">
<Storyboard>
<ColorAnimation Duration="0:0:0.5"
From="#FFEE4709"
To="Green"
BeginTime="0:0:0"
Storyboard.TargetProperty="(Controls:Badged.BadgeBackground).(SolidColorBrush.Color)">
</ColorAnimation>
<ColorAnimation Duration="0:0:0.5"
From="Green"
To="Transparent"
AutoReverse="True"
BeginTime="0:0:2"
RepeatBehavior="0:0:2.5"
Storyboard.TargetProperty="(Controls:Badged.BadgeBackground).(SolidColorBrush.Color)">
</ColorAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger.EnterActions>
<EventTrigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="AnimateVisibilityChanged" />
</EventTrigger.ExitActions>
</EventTrigger>
</Controls:Badged.Triggers>
The next step if this would work is to also increase the size more than it's already increasing
It looks like I will answer to my question:
the animation didn't work because I used EnterActions instead of simply Actions (EventTrigger.Actions)
To change the size of the badge when the value changes I had to use BadgeChangedStoryboard property and replace with my own:
<SineEase x:Key="BadgeEase"
EasingMode="EaseOut" />
<Storyboard x:Key="BadgeChangedStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="0"
Value="2.3" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource BadgeEase}"
KeyTime="0:0:0.3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="0"
Value="2.3" />
<EasingDoubleKeyFrame EasingFunction="{StaticResource BadgeEase}"
KeyTime="0:0:0.3"
Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
To change the size change both the easing double key frame Value
Is this just me or what? RepeatBehavior doesn't seem work for animations in Expression Blend 4. I have the following animation:
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)"
Storyboard.TargetName="WaitDoc" RepeatBehavior="0:0:2">
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
I expect this animation to run for 2 seconds, but instead it runs only once when I click Play button in Objects and Timeline pane. I have tried values like 5x too, getting the same behavior.
I don't want to run the entire project to test every minute change. The Play button SHOULD play it as defined. Am I missing something here?
EDIT: In addition, I just discovered that Blend also doesn't show any respect for BeginTime attribute.
Try this :
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children) [2].(RotateTransform.Angle)"
Storyboard.TargetName="WaitDoc" Duration="0:0:2" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0:0:1.0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.1" Value="180"/>
<EasingDoubleKeyFrame KeyTime="0:0:1.2" Value="360"/>
</DoubleAnimationUsingKeyFrames>
When button1 is clicked I want this sequence
RectangeA becomes visible
RectangeA opacity changed from 0 to 75% over lets say 3 seconds
ControlB becomes visible.
Steps 1 and 3 are easy with imperative code, but I'm assuming I need to learn how to use story boards to do step 2.
Here is the storyboard that describes your sequence:
<Storyboard x:Key="animate">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.Opacity)">
<LinearDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
<LinearDoubleKeyFrame KeyTime="00:00:03" Value="0.75"/>
</DoubleAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="button1" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visibility.Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="control" Storyboard.TargetProperty="(UIElement.Visibility)">
<DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visibility.Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
You can trigger it in xaml through EventTrigger or in code through TryFindResource().
Here is the link on Animation Overview MSDN Article and you can find there answers on your questions on many WPF animations topics.
I have a problem with my Silverlight animation that I can't seem to fix. The problem seems to be well established, but the techniques used to solve it don't seem to work in my case.
Here is the storyboard code that I am using to animate a grid called "underGrid". underGrid is a base grid which I am applying a scale and location offset to in response to mouse input from the user, so that they can scale and move the grid in real time. The ResetGrid storyboard below simply animates from the current scale and location values back to scale {1, 1} and location {0, 0}, resetting the view for the user. I wanted to be able to apply this animation whenever the user clicks a reset button but it freezes the Scale and Translation transforms once it has run once (as discussed here: http://msdn.microsoft.com/en-us/library/aa970493.aspx). Which means that when the user then uses the mouse to move the grid, it doesn't move. I've tried everything I can think of to stop the animation from having an affect on the dependency properties. I've tried hooking the Completed event and trying (amongst other things), stopping the animation, seeking the animation to 0, looping through the ResetGrid Children and using StoryBoard.SetTarget(). I've also tried setting the FillBehavior.. No matter what I do nothing seems to make a difference, the Scale and Translation are always tapped and cannot be set again in user-code.
Can anyone suggest anything I can try that I've not listed above (drastic or otherwise :) )? All I want is the animation to have completely stopped and detached itself on Complete.
Storyboard XAML:
<Storyboard x:Name="ResetGrid">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="underGrid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
<EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1">
<EasingDoubleKeyFrame.EasingFunction>
<CubicEase EasingMode="EaseInOut"/>
</EasingDoubleKeyFrame.EasingFunction>
</EasingDoubleKeyFrame>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
will ResetGrid.stop() work?
I used it in my applications and the animation was cut off straight away.
animation.stop will stop and reset, while animation.pause will just stop on where timeline it hit
if not u can put another animation of duration 0,
call this animation to place back the property
I've run into this issue before too... check out this thread on Silverlight.Net which I think you might find helpful:
http://forums.silverlight.net/forums/t/68888.aspx
I've got a rather complicated custom control that would boggle your mind if I showed you all of the code. ;) In general it's a panel displaying multiple controls. You can think of it as a custom list box. (Please don't tell me to use a listbox, I've been there and it doesn't meet my needs completely).
So, I set some animations in a VisualStateManager. Here's what happens:
When I hover over one of my child controls, I expect the MouseOver state to fire. It does.
When I select one of my child controls I expect the Selected state to fire and it does.
When I select a different child control, the Selected state fires as well
When I go back to my first child control I selected, and select it, the Selected state is shown to fire (by debug statements in my code) but the MouseOver animation is displayed.
Is there some issue with animations able to be overridden somehow or a problem between the MouseOver and Selected states I'm not aware of?
Here's my VSM markup:
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.150000" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="DarkGray"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.150000" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Yellow"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectedStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Purple"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="1" Storyboard.TargetName="Backdrop" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="0" Value="Green"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
And here's my GoToState() logic:
private void GoToState(bool useTransitions)
{
TestingVariables("Inside GoToState");
if (_isSelected)
{
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing Selected VSM");
VisualStateManager.GoToState(this, "Selected", useTransitions);
}
else if (_wasSelected)
{
_wasSelected = false;
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing Unselected");
VisualStateManager.GoToState(this, "Unselected", useTransitions);
}
else if (_isMouseOver)
{
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing MouseOver VSM");
VisualStateManager.GoToState(this, "MouseOver", useTransitions);
}
else
{
System.Diagnostics.Debug.WriteLine(_thumbnail.ShortFileName + " firing Normal VSM");
VisualStateManager.GoToState(this, "Normal", useTransitions);
}
}
So, I can see which VisualStateManger.GoToState() method is fired and the call to TestingVariables() is just a method I use to write out the conditional flags I'm using to determine which visual state to fire.
Thanks in advance.
See answer to this question: Custom styled listbox - how can I keep the style for a selected item?