Ive made a sliding menu out of examples online, There is two small detail i havent been able to understand and fix. I would like the menu to slide back again when pressing something in my menu. For example (ItemMain)
Now i have to press the button again to make it slide back (ButtonCloseMenu). I would like to have this feature left but also the option to slide it back automatic if ive pressed something in my ListViewMenu
Ive also tried to link a button outside my ListViewMenu to do the same as the menu bu that wont work.
Ive tried to trim the code so it will be as short as possible.
My MainWindow.xaml
<Window.Resources>
<Storyboard x:Key="OpenMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="50"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.05" Value="200"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CloseMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="GridMenu">
<EasingDoubleKeyFrame KeyTime="0" Value="200"/>
<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="50"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonOpenMenu">
<BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="ButtonCloseMenu">
<BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
</EventTrigger>
</Window.Triggers>
<StackPanel>
<Grid Height="50" Background="White" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<Button x:Name="ButtonOpenMenu" Height="50" Width="50" Margin="0" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#000000" Click="ButtonOpenMenu_Click">
<materialDesign:PackIcon Kind="Menu" Width="25" Height="25"/>
</Button>
<Button x:Name="ButtonCloseMenu" Visibility="Collapsed" Height="50" Width="50" Margin="0" HorizontalAlignment="Right" VerticalAlignment="Top" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="#000000" Click="ButtonCloseMenu_Click">
<materialDesign:PackIcon Kind="ArrowLeft" Width="25" Height="25"/>
</Button>
<Image Height="30" VerticalAlignment="Bottom"/>
</Grid>
<ListView x:Name="ListViewMenu" Foreground="#FFFFFF" ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionChanged="ListViewMenu_SelectionChanged">
<ListViewItem x:Name="ItemMain" Height="40">
<StackPanel Orientation="Horizontal">
<materialDesign:PackIcon Kind="House" Height="25" Width="25" Margin="5 0"/>
<TextBlock Text="Start" VerticalAlignment="Center" Margin="20 0"/>
</StackPanel>
</ListViewItem>
</ListView>
</StackPanel>
My MainWindow.xaml.cs
private void ButtonOpenMenu_Click(object sender, RoutedEventArgs e)
{
ButtonCloseMenu.Visibility = Visibility.Visible;
ButtonOpenMenu.Visibility = Visibility.Collapsed;
}
private void ButtonCloseMenu_Click(object sender, RoutedEventArgs e)
{
ButtonCloseMenu.Visibility = Visibility.Collapsed;
ButtonOpenMenu.Visibility = Visibility.Visible;
}
private void ListViewMenu_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
UserControl usc = null;
GridMain.Children.Clear();
switch (((ListViewItem)((ListView)sender).SelectedItem).Name)
{
case "ItemMain":
usc = new UserControlMain();
GridMain.Children.Add(usc);
break;
default:
break;
}
}
Let me illustrate the concept with a small sample code. Idea is this; upon clicking a button you display a bunch of text, which is analogous to you clicking the menu button in your application which slides out the menu. Then upon clicking elsewhere in the application, the previously displayed text is hidden, which is analogous to your menu sliding back.
<Window ...
MouseDown="Window_MouseDown"
Title="MainWindow" Height="300" Width="400">
<Grid Name="GridMain" Focusable="True">
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Button Name="BtnShow" Grid.Row="0" Width="100" Height="32"
Content="SHOW"
Click="Button_Click" LostFocus="Button_LostFocus"/>
<Border Grid.Row="1" Background="CadetBlue"
Width="200" Height="100">
<TextBlock Name="TxtDisplay" Text="SOME TEXT"
HorizontalAlignment="Center" VerticalAlignment="Center"
Visibility="Hidden"/>
</Border>
</Grid>
</Window>
As you can see I have a button and a text bloc in my application. You can see that there are two events attached to the button, one is the Click event that is triggered when clicking the button, and the second is the LostFocus which is triggered when the button loses focus. However note a couple other things:
The window has a MouseDown event
The outermost Grid has the Focusable property set to true.
This is because, a button (or any control) in WPF won't lose focus if you click on somewhere on the Form. To get around this, we attach the MouseDown even to the Window, then at the event handler, we're going to 'focus' on the grid. To do this we need to enable the previously mentioned property to true. Then when the grid is focused, you can't see any noticeable changes, but that does cause the button to fire the LostFocus even which is our desirable behavior. Finally, in the button's LostFocus event handler we do the action that simulates your menu sliding back, in this case simply hiding the text.
So the code behind looks like this:
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs e)
{
TxtDisplay.Visibility = Visibility.Visible;
}
private void Button_LostFocus(object sender, RoutedEventArgs e)
{
TxtDisplay.Visibility = Visibility.Hidden;
}
private void Window_MouseDown(object sender, MouseButtonEventArgs e)
{
GridMain.Focus();
}
}
Related
I am using Material Design in XAML and I'm trying to create a navigation drawer. I want the drawer to slide in and out on opening/closing button click. For this purpose I've created two buttons for opening and closing, keeping one of them invisible. On top of that I have animations declared in window's resources which are used in EventTriggers section.
But apart from starting animations, I also have to hide the clicked button and show the another one.
For now I've created an event handler for both buttons and I'm keeping the code for managing visibility in code-behind as it seemed to be the easiest solution. However I'm afraid it is breaking the MVVM pattern, but on the other hand, I shouldn't bind this event to a command in a view model because the code is messing with UI-related things.
Animations and Window Triggers:
<Window.Resources>
<Storyboard x:Key="OpenMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Menu">
<EasingDoubleKeyFrame Value="70" KeyTime="0:0:0"/>
<EasingDoubleKeyFrame Value="200" KeyTime="0:0:0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="CloseMenu">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Width" Storyboard.TargetName="Menu">
<EasingDoubleKeyFrame Value="200" KeyTime="0:0:0"/>
<EasingDoubleKeyFrame Value="70" KeyTime="0:0:0.5"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="OpenMenuButton">
<BeginStoryboard Storyboard="{StaticResource OpenMenu}"/>
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click" SourceName="CloseMenuButton">
<BeginStoryboard Storyboard="{StaticResource CloseMenu}"/>
</EventTrigger>
</Window.Triggers>
The navigation part with buttons:
<Grid Grid.Row="1" HorizontalAlignment="Left" Width="70" Background="CornflowerBlue" x:Name="Menu">
<StackPanel>
<Grid>
<Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
Background="{x:Null}" BorderBrush="{x:Null}" x:Name="OpenMenuButton" Click="ToggleMenu"
HorizontalAlignment="Right" Width="70">
<md:PackIcon Kind="Menu" Width="35" Height="35"/>
</Button>
<Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
Background="{x:Null}" BorderBrush="{x:Null}" Visibility="Collapsed"
x:Name="CloseMenuButton" Click="ToggleMenu" HorizontalAlignment="Right">
<md:PackIcon Kind="ArrowLeft" Width="35" Height="35"/>
</Button>
</Grid>
</StackPanel>
</Grid>
And code-behind for managing visibility:
private void ToggleMenu(object sender, RoutedEventArgs e)
{
ToggleButtonVisibility(OpenMenuButton);
ToggleButtonVisibility(CloseMenuButton);
}
private void ToggleButtonVisibility(Button b)
{
if (b.Visibility == Visibility.Collapsed || b.Visibility == Visibility.Hidden)
b.Visibility = Visibility.Visible;
else
b.Visibility = Visibility.Collapsed;
}
Is there a way to implement this in respect to MVVM pattern (no code-behind) and to keep click actions in one place (because right now they are split in 2 parts: animation + visibility toggle)?
Add a bool flag to the viewmodel (e.g. IsAnimationStarted)
And then just bind it to buttons visibility with converter
<UserControl.Resources>
..
<local:InvertableBooleanToVisibilityConverter x:Key="bool2visible" />
..
</UserControl.Resources>
..
<Grid>
<Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
Background="{x:Null}" BorderBrush="{x:Null}" x:Name="OpenMenuButton"
Visibility="{Binding IsAnimationStarted, Converter={StaticResource bool2visible}, ConverterParameter=Inverted}"
HorizontalAlignment="Right" Width="70">
<md:PackIcon Kind="Menu" Width="35" Height="35"/>
</Button>
<Button Style="{DynamicResource MaterialDesignFloatingActionButton}"
Background="{x:Null}" BorderBrush="{x:Null}" Visibility="Collapsed"
x:Name="CloseMenuButton"
Visibility="{Binding IsAnimationStarted, Converter={StaticResource bool2visible}, ConverterParameter=Normal}"
HorizontalAlignment="Right">
<md:PackIcon Kind="ArrowLeft" Width="35" Height="35"/>
</Button>
</Grid>
Visibility converter:
https://stackoverflow.com/a/2427307/6468720
How to animate the text from bottom to top in UWP. Is there any better way to trigger style properties in UWP.
How to make text moving Animation from bottom to top in UWP
You could use DoubleAnimation to approach, Please refer the following code.
<Grid>
<Grid.Resources>
<Storyboard x:Name="MoveStoryboard">
<DoubleAnimation Storyboard.TargetName="Tbk"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
From="0" Windows10version1903:To="{x:Bind TbkY, Mode=TwoWay}" Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</Grid.Resources>
<TextBlock Loaded="Tbk_Loaded"
Name="Tbk"
Text="hello Nico"
VerticalAlignment="Bottom"
Visibility="Visible"
HorizontalAlignment="Center"
FontSize="22"
TextLineBounds="Full" >
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
<Button Content="Move" Click="Button_Click"/>
</Grid>
Code Behind
private void Button_Click(object sender, RoutedEventArgs e)
{
MoveStoryboard.Begin();
}
public double TbkY { get; set; }
private void Tbk_Loaded(object sender, RoutedEventArgs e)
{
TbkY = -Tbk.ActualOffset.Y;
}
MVVM aproach to trigger story bord on datachange
We can also trigger the story board on Data change. I tried the below code its works for me. Use the below namespace before going to start . The nuget package will be availble on the link Microsoft.Xaml.Behaviors.Uwp.Managed
xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
xmlns:Media ="using:Microsoft.Xaml.Interactions.Media"
<Page.Resources>
<Storyboard x:Name="MoveStoryboard">
<DoubleAnimation Storyboard.TargetName="txttext1"
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
From="0" To="-200" Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</Page.Resources>
<Grid>
<TextBlock Text="Sample text to Animate">
<interactivity:Interaction.Behaviors>
<core:DataTriggerBehavior Binding ={Binding AnimateText} Value = true>
<Media:ControlStoryboardAction Storyboard="{StaticResource MoveStoryboard}"/>
</core:DataTriggerBehavior>
</interactivity:Interaction.Behaviors>
<TextBlock.RenderTransform>
<CompositeTransform/>
</TextBlock.RenderTransform>
</TextBlock>
</Grid>
I have changed the AnimateText property in ViewModel. Whenever the property value is changed .The textblock will move bottom to top based on(- Y value that is To="-200").
I have a grid. which contains a canvas of textblock and an image below it. I want to hide the canvas when user clicks on grid. And if he clicks again on it I want to show the canvas again and vice versa. This expansion and collapse should happens in an animated/sliding way. Which means I want to get an Expander to animate opening and closing with a "slide" action. How can I achieve this?
<Grid x:Name="NotiifcationGrid" Background="#002F43" Height="50" Grid.Row="0" VerticalAlignment="Top">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Canvas Grid.Row="0">
<Canvas.Clip>
<RectangleGeometry Rect="0, 0, 1700, 100" />
</Canvas.Clip>
<TextBlock Name="txtScrollingNotification" Foreground="White"
Text="This textblock is getting marquee effect." />
</Canvas>
<Image x:Name="img_greenline" Grid.Row="1" Height="40" Width="80" Source="Assets/green_line.png" />
<Grid.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimation
Storyboard.TargetName="txtScrollingNotification"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:20" From="1700"
To="-500"
RepeatBehavior="Forever" />
</Storyboard>
</Grid.Resources>
</Grid>
If you just want to animate adding and deleting of content in your Grid, then you should use AddDeleteThemeTransition.
Like this:
<Grid>
<Grid.ChildrenTransition>
<AddDeleteThemeTransition/>
</Grid.ChildrenTransition>
<Canvas..../>
<Image...../>
</Grid>
Also, If you don't like the output and your problem specially need the Expander solution, then you can use the Expander in Community Toolkit.
Hope that helps.
I want to hide the canvas when user clicks on grid. And if he clicks again on it I want to show the canvas again and vice versa. This expansion and collapse should happens in an animated/sliding way.
I've checked your XAML code, using Storyboard was a good choice, but you need to add another storyboard to achieve your target.
I've made a code sample for your reference. Please check the following code sample:
<Grid x:Name="NotiifcationGrid" Background="#002F43" Height="50" Grid.Row="0" VerticalAlignment="Top" Tapped="NotiifcationGrid_Tapped">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<Canvas Grid.Row="0" x:Name="canvas">
<Canvas.Clip>
<RectangleGeometry Rect="0, 0, 1700, 100" />
</Canvas.Clip>
<TextBlock Name="txtScrollingNotification" Foreground="White"
Text="This textblock is getting marquee effect."/>
</Canvas>
<Image x:Name="img_greenline" Grid.Row="1" Height="40" Width="80" Source="Assets/green_line.png" />
<Grid.Resources>
<Storyboard x:Name="Storyboard1" Completed="Storyboard1_Completed">
<DoubleAnimation
Storyboard.TargetName="txtScrollingNotification"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:2" From="0"
To="-500"
/>
</Storyboard>
<Storyboard x:Name="Storyboard2">
<DoubleAnimation
Storyboard.TargetName="txtScrollingNotification"
Storyboard.TargetProperty="(Canvas.Left)"
Duration="0:0:2" From="-500"
To="0"
/>
</Storyboard>
</Grid.Resources>
</Grid>
private void NotiifcationGrid_Tapped(object sender, TappedRoutedEventArgs e)
{
if (canvas.Visibility == Visibility)
{
Storyboard1.Begin();
}
else
{
canvas.Visibility = Visibility;
Storyboard2.Begin();
}
}
private void Storyboard1_Completed(object sender, object e)
{
canvas.Visibility = Visibility.Collapsed;
}
[Updated on 2018/9/3]
sorry this is not what i meant. that canvas shows some notifications. so when user touch on that NotiifcationGrid , he should feel like it is hiding. and again if he touch on it he should able to see those notification row. Now what happens is only that notification text is hiding. I want to hide that entire row Grid.Row="0" (should feel like hide from bottom to top in a slow motion)
If so, you do not need to make such a notification control in your app UI by yourself. The UWP communitytoolkit has an existing InAppNotification control. You could use it in your app directly.
I am working on a Windows 8 Metro app /RT app. I have a specific requirement around a user control.
<UserControl
x:Class="controlMagnifier.MagnifierUsercontrol"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:controlMagnifier"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="200">
<Canvas x:Name="controlCanvas" x:FieldModifier="public" >
<Canvas.RenderTransform>
<RotateTransform>
</RotateTransform>
</Canvas.RenderTransform>
<Grid Height="250" Width="176" Canvas.Left="23" Canvas.Top="40" >
<Border x:FieldModifier="public" x:Name="imgBorder" Width="150" CornerRadius="50,50,50,50" Margin="13,20,13,90">
<Border.Background>
<ImageBrush x:FieldModifier="public" x:Name="image1" />
</Border.Background>
</Border>
<TextBlock x:Name="txtreading" Height="30" Width="80" Margin="0,-145,0,0" FontWeight="Bold" Foreground="Red" FontSize="20" Text="ABC" TextAlignment="Center" />
<!--<Image Height="120" Width="150" Margin="0,-50,0,0" Source="Assets/SmallLogo.scale-100.png" ></Image>-->
<Path x:Name="MagnifyTip" Data="m 422.67516,254.62099 c -54.00107,0 -97.94018,-42.99659 -97.94018,-95.82439 0,-52.83449 43.93911,-95.824384 97.94018,-95.824384 53.98741,0 97.93335,42.989894 97.93335,95.824384 0,52.8278 -43.94594,95.82439 -97.93335,95.82439 z m -4.5e-4,-201.388003 c -59.74605,0 -108.33864,48.616303 -108.33864,108.338643 0,56.09938 81.0924,116.80009 104.5378,191.74948 0.50401,1.61877 2.01605,2.72166 3.71189,2.7098 1.70178,-0.0237 3.1901,-1.13847 3.67039,-2.76909 C 449.00187,276.46834 531.00741,217.73624 531.01334,161.55977 531.00741,101.84929 482.4089,53.232987 422.67471,53.232987 Z" Fill="#FFF4F4F5" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Height="227" Width="171" />
</Grid>
</Canvas>
</UserControl>
Please see the video here . When I tap on the screen the user control appears with some animation and disappears with some animation. If I tap and hold for some x sec(or ms) it and remove it , it goes off with some animation. I want the user control to appear in full shape in 0.04 seconds and disappear when I leave my finger. I need the similar kind of animation. No idea about it. Kindly help
There are 2 parts to this answer:
1) creating the animation in Blend
and
2) triggering the animation on tap
for 1) see here: http://www.kirupa.com/net/intro_blend_animation_pg3.htm This tutorial shows how to add simple animation for WPF in Blend, store apps animations can be added in a similar fashion.
For example, try to animate the Opacity a control over some time (e.g. 0.4s)
Here's the XAML I have:
<Grid PointerPressed="Grid_PointerPressed" Background="Black">
<Grid.Resources>
<Storyboard x:Name="animFadeIn">
<DoubleAnimation Duration="0:0:0.4" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="border" d:IsOptimized="True"/>
</Storyboard>
</Grid.Resources>
<TextBlock Text="tap anywhere" FontSize="46" />
<Border x:Name="border" BorderBrush="White" BorderThickness="1" HorizontalAlignment="Left" Height="109" Margin="463,310,0,0" VerticalAlignment="Top" Width="158" Opacity="0" Background="White"/>
</Grid>
for 2) you could trigger the animation from code behind on the PointerPressed event. Note I already have the handler in the XAML above.
private void Grid_PointerPressed(object sender, PointerRoutedEventArgs e)
{
animFadeIn.Begin();
}
I have a textblock in my app, and I want to make a simple animation with it. I want just that it moves to left, until apparently "leaving the device", and returning on the other side, back to its place... as if circling the device horizontally... repeating this forever!
I tried doing like this:
<TextBlock x:Name="txbAnimated" FontFamily="Segoe WP SemiBold"
FontSize="17" Foreground="White" HorizontalAlignment="Center" Margin="0"
TextWrapping="Wrap" Text="My Text" VerticalAlignment="Center"
TextAlignment="Center">
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="-550" />
</TextBlock.RenderTransform>
</TextBlock>
<TextBlock x:Name="txbAnimated2" Margin="550,0,-550,0" FontFamily="Segoe WP
SemiBold" FontSize="17" Foreground="White" HorizontalAlignment="Center"
TextWrapping="Wrap" Text="My Text" VerticalAlignment="Center"
TextAlignment="Center">
<TextBlock.RenderTransform>
<CompositeTransform TranslateX="-550" />
</TextBlock.RenderTransform>
</TextBlock>
<Grid>
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="movement">
<DoubleAnimation
Storyboard.TargetName="txbAnimated"
Duration="0:0:2"
Storyboard.TargetProperty=" (UIElement.RenderTransform).(CompositeTransform.TranslateX)"
From="0" To="-550"
BeginTime="0:0:10"
RepeatBehavior="1x"/>
</Storyboard>
<Storyboard x:Name="movement2">
<DoubleAnimation
Storyboard.TargetName="txbAnimated2"
Duration="0:0:2"
Storyboard.TargetProperty=" (UIElement.RenderTransform).(CompositeTransform.TranslateX)"
From="0" To="-550"
BeginTime="0:0:10"
RepeatBehavior="1x"/>
</Storyboard>
</StackPanel.Resources>
</StackPanel>
</Grid>
And on Main:
private void StartBanner()
{
movement.Begin();
movement.Completed += movement_Completed;
movement2.Begin();
movement2.Completed += movement2_Completed;
}
private void movement_Completed(object sender, EventArgs e)
{
movement.Begin();
movement.Completed += movement2_Completed;
}
private void movement2_Completed(object sender, EventArgs e)
{
movement2.Begin();
movement2.Completed += movement_Completed;
}
I didn't use "RepeatBehavior = forever" because I want that the animation stops after one cycle, wait a few seconds, then repeat it.
It worked this way, but it is interfering on others elements behaviors on UI...
So, I read this article Make animations smooth (XAML), but I'm working with Windows Phone 8, and not all tips there works for WP8...
Does anyone know the best way of make this animation, without mess with another elements on UI?