Answered by:
No transition animation in FlipView.

Question
-
My app is a C++ project.
I have added a FlipView control into my xaml as below:
<FlipView x:Name="flipView1" SelectionChanged="FlipView_SelectionChanged">
<Image Source="Assets/Logo.png" />
<Image Source="Assets/SplashScreen.png" />
<Image Source="Assets/SmallLogo.png" />
</FlipView>When I click the navigation button, no transition animation.
But the FlipView sample downloaded from http://code.msdn.microsoft.com/windowsapps/FlipView-control-sample-18e434b4 has transition animation.
How to add transition animation to my app when click the navigation button in FlipView?
Thank you.
Tuesday, September 4, 2012 7:06 AM
Answers
-
Hi,
Different from the JS sample, the XAML need to add animation in selection event. Please follow this sample codes.
void flipview::MainPage::flipView1_SelectionChanged_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e) { FlipView^ flipview =safe_cast<FlipView^>(sender); if (e->AddedItems->Size > 0) { FlipViewItem^ initem =safe_cast<FlipViewItem^>( flipview->ItemContainerGenerator->ContainerFromItem(e->AddedItems->GetAt(0))) ; if (initem != nullptr) { Storyboard^ sb = ref new Storyboard(); DoubleAnimation^ da = ref new DoubleAnimation(); da->From=1.0; da->To=0.0; da->AutoReverse=true; Windows::Foundation::TimeSpan ts; ts.Duration=5000000; Windows::UI::Xaml::Duration dur(ts); da->Duration=dur; sb->Children->Append(da); Storyboard::SetTargetProperty(sb, "Opacity"); Storyboard::SetTarget(sb, initem); sb->Begin(); } } }
Best regards,
JesseJesse Jiang [MSFT]
MSDN Community Support | Feedback to us
- Marked as answer by ytshe Wednesday, September 5, 2012 7:16 AM
Tuesday, September 4, 2012 8:07 AM
All replies
-
Hi,
Different from the JS sample, the XAML need to add animation in selection event. Please follow this sample codes.
void flipview::MainPage::flipView1_SelectionChanged_1(Platform::Object^ sender, Windows::UI::Xaml::Controls::SelectionChangedEventArgs^ e) { FlipView^ flipview =safe_cast<FlipView^>(sender); if (e->AddedItems->Size > 0) { FlipViewItem^ initem =safe_cast<FlipViewItem^>( flipview->ItemContainerGenerator->ContainerFromItem(e->AddedItems->GetAt(0))) ; if (initem != nullptr) { Storyboard^ sb = ref new Storyboard(); DoubleAnimation^ da = ref new DoubleAnimation(); da->From=1.0; da->To=0.0; da->AutoReverse=true; Windows::Foundation::TimeSpan ts; ts.Duration=5000000; Windows::UI::Xaml::Duration dur(ts); da->Duration=dur; sb->Children->Append(da); Storyboard::SetTargetProperty(sb, "Opacity"); Storyboard::SetTarget(sb, initem); sb->Begin(); } } }
Best regards,
JesseJesse Jiang [MSFT]
MSDN Community Support | Feedback to us
- Marked as answer by ytshe Wednesday, September 5, 2012 7:16 AM
Tuesday, September 4, 2012 8:07 AM -
Jesse:
Thank you for reply.
If I add your codes to selection changed event handler, when I swap item by finger touch, this transition effect also be taken.
It seems the JS's transition animation is changing the margin of FlipViewItem?
Thanks.
Tuesday, September 4, 2012 9:59 AM -
Jesse:
Another question:
How to hide the navigation button? How to prevent the user to switch page by finger touch?
Thank you.
Wednesday, September 5, 2012 7:21 AM -
Is it possible to get that as actual C# code? having trouble parsing it :/Tuesday, September 11, 2012 9:20 PM
-
this is c++ code. here is the same for C#
if (e.AddedItems.Count > 0) {
FlipViewItem initem = flipView.ItemContainerGenerator.ContainerFromItem(e.AddedItems[0]) as FlipViewItem;
if (initem != null) {
Storyboard sb = new Storyboard();
DoubleAnimation da = new DoubleAnimation();
da.From = 1.0;
da.To = 0.0;
da.AutoReverse = true;
Duration dur = new Duration(TimeSpan.FromMilliseconds(500));
da.Duration = dur;
sb.Children.Add(da);
Storyboard.SetTargetProperty(sb, "Opacity");
Storyboard.SetTarget(sb, initem);
sb.Begin();
}
}- Proposed as answer by netedk Monday, October 22, 2012 6:09 PM
Wednesday, September 12, 2012 1:39 PM -
The code is good an working, but changes are coming and
flipView.ItemContainerGenerator.ContainerFromItem
has been marked obsolete. Instead use:
flipView.ContainerFromItem
And I have changed the animation (reversed it), removed auto-reverse as well and increased the duration:
private void FlipView_SelectionChanged(object sender, SelectionChangedEventArgs e) { var flipView = sender as FlipView; if (e.AddedItems.Count > 0) { FlipViewItem initem = flipView.ContainerFromItem(e.AddedItems[0]) as FlipViewItem; if (initem != null) { Storyboard sb = new Storyboard(); DoubleAnimation da = new DoubleAnimation(); da.From = 0.0; da.To = 1.0; da.AutoReverse = false; Duration dur = new Duration(TimeSpan.FromMilliseconds(600)); da.Duration = dur; sb.Children.Add(da); Storyboard.SetTargetProperty(sb, "Opacity"); Storyboard.SetTarget(sb, initem); sb.Begin(); } } }
Ilija
Monday, October 27, 2014 4:01 PM