I'm developing universal app. On one page i decided to use FlipView. I can easily animate SelectionChanged event from code-behind, but i'm just curious if there is a way to animate this event using XAML only. (BTW, UseTouchAnimationsForAllNavigation="True" doesnt work).
So, here's simplified example of what i'm doing :
<FlipView x:Name="MultipleItems">
<FlipView.Triggers>
<EventTrigger RoutedEvent="Selector.SelectionChanged">
<BeginStoryboard>
<Storyboard x:Name="ColorStoryboard">
//do stuff
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<FlipView.Triggers>
</FlipView>
I think this way of usage EventTrigger is fine (as far as SelectionChanged event takes arguments inherited from RoutedEventArgs), but it still gives me runtime error on navigation to page that contains FlipView.
Error is next :
WinRT information: Failed to assign to property 'Windows.UI.Xaml.EventTrigger.RoutedEvent'. [Line: 69 Position: 35]
Additional information: The text associated with this error code could not be found.
I believe there's way to assign that RoutedEvent property correctly, but i didnt find it yet. Also I don't wont to use behaviours for such simple thing.
Can anyone help?
You need to install the Microsoft.Xaml.Behaviors.Uwp.Managed in your project. Then the EventTrigger will be supported in an UWP project.
Then in your XAML use this package like this:
xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media="using:Microsoft.Xaml.Interactions.Media"
Now you can for example change the background color of FlipView like this:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.Resources>
<Storyboard x:Key="std" x:Name="std" >
<ColorAnimation From="Red" To="Transparent" Duration="0:0:3"
Storyboard.TargetProperty="(Background).(SolidColorBrush.Color)"
Storyboard.TargetName="flipView"/>
</Storyboard>
</Grid.Resources>
<FlipView x:Name="flipView" ItemsSource="{x:Bind flipviewCollection}">
<Interactivity:Interaction.Behaviors>
<Core:EventTriggerBehavior EventName="SelectionChanged">
<Media:ControlStoryboardAction Storyboard="{StaticResource std}" />
</Core:EventTriggerBehavior>
</Interactivity:Interaction.Behaviors>
<FlipView.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageSource}" Stretch="None"/>
</DataTemplate>
</FlipView.ItemTemplate>
</FlipView>
</Grid>
As you can see, I used EventTriggerBehavior and the event's name is SelectionChanged.
Related
I'm simulating a car videogame scoreboard that is constantly updated and sorted. Everything works as I expected but then I tryied to add an EventTrigger that makes an animation when the new drivers are inserted to my list and that made strange behaviours.
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<!--...-->
</EventTrigger>
Sometimes when I fire that event in one car, it seems like more cars are suscripted to this event so that is not going as I expected. Obviously I would like every car had his own event. Moreover, that event is also fired when the scoreboard is sorted i.e when a car changes his position.
Now I'm going to explain what I have:
The following list is constantly updated (adds and update elements) and is not sorted by position because Im doing this directly on my view:
public ObservableCollection<Car> ListaObservable { get; set; }
The following code is extracted from the View:
<UserControl>
<UserControl.Resources>
<DataTemplate DataType="models:Car">
<!-- Each grid represents a car that should shine everytime it passes through the finish line -->
<Grid>
<!--...-->
<Grid.Triggers>
<!-- Everytime "Estimacion" is updated, that event is fired as I expected -->
<EventTrigger RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard >
<!-- It doesn't matter what kind of animation is -->
<Duration="{Binding Estimacion, NotifyOnTargetUpdated=True}"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<!-- The event I mentioned before is never fired when I add a new car to my list of Cars so I created that event but sometimes it does strange behaviours -->
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard>
<!-- ... -->
</BeginStoryBoard>
</Eventrigger>
</Grid.Triggers>
</Grid>
</DataTemplate>
<CollectionViewSource x:Key="SortedItems" Source="{Binding ListaObservable}" IsLiveSortingRequested="True">
<CollectionViewSource.SortDescriptions>
<scm:SortDescription PropertyName="Posicion"/>
</CollectionViewSource.SortDescriptions>
</CollectionViewSource>
</UserControl.Resources>
<Grid>
<ListBox Name="ListBox" ItemsSource="{Binding Source={StaticResource SortedItems}}" BorderThickness="0" MinHeight="800" />
</Grid>
</UserControl>
Finally, In my case how can I fire an EventTrigger directly by my ViewModel?
How can I create a new event that can be fired everytime I want it?
I want to create marquee effect in WP8 application.
To accomplish this I placed StackPanel inside ScrollViewer and I'm trying to use DoubleAnimation on TranslateTransform.X property.
Code:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="transform" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Grid x:Name="LayoutRoot">
...
<ScrollViewer Height="80" VerticalScrollBarVisibility="Disabled" HorizontalScrollBarVisibility="Hidden">
<StackPanel Orientation="Horizontal">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
<Image Source="/Assets/logo1.png"></Image>
<Image Source="/Assets/logo2.png"></Image>
<Image Source="/Assets/logo3.png"></Image>
<Image Source="/Assets/logo4.png"></Image>
<Image Source="/Assets/logo5.png"></Image>
</StackPanel>
</ScrollViewer>
</Grid>
Unfortunately when calling Scroll.Begin() from code-behind in page Loaded event handler I'm getting exception: System.InvalidOperationException: Cannot resolve TargetName transform.
What I'am doing wrong?
Animation runs when I place StackPanel directly in LayoutRoot but not when it's child of ScrollViewer.
I think the exception is explanatory. Like you apply storyboard on some UI element but there is no element named "transform" in your xaml to which this storyboard will be going to be applied.
so this property Storyboard.TargetName should be name of the UI element that has to be transformed.
In your case if you have to simply give your StackPanel a name say MyStackPanel and then put this name in place of transform in your storyboard code.
<StackPanel Orientation="Horizontal" Name="MyStackPanel">
<StackPanel.RenderTransform>
<TranslateTransform x:Name="transform" />
</StackPanel.RenderTransform>
...
You storyboard should be changedin this way..
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Scroll" RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation From="0" To="100" Storyboard.TargetName="MyStackPanel" Storyboard.TargetProperty="X" Duration="0:0:5" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
Important :-It would be much better if you just use Blend for making a simple animation and then see how the animation code generated in the page Xaml. You will got all of your answers :)
I'm trying to set an event trigger to one of my controls inside a ContentTemplate, i'm using a storyboard and a DoubleAnimation nested with a DoubleAnimationUsingKeyFrames when i set the storyboard TargetName to "ContentPopup" wich is a Grid i hold below, but i get an error telling me that:
The name 'ContentPopup' is not in the namespace 'System.Windows.Controls.Grid'.
The animation code on the control template is:
<Grid Margin="0" Width="55" Height="40">
<Grid.Triggers>
<EventTrigger RoutedEvent="m:Pushpin.MouseDown">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Duration="00:00:00.5000000" Storyboard.TargetName="ContentPopup" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" To="1">
...
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
...
</Grid>
The code on the grid i need to animate is:
<Grid Name="ContentPopup"
Background="White"
Opacity="0.85"
RenderTransformOrigin="0,0">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0" ScaleY="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
...
</Grid>
MSDN says that the following needs to be done to make an object targetable
and a grid is a FrameworkElement i want the animation to run on every single one of the controls i summon on my main window using this control template, they are a lot of them so i need to use the template.
The question is:
Is there a way to assign the element as a target in the template?
So i found the right way to do it, even though grid is a FrameworkElement you can't access it from the control template, so you need to provide some binding or XAML reference to it in order to work, so with the same exact code just instead of using the Storyboard.TargetName property using the Storyboard.Target with value:
Storyboard.Target="{Binding ElementName=ContentPopup}"
or also:
Storyboard.Target="{x:Reference Name=ContentPopup}"
it worked for me
I am working on a c# wpf project and I have run in to a problem relating to firing an trigger within the XAML.
What I am trying to achieve is when the drags a file into the grid, it should animate the background colour change but for some reason it keeps on throwing an exception as soon as I run the program. I am getting the following error:
'Provide value on
'System.Windows.Baml2006.TypeConverterMarkupExtension' threw an
exception.' Line number '9' and line position '14'.
Below is the XAML code
<UserControl x:Class="ReportReader.UserControls.ReportDragDropControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<Grid AllowDrop="True" DragDrop.DragOver="Grid_DragOver"
DragDrop.DragEnter="Grid_DragEnter" DragDrop.Drop="Grid_Drop" DragDrop.DragLeave="Grid_DragLeave">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.DragEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#cecece" Storyboard.TargetProperty="(Grid.BackgroundColor).(SolidColorBrush.Color)" FillBehavior="Stop" Duration="0.0.1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<TextBlock Margin="12,12,20,12" Name="txtDragDropStatus" Text="Drag file here or use file menu to load your report" TextAlignment="Center" FontSize="30" FontWeight="Bold" TextWrapping="WrapWithOverflow" Width="835" HorizontalAlignment="Center" VerticalAlignment="Center" />
</Grid>
</UserControl>
Thanks for any help you can provide.
There are two errors in your XAML file -
BackgroundColor is not a Dependency Property, instead use Background.
0.0.1 is not a valid value for TimeSpan. It should be 0:0:1.
This will work fine -
<ColorAnimation To="#cecece"
Storyboard.TargetProperty="(Grid.Background)
.(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:1" />
Also, to allow animation on background property, you should set it to some default value.
<Grid Background="White"/>
I tried with this sample and its working fine on drag enter -
<Grid AllowDrop="True" Background="White" DragDrop.DragEnter="Grid_DragEnter">
<Grid.Triggers>
<EventTrigger RoutedEvent="Grid.DragEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation To="#cecece"
Storyboard.TargetProperty="(Grid.Background).
(SolidColorBrush.Color)"
FillBehavior="Stop" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
/EventTrigger>
</Grid.Triggers>
<TextBlock Margin="12,12,20,12" Name="txtDragDropStatus"
Text="Drag file here or use file menu to load your report"/>
</Grid>
I have WP7 application with simple phone page.
I have check box
<CheckBox Content="Click me" Margin="0,2,0,0">
When I check the checkbox I want Stack panel below it to expand.
<StackPanel Height="0" x:Name="MyStackPanel">
<CheckBox Content="Condition"/>
</StackPanel>
Right now I tried this solution, but i receive exception that EventTrigger.RoutedEvent cannot be assign to Checkbox.Checked.
<CheckBox Content="Click Me" Margin="0,2,0,0">
<CheckBox.Triggers>
<EventTrigger RoutedEvent="CheckBox.Checked">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="MyStackPanel"
Storyboard.TargetProperty="Height"
To="100"
Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</CheckBox.Triggers>
</CheckBox>
Do you have any ideas what is the best approach to implement such animation?
Thanks
There is a control for what you require to do. You should be using the Expander control that iss part of the silverlight toolkit . There iS A good two part tutorial about working with this control here on WindowsPhoneGeek.
Basically, you use the expander control and implement your own custom controls for the header and the items.
try ToggleButton.Checked instead of CheckBox.Checked