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.
Related
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.
I added a ProgressBar to my application and I wanted it to have a transparent background, so I did it like this:
<ProgressBar IsIndeterminate="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
<ProgressBar.Background>
<SolidColorBrush Color="Black" Opacity="0.5" />
</ProgressBar.Background>
</ProgressBar>
And in the Preview Window everything looks fine, however, when I run my app, the Background is simply not there. The solution I found to this is to put the ProgressBar in a Grid and set the Background property in the Grid, but since the Preview shows it right, and the property is there, shouldn't it work?
UPDATE:
Based on #Chris W. suggestion, I tried to override the default style of the ProgressBar element, like so:
<ProgressBar IsIndeterminate="True" Background="#FF000000" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Margin="50">
<ProgressBar.Style>
<Style TargetType="ProgressBar">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ProgressBar">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Indeterminate">
<Storyboard RepeatBehavior="Forever">
<DoubleAnimation Storyboard.TargetName="DeterminateRoot"
Storyboard.TargetProperty="Opacity"
To="0.5"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ProgressBar.Style>
</ProgressBar>
But still, no juice.
Need to get rid of two (2) StoryBoard Animations
Document Outline > Right Click Progress Bar > Edit Template -> Edit A Copy
<!--
<FadeOutThemeAnimation Storyboard.TargetName="DeterminateRoot"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DeterminateRoot"/>
-->
And as #ricochete suggested if using Opacity = 1 change up the Z-Order of DeterminateRoot to be on top of the EllipseGrid
<Border x:Name="DeterminateRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" MinHeight="{TemplateBinding MinHeight}">
<Rectangle x:Name="ProgressBarIndicator" Fill="{TemplateBinding Foreground}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}"/>
</Border>
<Grid x:Name="EllipseGrid" Opacity="0">
<!-- ... more XAML Style -->
<Grid Background="#FFFF0000">
<ProgressBar IsIndeterminate="True" Style="{StaticResource ProgressBarStyle1}" Height="50" >
<ProgressBar.Background>
<SolidColorBrush Color="Black" Opacity="0.5"/>
</ProgressBar.Background>
</ProgressBar>
</Grid>
If you go look at the default template you'll see at the bottom of the template the Background only has a TemplateBinding in one spot for x:Name="DeterminateRoot" so that's the only place you'd see your color set from the Background property.
Then if you climb up through the Storyboard for the Indeterminate State you'll find;
<DoubleAnimation Storyboard.TargetName="DeterminateRoot"
Storyboard.TargetProperty="Opacity"
To="0"
Duration="0" />
...and you've got your ProgressBar set to IsIndeterminate="True" so you're setting the one place that accepts the Background property to a zero opacity explicitly.
So you could go pull that animation out of the Storyboard for that state, or put in your own new object to set your thing, or just do the workaround you mentioned by just throwing it in a Border or a Grid or something and doing it that way amongst other possibilities.
You might also try (once you've fixed your opacity setting issue from the storyboard) just flipping your SolidColorBrush with Opacity into just pure hex with the Alpha Channel set as 50% opacity equivalent. Making it just;
<ProgressBar Background="#80000000" IsIndeterminate="True" VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
Anyhow, hope this helps, Cheers!
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>