Develop Reference

EventTriggers on an Image

I have a set of Images in a GridView, and the images are not able to load instantly when the page is opened. So, to create a smoother transition, I am trying to use an EventTrigger in the Image to animate the opacity from 0 to 1 when the image loads, like so:
<GridView.ItemTemplate>
<DataTemplate>
<Border Background="{ThemeResource ButtonBackground}" HorizontalAlignment="Stretch" MaxWidth="300" MinWidth="200">
<Image Source="{Binding SmallUri}" Stretch="UniformToFill"
Opacity="0" ToolTipService.ToolTip="{Binding Author.Name}">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.ImageOpened">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="00:00:00.25" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
But whenever the page attempts to load, it crashes with the error:
Failed to assign to property 'Windows.UI.Xaml.EventTrigger.RoutedEvent'
Why does this not work? It also fails if I change the RoutedEvent property to Loaded, FrameworkElement.Loaded, Image.Loaded, or any other value I could think of. I would like a solution that does not involve having to write a custom control / codebehind.

But whenever the page attempts to load, it crashes with the error "Failed to assign to property 'Windows.UI.Xaml.EventTrigger.RoutedEvent'." Why does this not work?
As #Clemens said, problem is in Windows Runtime XAML, the default behavior for event triggers and the only event that can be used to invoke an EventTrigger is FrameworkElement.Loaded.
I'm writing this answer here to call another problem of your code, as you said:
It also fails if I change the RoutedEvent property to Loaded, FrameworkElement.Loaded, Image.Loaded
This is because you didn't specify the Storyboard.TargetName in your DoubleAnimation, it will throw the exception when it runs. To solve this problem, you will need to give a name to your Image in the DataTemplate and modify your storyboard like this:
<Image x:Name="myImage" Source="{Binding SmallUri}" Stretch="UniformToFill">
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="00:00:5" Storyboard.TargetName="myImage" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>

From the Remarks section on the EventTrigger page on MSDN:
If you do choose to use Triggers, in Windows Runtime XAML, the default
behavior for event triggers and the only event that can be used to
invoke an EventTrigger is FrameworkElement.Loaded. Because that's both
the default and the only enabled behavior, don't set the RoutedEvent
attribute. Just use the XAML <EventTrigger>. For more info, see
Triggers.

I know it's too late for answering the question but for those who will be having the same issue.
you can use this XAML code:
<Image x:Name="TumbImage" Opacity="0" ...>
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="ImageOpened">
<media:ControlStoryboardAction Storyboard="{StaticResource ImageOpacityStoryBoard}" ControlStoryboardOption="Play"/>
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
The Sample storyboard I used here:
<Storyboard x:Key="ImageOpacityStoryBoard">
<DoubleAnimation Storyboard.TargetName="TumbImage"
Storyboard.TargetProperty="Opacity"
From="0" To="1" Duration="0:0:0.33" />
</Storyboard>
and the XML namespaces used:
xmlns:i="using:Microsoft.Xaml.Interactivity"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
xmlns:media="using:Microsoft.Xaml.Interactions.Media"

WPF: Deactivating the button animations

I'm designing an UI atm and have the problem that the button animations don't fit the style of my Program and I would rather just change the colour.
My problem is: I just cant find a way do deactivate the animation that appears when you hover about or click a button :(
Is it even possible ?

Here is an image animation which is similar to an Button.
<Image Width="20" Height="20" Source="image\close.png"
ToolTip="close"
Opacity="0.5" Canvas.Left="720" Canvas.Top="3"
MouseLeftButtonDown="Close_MouseLeftButtonDown">
<Image.RenderTransform>
<RotateTransform x:Name="imgTransform"
CenterX="10"
CenterY="10"
Angle="0"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.MouseEnter">
<BeginStoryboard HandoffBehavior="Compose" >
<Storyboard Name="myStoryBoard" >
<DoubleAnimation
Storyboard.TargetName="imgTransform"
Storyboard.TargetProperty="Angle"
By="90" Duration="0:0:.2"
/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image>
image\close.png is my image and you can change into yours.
As you can test,it has a duration and will stop automatically.However you can get StoryBoard Object by its Name property in C# code and call Stop method on it.

Scrolling NewsTicker is cutting off early

I have a scrolling News Ticker in WPF that is used to convey alerts (their preference not mine). The implementation works but I have found an issue which is more noticeable as the text gets longer. The text scrolls and then abruptly stops and then restarts.
<Border Grid.Row="5" Grid.Column="0" Grid.ColumnSpan="5" BorderBrush="White" BorderThickness="0,3,0,3">
<StackPanel Orientation="Horizontal" x:Name="Ticker" Background="Transparent" >
<StackPanel.Triggers>
<EventTrigger RoutedEvent="FrameworkElement.Loaded">
<BeginStoryboard x:Name="NewsTicker">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation From="{Binding ElementName=Ticker, Path=ActualWidth}" To="{Binding ElementName=Ticker, Path=ActualWidth, Converter={StaticResource NegConverter}}" Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Duration="0:0:35" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="WrapPanel.MouseEnter">
<PauseStoryboard BeginStoryboardName="NewsTicker" />
</EventTrigger>
<EventTrigger RoutedEvent="WrapPanel.MouseLeave">
<ResumeStoryboard BeginStoryboardName="NewsTicker" />
</EventTrigger>
</StackPanelPanel.Triggers>
<TextBlock Text="{Binding NewsTicker, IsAsync=True}" Margin="0,0,0,0" Padding="0,0,0,0" VerticalAlignment="Top" >
<TextBlock.RenderTransform>
<TranslateTransform x:Name="translate" />
</TextBlock.RenderTransform>
</TextBlock>
</StackPanelPanel>
</Border>
I would like the text to scroll from the Right to the Left until it scrolls off the screen and then come back in once again from the Right in an endless loop.
I tried a couple of different methods from SO, including animating Margins with Thickness animation and as well as an example using a canvas, but neither of them actually worked at all.
Any advice?

Okay, so the key to it not jumping is binding to the right things - we want to bind the To field to the ActualWidth of the TextBlock, not the ActualWidth of the StackPanel (which is smaller)
So we can change the DoubleAnimation to:
<DoubleAnimation From="{Binding ElementName=Ticker, Path=ActualWidth}" To="{Binding ElementName=TickerTextBlock, Path=ActualWidth, Converter={StaticResource NegConverter}}" Storyboard.TargetName="translate" Storyboard.TargetProperty="X" Duration="0:0:4" />
And add a x:Name="TickerTextBlock" to the TextBlock containing the Text.
Unfortunately, this doesn't work straight off (and instead it uses the initial value of 0 from the binding pre text loading for the animation! :|). Animations are often very fickle like this - I believe it has something to do with only being created and run once, and so the value of the binding is only used when the animation is first run. (but I may be mis-understanding)
Certainly one solution which worked on my copy of your code is to ensure that the text loads first, (ie we place the TextBlock above the animation in the XAML, and change the binding so that it is not async.)
If you wish to keep the async, then I believe we'd need to restart the double animation when the text changes. I would look into this further, but it's really late and I'm going to head to bed (sorry!)

Changing property of other element on button "click" event (WPF)

I want to create a toggle button which gives rise to a rectangular panel on clicking. Since rectangle is not having click property so I have enclosed it in a button. Please provide me further guidance.
<Window x:Class="AnimatedRectangle.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300" BorderBrush="Black" BorderThickness="2" Foreground="White" VerticalAlignment="Stretch" WindowStartupLocation="CenterScreen">
<Grid>
<Button Name="MyButton">
<Button.Template>
<ControlTemplate>
<Rectangle
Name="MyRectangle"
Width="150"
Height="30"
Fill="Cyan"
Margin="0,220,0,0">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
Please visualize it this way : Both the rectangle and button are of same width and initially the button overlaps(or hide in any other way)the rectangle. When the button is clicked then the rectangle appears and it looks like the rectangular body is part of a button.
JUST LIKE we press downward symbol in address bar and the history/suggestions appears in rectangular body. But here I want a button to give rise to a rectangle body rather than a downward symbol like in address bar.
StackOverflow is not letting me post images as I need to have 10 reputation posts :(
Thanks a lot..!!

Windows phone side menu for a listboxitem

I want to create a side menu for a specific listboxitem or longlistselector's item
like the picture
when your press and hold the listboxitem the blue panel comes out, is there anyway to this ?
I managed the Hold event on the item, but not the side menu !

There are a few possible ways to do this, but the basic idea is that you add the menu in a hidden or collapsed state, and then trigger an animation on the Hold event. Here is a simple example (using the interactivity DLLs System.Windows.Interactivity and Microsoft.Expression.Interactions.Core):
<Grid xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions">
<Grid.Resources>
<Storyboard x:Name="ShowMenu">
<DoubleAnimation Storyboard.TargetName="translate" Storyboard.TargetProperty="X"
To="0" Duration="0:0:0.3" />
</Storyboard>
<Storyboard x:Name="HideMenu">
<DoubleAnimation Storyboard.TargetName="translate" Storyboard.TargetProperty="X"
To="-300" Duration="0:0:0.3" />
</Storyboard>
</Grid.Resources>
<Grid Width="300" Background="LightBlue">
<Grid.RenderTransform>
<TranslateTransform x:Name="translate" X="-300" />
</Grid.RenderTransform>
<!-- Menu popup content here -->
<TextBlock Text="Menu">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Hold">
<ei:ControlStoryboardAction Storyboard="{StaticResource HideMenu}" ControlStoryboardOption="Play" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock>
</Grid>
<Grid>
<!-- Item content here -->
<TextBlock Text="Item">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Hold">
<ei:ControlStoryboardAction Storyboard="{StaticResource ShowMenu}" ControlStoryboardOption="Play" />
</i:EventTrigger>
</i:Interaction.Triggers>
</TextBlock
</Grid>
</Grid>

You can include this menu in your Item Template and set its Visibility to Collapsed. And then add code to your Hold event that will show it. Take a look at Storyboard class for possible animations.