I'm new at Windows 10 Universal Windows Apps and XAML and I would like to know were to find a list of RoutedEvents.
I'm trying to animate the Ellipsis button in a commandBar control. I changed the image to an arrow which I need to rotate when it is clicked / tapped.
I edited the control in Blend and I tried to add an animation on the Tap / Tapped / MouseDown routed events. It does'nt work for neither - the events are either not accessible or not recognized.
this is my code
<Button x:Name="MoreButton" Grid.Column="1" Foreground="{TemplateBinding Foreground}" MinHeight="{ThemeResource AppBarThemeCompactHeight}" Padding="16,23,16,0" Style="{StaticResource EllipsisButton}" VerticalAlignment="Top" Visibility="Visible">
<FontIcon x:Name="EllipsisIcon" FontSize="16"
FontFamily="{ThemeResource SymbolThemeFontFamily}"
Glyph="" Height="Auto" VerticalAlignment="Center">
<FontIcon.RenderTransform>
<RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
</FontIcon.RenderTransform>
<FontIcon.Triggers>
<EventTrigger RoutedEvent="Tap">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="AnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
By="10"
To="360"
Duration="0:0:0.5"
FillBehavior="Stop" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</FontIcon.Triggers>
</FontIcon>
</Button>
Thank you
I guess you can move your animation to one of the visualstates in DisplayModeStates visualstategroup. msdn
Here's a MSDN link for a list of routed events.
Related
I want to be able to translate a grid to the bottom of page when a button is clicked. Currently I am using TranslateTransform to achieve that but the problem is that I have to give an integer value to which I have to translate the grid which would change when the height of container changes. My Storyboard:
<Storyboard x:Name="LowerChamberSlideDown">
<DoubleAnimation Storyboard.TargetName="HeaderTrans"
BeginTime="0:0:1"
Storyboard.TargetProperty="Y"
To="288"
Duration="0:0:2"/>
</Storyboard>
My Grid:
<Grid x:Name="LowerChamberHeader"
Grid.Row="0"
VerticalAlignment="Top">
<Grid.RenderTransform>
<TranslateTransform x:Name="HeaderTrans" Y="0"></TranslateTransform>
</Grid.RenderTransform>
<TextBlock Text="Lower Chamber"
HorizontalAlignment="Left"
VerticalAlignment="Center"
Margin="15,0,0,0"
Foreground="White"/>
<Button Height="20"
HorizontalAlignment="Right"
Margin="0,0,10,0">
<Button.Background>
<ImageBrush ImageSource="Assets/bmpExpandCollapse.bmp"
Stretch="Uniform"/>
</Button.Background>
</Button>
<Grid.Background>
<ImageBrush ImageSource="Assets/bmpBlueImage.bmp"/>
</Grid.Background>
</Grid>
Is there a way to use VerticalAlignment property in animation and set it to bottom to translate the grid?
Got this answer from following link:
How to animate Margin property in WPF
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="GroupTileSecond"
Storyboard.TargetProperty="HorizontalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<HorizontalAlignment>Center</HorizontalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
Thanks,
Jessie
I couldn't find a solution that also shows the nice transition of grid to the bottom of screen so I solved this issue by determining the height of the screen on OnSizeChanged event and then recalculating the LowerChamberSlideDown.To property from code behind.
I'm trying to create a ListView with grouping where the elements in each group are shown horizontally (as a scrollable content). No matter what I tried with the GroupStyle.Panel of the ListView it doesn't seem to have any effect on the list.
Here is how my XAML looks:
<ListView x:Name="itemListView"
Padding="10"
SelectionMode="None"
IsSwipeEnabled="False"
IsItemClickEnabled="True"
ItemTemplate="{StaticResource listItemTemplate}">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemWidth="144" Orientation="Horizontal" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid>
<TextBlock Text="{Binding DisplayTitle}"
Margin="0,10,0,5"
Foreground="Black"
Style="{StaticResource SubheaderTextBlockStyle}"
TextWrapping="NoWrap" />
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</ListView.GroupStyle>
</ListView>
Where
<Page.Resources>
<DataTemplate x:Key="listItemTemplate">
<Grid Width="144" Margin="5">
<!-- details -->
</Grid>
</DataTemplate>
</Page.Resources>
The following image shows on the left the actual result I get, and on the right what I want to have.
I tried using a ItemsWrapGrid with different properties, I tried a StackPanel and even an VariableSizedWrapGrid, but nothing changed in the way the list items are displayed.
How can this be done?
#kubakista was right about
It looks like if ListView.ItemsPanel contains ItemsStackPanel then
GroupStyle.Panel is ignored...
However, changing this won't solve your problem as -
The scrolling becomes a bit laggy.
There is no horizontal scrolling.
The ListView loses virtualization.
The nice group header rolling up animation is gone.
Here is an alternative without changing the structure of the ListView itself but a little bit modification in your data structure.
The idea is, treat each horizontal list of rectangles under a group as one collection item on the UI.
This means, each group in the ListView will only have one child, which is actually a collection of rectangles that will be presented in an horizontal scrollable ItemsControl.
So, assume you have some collection of type ObservableCollection<Item> as the CollectionViewSource, the Item will now become type of <ObservableCollection<Item>> in order to hold the collection of rectangles. Therefore, the type of the collection will need to be updated to something like ObservableCollection<ObservableCollection<Item>>.
Inside the ListView's ItemTemplate, you will need to create a horizontally scrolling ScrollViewer and put an ItemsControl inside. Make sure you have set the latter's ItemsSource to {Binding}.
To enable horizontal swiping, you will need to disable the tilt effect by editing the default style of ListViewItem and commenting out the following code.
<!--
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="TiltContainer"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="TiltContainer"/>
</Storyboard>
</VisualState>
-->
I have attached a working sample project here as well as a screenshot shown below.
Hope this helps!
I have such code (cut only part which is needed; this code is used as a UserControl):
<Grid>
<Image x:Name="im" HorizontalAlignment="Left" Height="120" Width="120">
<Image.RenderTransform>
<RotateTransform Angle="0" CenterX="60" CenterY="60" />
</Image.RenderTransform>
</Image>
<Button x:Name="br" Content="Right" Width="55">
<Button.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="im" Storyboard.TargetProperty="RenderTransform.Angle" By="90" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
I'd like to rotate image ("im") by 90 degrees by clicking the "br" button. This code doesn't work.
But if I use this code:
<Grid>
<Image x:Name="im" HorizontalAlignment="Left" Height="120" Width="120">
<Image.RenderTransform>
<RotateTransform Angle="0" CenterX="60" CenterY="60" />
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="MouseUp">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="im" Storyboard.TargetProperty="RenderTransform.Angle" By="90" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
<Button x:Name="br" Content="Right" Width="55">
</Button>
</Grid>
rotation works (image is rotating by clicking on it). What's wrong with the first one?
Did you tried the Button.Click Routed event instead of MouseUp. The reason for MouseUp not working for button is explained here: Wpf event not bubbling.
The code you provided will work on Right button click of mouse. On left button click of mouse, the Click event is swallowing up the Mouse events.
I tried the below code and it seems to work. I have used a dummy image as source.
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="im" HorizontalAlignment="Left" Height="120" Width="120" Source="..\Images\info.png">
<Image.RenderTransform>
<RotateTransform Angle="0" CenterX="60" CenterY="60" />
</Image.RenderTransform>
</Image>
<Button x:Name="br" Grid.Row="1" Content="Right" Width="55">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="im" Storyboard.TargetProperty="RenderTransform.Angle" By="90" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
Let me know in case you need any more information.
I'm a bit a of XAML noob so this is probably something very simple I'm missing...
In a Windows Phone 8 app I have a map Pushpin I'm trying to animate with an effect very much like ripples in a pond. I have a large container eclipse and a child eclipse that will expand from 0 width/height to 30 width/height (the same size as the parent eclipse).
I'm doing this to visually indicate to the user that their location is actively being tracked, or just been picked up.
Unfortunately I've not managed to get my animation working.
<ControlTemplate x:Key="UserLocationPushpinControlTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="34" Height="34">
<Grid.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation
Storyboard.TargetName="Animated"
Storyboard.TargetProperty="Width"
From="0" To="30" Duration="0:0:1" AutoReverse="False"
RepeatBehavior="Forever" />
<DoubleAnimation
Storyboard.TargetName="Animated"
Storyboard.TargetProperty="Height"
From="0" To="30" Duration="0:0:1" AutoReverse="False"
RepeatBehavior="Forever" />
</Storyboard>
</Grid.Resources>
<Grid MinHeight="30" MinWidth="30">
<Ellipse x:Name="Parent" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30"
Stroke="White"
StrokeThickness="3"
Fill="{StaticResource PrimaryColorBrush}"/>
<Ellipse x:Name="Animated" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="0"
Height="0"
Stroke="White"
StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
Just in case it's relevant - this ControlTemplate is within a UserControl housing my Windows Phone 7 / Bing map control (the Windows Phone 8 map control is lacking some functionality I require).
Any help would be greatly appreciated. Thank you.
Update
I can add an animation, but am not sure how to apply the Storyboard via code. Ideally I'd like to apply the Storyboard by code as I'd like to define a couple for different circumstances.
Here's the updated XAML:
<ControlTemplate x:Key="UserLocationPushpinControlTemplate" TargetType="m:Pushpin">
<Grid x:Name="ContentGrid" Width="34" Height="34">
<Grid.Resources>
<Storyboard x:Name="LocateStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="AnimatedEllipse" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="AnimatedEllipse" RepeatBehavior="Forever">
<EasingDoubleKeyFrame KeyTime="0" Value="0"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="30"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Grid.Resources>
<Grid MinHeight="30" MinWidth="30">
<Ellipse x:Name="ParentEllipse" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="30"
Height="30"
Stroke="White"
StrokeThickness="3"
Fill="{StaticResource PrimaryColorBrush}"/>
<Ellipse x:Name="AnimatedEllipse" Margin="1"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Width="0"
Height="0"
Stroke="White"
StrokeThickness="2"/>
</Grid>
</Grid>
</ControlTemplate>
As a side note: I had issues creating the animation before as I was unaware that Blend does not record changes if you're tweaking the XAML code directly. You need to seek out the various property controls and set everything there.
This is the code I was trying to use to start the animation:
Pushpin pushpin = new Pushpin();
pushpin.Tag = PIN_TAG;
pushpin.Location = ViewModel.Location;
pushpin.Template = (ControlTemplate)Resources["UserLocationPushpinControlTemplate"];
pushpin.PositionOrigin = PositionOrigin.Center;
MapBase.Children.Add(pushpin);
Storyboard animation = (Storyboard)pushpin.Resources["LocateStoryboard"];
animation.Begin();
The storyboard variable is null. It seems I need to delve in to the ControlTemplate structure to dig down to the "LocateStoryboard" resource. Any ideas how to do this?
Not sure if it can help, but take a look at the article by Igor Ralic here... He has a detailed example on how to add a fade in animation on pushpins.
Well, as the title suggests:
I have a storyboard and I want it's animation to start without the intervention of code.
The reason for this requirement is that I am targeting Silverlight Embedded and I am too lazy right now to recompile my application as well. And, coming to think of it, it will be easier to change the animation only in the future.
Does XAML have a property to make the storyboard run as soon as the xaml loads?
You can use the Loaded event to start your storyboard
See MSDN for an example:
Storyboard (Silverlight)
Picked the example from MSDN:
<Canvas
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Rectangle
x:Name="MyAnimatedRectangle"
Width="100"
Height="100"
Fill="Blue">
<Rectangle.Triggers>
<!-- Animates the rectangle's opacity.
This is the important part, the EventTrigger which will start our animation -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRectangle"
Storyboard.TargetProperty="Opacity"
From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Canvas>
The object Rectangle has properties. In the Triggers property we defined an EventTrigger which will fire when this event will occur. We choose the Rectangle.Loaded event, which means it will fire when loaded ;).
We add a BeginStoryboard property to begin our storyboard, and add a Storyboard. This animation will use a DoubleAnimation on the Opacity property, which means that in a duration of 5 seconds, the opacity will gradually fade to zero, and back (AutoReverse property) and it will do this Forever (the RepeatBehaviour property).
<UserControl x:Class="SOSMVVM.AniM11"
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'
mc:Ignorable='d'
d:DesignWidth='640'
d:DesignHeight='480'>
<StackPanel Margin="5">
<Rectangle Name="rect3" Fill="Blue" Margin="2" Width="20"
Height="20" HorizontalAlignment="Left" />
<Button Margin="2,20,0,0" HorizontalAlignment="Left"
Content="Start Animations" Width="100">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="rect3" Storyboard.TargetProperty="Width"
From="20" To="400" Duration="0:0:10" SpeedRatio="0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Button.Triggers>
</Button>
</StackPanel>
</UserControl>