I am trying to animate a button triggered by an event (not on that button) with VisualStateManager. This is my code but it doesn't work. Please help find the issue or suggest a different method to animate the button.
In the xaml file I have the following
<Grid Grid.Row="1" Grid.Column="1" DataContext="{Binding ScanningViewModel}">
<Button Height="Auto" Margin="10" x:Name="ScanButton"
HorizontalAlignment="Stretch"
Style="{DynamicResource MaterialDesignOutlinedButton}"
Command="{Binding ScanDocumentCommand}">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="SearchAdd" Width="30" Height="30"/>
<TextBlock Margin="5,0,0,0" Text="Scanează" VerticalAlignment="Center"/>
</StackPanel>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState Name="Default">
<Storyboard/>
</VisualState>
<VisualState x:Name="MyAnimation">
<Storyboard>
<ColorAnimation
To="Pink"
Storyboard.TargetName="Stop1" Storyboard.TargetProperty="Color"
Duration="0:0:2" />
<ColorAnimation
To="Maroon"
Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color"
Duration="0:0:2" />
<ColorAnimation
To="Red"
Storyboard.TargetName="Stop1" Storyboard.TargetProperty="Color"
BeginTime="0:0:2" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
<ColorAnimation
To="Blue"
Storyboard.TargetName="Stop2" Storyboard.TargetProperty="Color"
BeginTime="0:0:2" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Button>
</Grid>
In ScanningViewModel.cs:
class ScanningViewModel : BindableBase
{
public FrameworkElement ScanButton { get; private set; }
public ScanningViewModel()
{
ScanButton = new FrameworkElement();
}
private void SomeOtherCommand_Execute()
{
VisualStateManager.GoToElementState(this.ScanButton, "MyAnimation", false);
}
}
The goal is to add animation to a button triggered by an independent event (basically to guide the user through the app with visual clues).
Related
This piece of code animates the movement of an ellipse if click on this. How can I return (in an animated way - as the storyboard does) the ellipse in the initial position by clicking again on its new position. Is that possible? (preferably only in XAML)
<Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
An alternative is to use visual states and simply switch between them in code-behind. That might be more clearer approach compared to holding animations as resources.
xaml:
<Ellipse x:Name="circle_button"
HorizontalAlignment="Left"
Height="100"
Margin="30,40,0,0"
VerticalAlignment="Top"
Width="100"
Fill="#FF33D3A7"
MouseDown="circle_button_MouseDown">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="A">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
<SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="B">
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin">
<SplineThicknessKeyFrame KeyTime="0:0:0.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Ellipse>
cs:
bool _isStateB;
void circle_button_MouseDown(object sender, MouseButtonEventArgs e)
{
_isStateB = !_isStateB;
VisualStateManager.GoToElementState(circle_button, _isStateB ? "B" : "A", true);
}
Demo:
Instead of Ellipse a Button can be used (with style containing such ellipse), then you'll have Click event and ability to focus and click element with keyboard.
P.S.: after writing the answer I suddenly have a though.. ToggleButton has 2 states, you can in fact use IsChecked to toggle between 2 positions (and run different animations)... until you add third, then solution with visual states is preferable.
I think that one of possible ways is to define to storyboard and use some code behind to trigger animations.
Here is an example:
Xaml:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Storyboard x:Key="ElipseStoryboard">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="ElipseStoryboardReversed">
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Grid x:Name="CP">
<Ellipse x:Name="circle_button" MouseDown="Circle_button_OnMouseDown" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
</Ellipse>
</Grid>
</Window>
Code behind:
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private bool flag = false;
private void Circle_button_OnMouseDown(object sender, MouseButtonEventArgs e)
{
if (flag)
{
var storyboard = this.Resources["ElipseStoryboard"] as Storyboard;
if (storyboard != null)
storyboard.Begin(circle_button);
}
else
{
var storyboard = this.Resources["ElipseStoryboardReversed"] as Storyboard;
if (storyboard != null)
storyboard.Begin(circle_button);
}
flag = !flag;
}
}
}
Please try it.
Alternative only Xaml solution :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication1"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid x:Name="CP">
<Ellipse x:Name="circle_button" HorizontalAlignment="Left" Height="100" Margin="30,40,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="30,40,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="95,120,0,0" />
</ThicknessAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
From="1.0" To="0.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
From="0.0" To="1.0" Duration="0:0:0" BeginTime="00:00:00.4"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
<Ellipse x:Name="circle_button2" Opacity="0" HorizontalAlignment="Left" Height="100" Margin="95,120,0,0" VerticalAlignment="Top" Width="100" Fill="#FF33D3A7" >
<Ellipse.Triggers>
<EventTrigger RoutedEvent="Ellipse.MouseDown" >
<BeginStoryboard>
<Storyboard>
<ThicknessAnimationUsingKeyFrames Storyboard.TargetProperty="Margin" BeginTime="00:00:00" Storyboard.TargetName="circle_button">
<SplineThicknessKeyFrame KeyTime="00:00:00" Value="95,120,0,0" />
<SplineThicknessKeyFrame KeyTime="00:00:00.4" Value="30,40,0,0" />
</ThicknessAnimationUsingKeyFrames>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button2"
From="1.0" To="0.0" Duration="0:0:0" ></DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="circle_button"
From="0.0" To="1.0" Duration="0:0:0"></DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Ellipse.Triggers>
</Ellipse>
</Grid>
</Window>
I'm having a problem with this code:
<Grid Canvas.ZIndex="1999" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="filter1" Margin="0,0,0,0" Background="#D8181818" Height="640" Width="400">
<Grid.Resources>
<Storyboard x:Name="FadeStoryboardbefore">
<DoubleAnimation From="0" To="1" Storyboard.TargetName="filter1"
Storyboard.TargetProperty="Opacity" Duration="0:0:0.4"
>
</DoubleAnimation>
</Storyboard>
<Storyboard x:Name="FadeStoryboardafter">
<DoubleAnimation From="1" To="0" Storyboard.TargetName="filter1"
Storyboard.TargetProperty="Opacity" Duration="0:0:0.4"
>
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<ScrollViewer Canvas.ZIndex="2000" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="scroll_filter" Height="641" Width="400">
<Grid Height="Auto" Canvas.ZIndex="2001" VerticalAlignment="Top" HorizontalAlignment="Left" x:Name="bottoni_filtro" >
</Grid>
</ScrollViewer>
</Grid>
The problem is that when I add elements with filter1.childrens.add in c#, it works. With the second grid, bottoni_filtro.childrends.add doesn't work. When I start the app, it doesn't show elements on bottoni_filtro..
How can I fix that??
P.S. properties like width are set through code (c#)
I am making a grid application, and in ItemsDetaiPage.xaml
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App6.ItemDetailPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App6"
xmlns:data="using:App6.Data"
xmlns:common="using:App6.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<!-- Collection of items displayed by this page -->
<CollectionViewSource
x:Name="itemsViewSource"
Source="{Binding Items}"
d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid
Style="{StaticResource LayoutRootStyle}"
DataContext="{Binding Group}"
d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}">
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}"/>
<TextBlock x:Name="pageTitle" Text="{Binding Title}" Style="{StaticResource PageHeaderTextStyle}" Grid.Column="1"/>
</Grid>
<!--
The remainder of the page is one large FlipView that displays details for
one item at a time, allowing the user to flip through all items in the chosen
group
-->
<FlipView
x:Name="flipView"
AutomationProperties.AutomationId="ItemsFlipView"
AutomationProperties.Name="Item Details"
TabIndex="1"
Grid.Row="1"
Margin="0,-3,0,0"
ItemsSource="{Binding Source={StaticResource itemsViewSource}}">
<FlipView.ItemTemplate>
<DataTemplate>
<!--
UserControl chosen as the templated item because it supports visual state management
Loaded/unloaded events explicitly subscribe to view state updates from the page
-->
<UserControl Loaded="StartLayoutUpdates" Unloaded="StopLayoutUpdates">
<ScrollViewer x:Name="scrollViewer" Style="{StaticResource HorizontalScrollViewerStyle}" Grid.Row="1">
<!-- Content is allowed to flow across as many columns as needed -->
<Grid Margin="120,0,20,20">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="800"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="400"></ColumnDefinition>
<ColumnDefinition Width="40"></ColumnDefinition>
<ColumnDefinition Width="200"></ColumnDefinition>
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0">
<TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Title}" TextWrapping="Wrap"/>
<TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Date}" TextWrapping="Wrap"/>
<WebView x:Name="webView" Width="800" Height="500"/>
<StackPanel x:Name="spButton" Orientation="Horizontal">
</StackPanel>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="2">
<TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Description}" TextWrapping="Wrap"/>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="4">
<TextBlock FontSize="26.667" FontWeight="Light" Text="{Binding Tag}" TextWrapping="Wrap"/>
</StackPanel>
</Grid>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state inside the FlipView -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- Respect the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="97,0,87,57"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="400"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- When snapped, the content is reformatted and scrolls vertically -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextColumns" Storyboard.TargetProperty="Margin">
<DiscreteObjectKeyFrame KeyTime="0" Value="17,0,17,57"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource VerticalScrollViewerStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="richTextBlock" Storyboard.TargetProperty="Width">
<DiscreteObjectKeyFrame KeyTime="0" Value="280"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="image" Storyboard.TargetProperty="MaxHeight">
<DiscreteObjectKeyFrame KeyTime="0" Value="160"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ScrollViewer>
</UserControl>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
<VisualStateManager.VisualStateGroups>
<!-- Visual states reflect the application's view state -->
<VisualStateGroup x:Name="ApplicationViewStates">
<VisualState x:Name="FullScreenLandscape"/>
<VisualState x:Name="Filled"/>
<!-- The back button respects the narrower 100-pixel margin convention for portrait -->
<VisualState x:Name="FullScreenPortrait">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<!-- The back button and title have different styles when snapped -->
<VisualState x:Name="Snapped">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
My apps synthesis clips, each items is a game, each games have views, in StackPanel spButton I want to add buttons as a link to play videos. How can add dynamic buttons in file .cs
This is typical case of invoking controls method through View Model.
To accomplish this, You need to following steps
1. Define an interface INavigatable that expose Navigate event
2. Implement the interface in ViewModel.
3. In the View Code behind, check if DataContext implements INavigatable interface.
4. If step 3 is true, Subscribe to View Model event in view code behind.
Example.
Step 1:
class NavigateEventArgs:EventArgs
{
public string Target {get;set;}
}
public delegate void NavigateEventHandler (object sender, NavigateEventArgs nargs);
public interface INavigatable
{
event NavigateEventHandler Navigate;
}
Step 2:
class MyViewModel : INavigatable
{
public event NavigateEventHandler Navigate;
MyViewModel()
{
NavigateCommand = new DelegateCommand(() =>
{
RaiseNavigateEvent();
}) ;
}
void RaiseNavigateEvent()
{
var temp = Navigate;
if (temp != null)
{
temp(new NavigateEventArgs{Target = Link});
}
}
public string Link {get;set;} // this should be bound to Button.Content (preferably in XAML)
public ICommand NavigateCommand{ get;set;}
}
Step 3/4:
public class MyView : Window
{
public MyView()
{
...
Load += (s,e)=>
{
if (this.DataContext is INavigatable)
{
((INavigatable)(this.DataContext)).Navigate += (s1,e1) => webView.Navigate(e1.Target);
}
}
}
}
As an improvement, subscribe/unsubscribe the Navigate event in DataContextChanged event instead of Load event
I have an ItemsControl with an ItemTemplate that is bound to a data item. The ItemTemplate is quite complicated and I have added some visual state to it so that I can change it's appearance.
I want to be able to switch all the items VisualState to another state of my choice, on an event that occurs outside the ItemsControl.
How can I go about doing this? I've tried using the VisualStateManager.SetState, but this relies on a control, rather than a template, which seems to be all I can get via WaveItems.ItemContainerGenerator.ContainerFromIndex(i).
Regards
Tristan
Edit:
Here is my data template for the individual items. If you note the triggers I have set up, it handles the MouseEnter / MouseLeave of the template itself. I'd like to wire these up to the ItemsControl MouseEnter / MouseLeave, without writing any code. Is there a way to do this?
<DataTemplate x:Key="LineTemplate">
<Grid x:Name="LineGrid" HorizontalAlignment="Left" Height="500" VerticalAlignment="Center" Width="3">
<VisualStateManager.CustomVisualStateManager>
<ei:ExtendedVisualStateManager/>
</VisualStateManager.CustomVisualStateManager>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="VisualStateGroup">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0:0:1" By="-100" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineTop"/>
<DoubleAnimation Duration="0:0:1" By="100" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineBottom"/>
<DoubleAnimation Duration="0:0:1" To="0.5" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:1" To="0.25" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:1" To="{Binding BottomValue}" Storyboard.TargetProperty="(Line.Y2)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:1" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineTop" d:IsOptimized="True"/>
<DoubleAnimation Duration="0:0:1" To="0.495" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="lineBottom" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="ExpandedHighlight"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter" >
<ei:GoToStateAction x:Name="Expand" StateName="Expanded"/>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<ei:GoToStateAction x:Name="Collapse" StateName="Normal"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Line Grid.Row="0" x:Name="lineTop" VerticalAlignment="Bottom" StrokeThickness="3" Stroke="{Binding Brush}" Y1="{Binding TopValue}" Y2="0" RenderTransformOrigin="0.5,0.5">
<Line.RenderTransform>
<CompositeTransform ScaleY="1"/>
</Line.RenderTransform>
</Line>
<Line Grid.Row="1" x:Name="lineBottom" VerticalAlignment="Top" StrokeThickness="3" Stroke="{Binding Brush}" Y1="0" Y2="{Binding BottomValue}" RenderTransformOrigin="0.5,0.5" Opacity="0.5">
<Line.RenderTransform>
<CompositeTransform ScaleY="1"/>
</Line.RenderTransform>
</Line>
</Grid>
</DataTemplate>
I have also tried using the following binding:
SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}}"
But this displays a message: "Type is not supported in a silverlight project".
In Thomas Danemar's Blog there's an example of class to hold and switch VisualState. It's implemented by binding VisualState to attached property inside your ViewModel and them just set it to desire value. You can even bind it TwoWay mode.
Fixed:
<i:Interaction.Triggers>
<i:EventTrigger
SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}"
EventName="MouseEnter">
<ei:GoToStateAction x:Name="Expand" StateName="Expanded"/>
</i:EventTrigger>
<i:EventTrigger
SourceObject="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ItemsControl}}"
EventName="MouseLeave">
<ei:GoToStateAction x:Name="Collapse" StateName="Normal"/>
</i:EventTrigger>
</i:Interaction.Triggers>
I'm trying to get states to change with the visual state manager through code.
I am using:
Microsoft.Expression.Interactivity.Core.ExtendedVisualStateManager.GoToElementState(this.LayoutRoot, "stateRegistration", true);
But it doesn't seem to want to work, I have create an event handler and also a listener but it there's no state changed when using that code.
Can anyone help me out.
XAML CODE (Code Snippet):
<Grid x:Name="LayoutRoot" Width="897" Height="699">
<VisualStateManager.VisualStateGroups>
<VisualState x:Name="stateRegistration">
<Storyboard>
<DoubleAnimation Duration="0" To="870" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="RegisterContent" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="880" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="HomeContent" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-10" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
Thanks.
There is strange behavior with the VisualStateManager: its states must be situated not in the control, but in the child control.
It means, that the GoToState method should be called with the this parameter instead of the this.LayoutRoot parameter, but definitions of state groups must be situated inside the Grid:
VisualStateManager.GoToState(this, "stateRegistration", true);
I don't know where to get the ExtendedVisualStateManager class so I use the default one.
Also if any animation of the state storyboard fails - all animations are cancelled. So try this code sample with two animations, it must work:
<Grid x:Name="LayoutRoot" Width="897" Height="699">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup>
<VisualState x:Name="stateRegistration">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
<DoubleAnimation Duration="0" To="-10" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)" Storyboard.TargetName="btnRegRegister" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Button x:Name="btnRegRegister" Content="Some button" Click="btnRegRegister_Click" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.RenderTransform>
<CompositeTransform TranslateX="0" TranslateY="0" />
</Button.RenderTransform>
</Button>
</Grid>