We Keep Coding

windows phone Image Translation (movement/animation)

Im trying to animate a image that moves from the right side of the screen to the left, i guess thats what translate is for, but not really sure how it works, or whats the best solution. So far i have this:
<Image Height="50" Width="50" Source="/Assets/Img/cloud.png" Stretch="Uniform">
<Image.RenderTransform>
<TranslateTransform x:Name="p1Translate" X="0" Y="0"/>
</Image.RenderTransform>
</Image>
Which is nothing!
So can someone help me, translate the cloud.png just in the X axis?
Greets,
José Correia

Did you try using the CompositeTransform for your image? You could use Blend to come up with a storyboard animation.
XAML storyboard animation moving images from outside viewport-windows phone 8
For further reference:
Images Animation By Using Story Board in Windows Phone 8/8.1

I believe this article should answer all your questions: Quickstart: Animations for Windows Phone
While you can use the RenderTransform in order to position objects relative to where the layouting engine puts them the easier way is to place the Control you want to move around inside a Canvas which directly attaches position properties to that Control. This is shown in one of the samples in the article I linked to.

Thanks for all the help, heres how i did it:
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="Storyboard1">
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)" Storyboard.TargetName="image">
<EasingDoubleKeyFrame KeyTime="0" Value="-90"/>
<EasingDoubleKeyFrame KeyTime="0:0:8" Value="-598.826"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</phone:PhoneApplicationPage.Resources>
<Image x:Name="image" Source="/Assets/Img/bg_cloud.png" Stretch="Fill" RenderTransformOrigin="50,50" Width="70" Height="40" Margin="497,596,-87,164">
<Image.RenderTransform>
<CompositeTransform/>
</Image.RenderTransform>
</Image>
And Blend really helped me out!
Best regards,
José Correia

Animating a TabControl

I'm trying to achieve a nice animation while switching tabs in the TabControl.
At this point, my style animation xaml looks like this:
<EventTrigger RoutedEvent="SelectionChanged">
<BeginStoryboard x:Name="selectionChangedBeginStoryboard">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="borderScale"
Storyboard.TargetProperty="ScaleX">
<DoubleKeyFrameCollection>
<EasingDoubleKeyFrame Value="0" KeyTime="0:0:0.2"/>
<EasingDoubleKeyFrame Value="1" KeyTime="0:0:0.4"/>
</DoubleKeyFrameCollection>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
What I want to achieve is a rotating effect on the tab transmition. So it would look like the screen is turning away, and returns with the new tab page.
The problem is that when I switch to another tab,
The content is switched right away, and the animation is just rotating the new tab page.
Any Ideas, please? :)
Thank you!

I would recommend that you use a transition library, such as 'Transitionals'. You can download this library from the Transitionals page on CodePlex.
The reason why I say this is because in order to do what you want to do, you will need to capture the Visual of the old TabItem before you switch tabs, animate that instead of the TabItem and then remove that and restore the actual controls.
However, the aforementioned library already does this and provides a number of different transitions for you to use. You can get help with using the library by downloading the 'TransitionalsHelp_1_0.zip' file from the following link:
http://transitionals.codeplex.com/releases/view/12954

Instead of using third party programs, i recommend Blend.
Open your Solution there and work with the VisualStateManager. I did a transitional effect from Unselected to Selected in less than 30 seconds. It was simple (Opacity change), but Blend is very user friendly and you can integrate with Visual Studio natively.
Here's what it generated to be (not what you are asking):
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates"/>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.3"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="templateRoot">
<EasingDoubleKeyFrame KeyTime="0" Value="0.8"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
Good luck.

Animation limited by panel

It's a little hard to describe but I'll try my best.
I have a control which has an image and a label and it needs to have 2 states ("Big", and "Small").
On the "Big" state the image should be centered at the top of the control, and the label should be center below (Just like a dock with an image and a label docked to the top).
On the "Small" state the image should be smaller and at the top left of the control, and the label should be right next to it.
The big state should look like so:
And the small state:
And the tricky part: when I switch between them I need it to animate over 0.3s.
There is no panel I found suitable for this.
DockPanel is a good solution for both of these states, but it can't animate it.
Canvas can animate it, but doesn't have a proper layout (can't center them so easily).
What would be the best way to do it?

In WPF no animation alignment, the only thing that can come up - it ThicknessAnimation. But you can use the DiscreteObjectKeyFrame to set the alignment. Below is a simple demonstration in which to Label set VerticalAlignment in Bottom:
<Grid>
<Grid.Triggers>
<EventTrigger SourceName="Small" RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Test" Storyboard.TargetProperty="VerticalAlignment">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<VerticalAlignment>Bottom</VerticalAlignment>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
<Label x:Name="Test" Content="Test" Width="300" Height="300" Background="Aqua" VerticalAlignment="Top" HorizontalAlignment="Center" />
<Button Name="Small" Content="Small" Width="100" Height="30" HorizontalAlignment="Right" VerticalAlignment="Top" />
</Grid>
Using it in combination with standard animations, such as DoubleAnimation, I think you'll be able to achieve this goal.

Checkbox triggers stackpanel expand/collapse animation

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

Update page layout before Thread.Sleep()

I have a TextBlock on my page with Text value null (""). When I click a button I want to change the Text value for this TextBlock, pause half a second and then move the TextBlock one pixel at a time to a certain point.
I tried using Thread.Sleep(), but so far, I have a problem. I click the button, the UI thread pauses for half a second, then the TextBlock suddenly appears and starts moving. I want it to appear as soon as I click the button.
P.S.: I know Thread.Sleep() doesn't work. I am willing to use anything that works.

Storyboards and animations are the preferred mechanism for moving items on the screen. For one thing, they are optimized to work with the phones threading model. For another, putting your UI thread to sleep is a bad idea as you are making a non responsive application.
Here's a quick example of how to move a texblock with a story board.
The UI elements.
<Grid
x:Name="ContentPanel"
Grid.Row="1"
Margin="12,0,12,0">
<TextBlock
Margin='79,263,177,307'
Name='textBlock1'
Text='TextBlock'
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<CompositeTransform />
</TextBlock.RenderTransform>
</TextBlock>
<Button
Content="Button"
Height="80"
Margin="116,0,188,144"
VerticalAlignment="Bottom"
Click='Button_Click' />
</Grid>
The storyboard, defined in the page resources section.
<phone:PhoneApplicationPage.Resources>
<Storyboard
x:Name="MoveTextBlockStoryboard">
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateX)"
Storyboard.TargetName="textBlock1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.1"
Value="120" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
Storyboard.TargetName="textBlock1">
<EasingDoubleKeyFrame
KeyTime="0"
Value="0" />
<EasingDoubleKeyFrame
KeyTime="0:0:1.1"
Value="-105" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
The code that changes the text and starts the storyboard.
private void Button_Click(object sender, RoutedEventArgs e) {
textBlock1.Text = "new text";
MoveTextBlockStoryboard.Begin();
}

Try using a storyboard instead of writing code to do this. I think it will perform better for you than a manual approach.