WP7 Page transitions - windows-phone-7

I have included some code within APP.XAML to define some styles for Page transitions. Its included below.
In my WP7 app I have 3 main pages - say M1, M2 and M3. For each of them I have marked in their XAML to use the 'TurnstileTransition' style and when I navigate between them it all works well. But, I also have a subpage that is used to create new items - say S1 that I navigate to from M2 and M3. My understanding is that navigating to a page like this suits a Slide transition and for these pages I am using the 'SlideTransition' style.
When I navigate to S1 it appears to pick up the Navigate forward out from M2 (turnstile) and then the Navigate ForwardIn for S1 (Slide). Looks a bit messy.
My questions are
Is my assumption right and its going through both of these Navigations
Is there a recommended approach to dealing with this - so maybe where a page (M2) can navigate away a couple of ways then its doesn't define the Forward Out Navigation but leaves this to be done in the code. Or do I need Forward out navigation and let it simply pick up the forward in navigation from the page to which its going to?
Assuming I do need to do this then cam I override the XAML where I have marked it to pick up the style, or will I now need to do it all in the code??
Thanks
<Style x:Key="TurnstileTransition" TargetType="phone:PhoneApplicationPage">
<Setter Property="toolkit:TransitionService.NavigationInTransition">
<Setter.Value>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</Setter.Value>
</Setter>
<Setter Property="toolkit:TransitionService.NavigationOutTransition">
<Setter.Value>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="SlideTransition" TargetType="phone:PhoneApplicationPage">
<Setter Property="toolkit:TransitionService.NavigationInTransition">
<Setter.Value>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:SlideTransition Mode="SlideDownFadeIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:SlideTransition Mode="SlideUpFadeIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</Setter.Value>
</Setter>
<Setter Property="toolkit:TransitionService.NavigationOutTransition">
<Setter.Value>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:SlideTransition Mode="SlideUpFadeOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:SlideTransition Mode="SlideDownFadeOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</Setter.Value>
</Setter>
</Style>

If you want to have more page transitions depending on which page you are navigating to you should override the OnNavigatingFrom method of let's say M2 page. Add a bool variable in your page class ignoreTransition = false (this will tell us if we should play the transition or not) then in the OnNavigatedFrom method check if IgnoreTransition == false, if ignoreTransition is false then cancel the navigation e.Cancel=true; and find which page you're navigating to e.Uri. If the Uri reffers to another M page start the turnstile transition, otherwise start the slide transition.
Next you need to subscribe to the transition's Completed event and using a lambda expression navigate to the page you wanted to navigate: e.Uri. Also set ignoreTransition = true; otherwise you will end up in a loop.
Last but not least: override OnNavigatedFrom and set ignoreTransition back to true.

Related

How to use Adpative banner ads of Google Ad-mob in xamarin.forms app?

I am implementing google's ad-mob in my Xamarin.Forms application and I have used Marctron's plugin to show ads in my app: https://github.com/marcojak/MTAdmob
It works fine with Smart banner ads but if I want to use Adaptive banner ads it's not working. I have done R&D on it but not get any solution. Does anyone know how to implement Adaptive banner
ads in Xamarin.Froms?
Why Adaptive banner?
An adaptive banner makes better use of the available screen size. Plus:
It uses a provided width rather than full screen width, enabling you
to account for display cutouts .
It selects an optimal height for the specific device, rather than
having a constant height across different sized devices, mitigating
the effects of device fragmentation.
To show ads I have used this code:
In Xaml page:
<ads:MTAdView />
In App.xaml
<Style TargetType = "ads:MTAdView">
<Setter Property = "BackgroundColor" Value = "White" />
<Setter Property = "PersonalizedAds" Value = "true" />
<Setter Property = "AdsId" Value = "{x:Static helpers:AdConfigHelper.BannerAdUnitId}" />
<Setter Property = "IsVisible" Value = "true" />
<Setter Property = "HeightRequest">
<Setter.Value >
<OnPlatform x: TypeArguments = "x:Double" Phone="50" Tablet="90" />
</Setter.Value>
</Setter>
</Style>

Windows phone turnstile feather page transition

Silverlight toolkit provides us only with turnstile transition and not turnstile feather. (The one on the home screen of windows phone 7 where all the tiles flip before the selected one.)
I have looked through the following links and they have not helped me, so I am looking for answers with information not included here:
http://www.windowsphonegeek.com/articles/wp7-transitions-in-depth--key-concepts-and-api
http://blogs.claritycon.com/blog/2010/10/wp7-page-transitions-sample/
http://www.scottlogic.co.uk/blog/colin/2011/03/metro-in-motion-part-2-peel-animations/
http://www.codeproject.com/Articles/117360/Windows-Phone-7-Turnstile-Control-for-Silverlight
The new Windows Phone Toolkit has support for TurnstyleFeatherTransition. http://phone.codeplex.com/
here is how you can implement it.
Step 1 => First go to => App.xaml.cs and change your RootFrame to Transition Frame.
RootFrame = new TransitionFrame();
Step 2 => Go to your page on which you want to implement the TurnstyleFeatherTransition Animation and add this Animation Code that enable the TurnstyleFeatherTransition. Put it just before your RootGrid/Root container
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
Step 3 => Give feather index to controls. by adding the following code.
toolkit:TurnstileFeatherEffect.FeatheringIndex="0"
e.g =>
<Button toolkit:TurnstileFeatherEffect.FeatheringIndex="0" ></Button>
You are good to go :)

How to make loading effect like Office app in wp7?

Once open Office app, the title and elements of panorama "fly" into screen.
How to make this effect in my own app?
You'll want to add a reference to the Silverlight toolkit (also available via nuget), and then it's just some boiler plate code to add the transitions:
Add the assembly namespace:
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
And then add, under the PhoneApplicationPage element:
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
There are other transitions available, and samples available from the Toolkit website...

Manually selecting ListBoxItem

I need to be able to manually select ListBox items in Windows Phone 7. My ListBox contains the following style that uses a WrapPanel
<Style TargetType="ListBox">
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<[WP7Panels:WrapPanel][2] />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
</Style>
so that I can realize the wrapping effect.
When I did this in WPF, I subscribed to ListBox.ItemContainerGenerator.StatusChanged event. In the event handler for this event, I used:
var obj = ListBox.ItemContainerGenerator.ContainerForItem(objInstance)
as ListBoxItem; if (obj != null) {
obj.IsSelected= true; }
I tried doing the same thing for WP7 and noticed that:
ListBox.ItemContainerGenerator no longer exposes StatusChanged event. There is instead an ItemsChanged event, so I handled this instead.
However, when I call ItemContainerGenerator.ContainerForitem(objInstance) or even ItemContainerGenerator.ContainerFromIndex(), I get always get null.
Just to add, I have overriden GetHashCode and Equals on the class which is being presented in the list box.
Ideas please.
I'm not sure if this is the best way of doing this but here is how I would do it:
1) Create a class which inherits INotifyPropertyChanged interface (You can find how to use it easily via google). Wrap your information that you put into your ListBox in that class.
2) Create a IsSelected property for that class.
3) Bind IsSelected property of the class to the IsSelected property of ListBox's items.
4) Now you can just change IsSelected property of the class that you had created whenever you want and everything happens itself.

How to apply turnstile effect for each UI element in a page

When the application starts, I have a splashscreen after which the mainpage.xaml is loaded. The Mainpage has a lot of UI elements such as buttons and textblocks. It takes about a second or two to load this so I thought some animation could fill in the gap. Else it might look a bit awkward.
Windows phone native application such as the messages, uses some default animation when the page opens right, the pivot headers swivels in then followed by the other UI, the door opening kind of thing. After a bit of researchin I found that they are the default fault turnstile animations.
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
So I have put in the above code just above the </phone:PhoneApplicationPage> tag of the MainPage. But the elements of the page do not have the turnstile animation, how can i apply it to the other UI elements in the page?? Could someone guide me on this?
Alfah
What you are referring to is called a "feather turnstile" or "peel" transition.
There are three implementations that I know of:
Colin Eberhardt's "peel" animation as part of his Metro In Motion series (free, includes source)
Clarity Consulting's turnstile transition (free, includes source)
Telerik's RadControls for Windows Phone (not free, no source)
None of the above integration into the toolkit's transition framework. I've considered doing so myself, but never had the time.
The Windows Phone Toolkit also has the TurnstileFeather transition. This basically seems to be activated as follows,
Change App.xaml.cs so that RootFrame = new TransitionFrame()
Include the toolkit in the XAML for the animated page e.g. xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
Include the following XAML just after the opening tag (similar to what you pasted),
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
Finally on each container element place the following attribute toolkit:TurnstileFeatherEffect.FeatheringIndex="0" with the number relating to the order in which you want the elements to peel away in. e.g.
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="0">Cheetah</TextBlock>
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="1">Hare</TextBlock>
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="2">Tortoise</TextBlock>
You can use feather transition on any control like i have used textblock in this example.
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileFeatherTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileFeatherTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
</toolkit:TransitionService.NavigationOutTransition>
if you are using pivot then use this
<controls:Pivot toolkit:TurnstileFeatherEffect.FeatheringIndex="0" Title="MY APPLICATION">
and then use the effect in any control
<TextBlock toolkit:TurnstileFeatherEffect.FeatheringIndex="1" Text="Hello" FontSize="50" VerticalAlignment="Center" HorizontalAlignment="Center"/>

Resources