Preferably without using backend code? I'm looking for the cleanest solution for doing a fade in fade out hover button using 2 images. Here is what I have so far
Edit:
I got this to partially work.. problem is now that the mouseout seems abrupt whereas the mouseover seems fine, what am I doing wrong?
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:1" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="mouseOverImage" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOut">
<Storyboard>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:1" To="0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="mouseOverImage" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused"/>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
Found out there is no default visual state called mouseout. the normal state will work as the mouseout or mouseleave.
<Storyboard>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.5" From="0" To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="mouseOverImage" />
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation BeginTime="0:0:0" Duration="0:0:0.5" From="1" To="0"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="mouseOverImage" />
</Storyboard>
Related
So I have a Path object that is implemented as follows:
<Path x:Name="arrow" Data="M0,0L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75z" Fill="Black" Height="4" RenderTransformOrigin="0.5,0.5" Stretch="None" Width="8">
<Path.RenderTransform>
<TransformGroup>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
With this Path I have the following animation attached that works perfectly.
WORKING:
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
However when I add the color animations neither of the animations work. Also, the expand seems to happen instantaneously rather than expanding smoothly. The Collapse works fine though.
NOT WORKING:
<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<ColorAnimation To="Red" Duration="0:0:0.2" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="arrow" />
<DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<ColorAnimation To="Black" Duration="0:0:0.2" Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" Storyboard.TargetName="arrow" />
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
It has to do with the coloranimation because when I try to perform the color animation by itself it doesn't work.
This is a part of the Telerik RadExpander user control.
If any other information is needed please don't hesitate to ask.
NOTE 1:
If I set the Fill color in the path declaration to black and set the collapsed fill color to green the arrow will start out as green, but as soon as I expand it turns black and never changes color again.
Note 2: When the coloranimation is set the doubleanimation never works.
Why can't I set Panel.ZIndex within a VisualStateManager?
I am building a carousel user interface and am struggling to find out why I am unable to set a value for Panel.ZIndex.
This XAML is embedded within a VisualState element:
<Storyboard>
<VisualState>
<ObjectAnimationUsingKeyFrames
Storyboard.TargetName="MidRightRectangle"
Storyboard.TargetProperty="Rectangle.(Panel.ZIndex)">
<DiscreteObjectKeyFrame KeyTime="0" Value="4" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
The TargetProperty is not set correctly.
Try this instead.
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualState x:Name="ZIndexChanged">
<Storyboard>
<Int32AnimationUsingKeyFrames Storyboard.TargetProperty="(Panel.ZIndex)" Storyboard.TargetName="MidRightRectangle">
<EasingInt32KeyFrame KeyTime="0" Value="4"/>
</Int32AnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
I also learned from the previous answer that I can resolve the animation like this:
<Int32Animation Storyboard.TargetName="MidRightRectangle"
Storyboard.TargetProperty="(Panel.ZIndex)"
To="4"
Duration="0:0:.15">
</Int32Animation>
I'm trying to do my own Slider Style in XAML, but i don't get it quite right. The VisualState x:Name="Pressed" is not being triggered.
...
<ControlTemplate TargetType="Slider">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup Name="CommonStates">
<VisualState Name="Normal" />
<VisualState Name="MouseOver">
...
</VisualState>
<VisualState Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="RepeatButtonValueBrush" Storyboard.TargetProperty="Color" To="{StaticResource PressedValueColor}" Duration="0"/>
<ColorAnimation Storyboard.TargetName="RepeatButtonRestBrush" Storyboard.TargetProperty="Color" To="{StaticResource PressedTrackColor}" Duration="0"/>
</Storyboard>
</VisualState>
<VisualState Name="Disabled">
...
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
...
</Grid>
</ControlTemplate>
...
What am I doing wrong?
Thanks
You need to call the VisualStateManager.GoToState method to change visual states. See this VisualStateManager and Triggers article.
I have my visual states defined in UserControl.Resources. This is the sample :-
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AlbumDetailsStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3">
<VisualTransition.GeneratedEasingFunction>
<CircleEase EasingMode="EaseIn"/>
</VisualTransition.GeneratedEasingFunction>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="HideState"/>
<VisualState x:Name="ShowState">
<Storyboard>
<DoubleAnimation Duration="0" To="250" Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="border" d:IsOptimized="True"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextBlock.TextWrapping)" Storyboard.TargetName="textBlock">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<TextWrapping>NoWrap</TextWrapping>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
Now i want to change the states from within my itemtemplate of listbox. I am using GoToStateAction behavior of Blend. However it is not able to find my states. But if i try to change states from outside itemtemplate it is available. It is so annoying. How do i workaround this issue?
Thanks in advance :)
Have you tried defining the visual states as part of your root layout container instead of in the resources section?
I am trying to create a Silverlight Toggle button style that would flip between a plus and a minus sign. Unfortunately it is always showing a minus sign. Can anyone tell me what's the problem with this style:
<Style x:Key="PlusMinusToggleButtonStyle" TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CheckStates">
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="1" />
<DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
<DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="1" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid>
<Image x:Name="UncheckedVisual" Source="plus.png" Stretch="None" />
<Image x:Name="CheckedVisual" Source="minus.png" Stretch="None" />
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to expand on the DoubleAnimation, put in KeyFrame Animation in it. Also set the base opacity to 0 and then fade in the respective one you need. For example:
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:1" Value="1"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
Everytime a state is changed, it goes back to the base state then to the state that was called. Because a togglebutton is always in an on or off state, it will not be in an invisible state.