Windows Phone Sliding Effect

<grid x:name= "Contentpanel" grid.row= "1" margin= "12,0,12,0" background= "Red" >    <grid.rowdefinitions >        <rowdefinition/>        <rowdefinition/>    </Grid.RowDefinitions>    <phone: Pivot margin= "0,-24,0,0" >        <phone:pivotitem background= "Blue" >            <StackPanel>                < TextBlock text= "Transition content 1"/>            </StackPanel>        </phone:PivotItem>        <phone: PivotItem background= "Brown" >            <StackPanel>                <textblock text= "Transition content 2"/>            </StackPanel>        </phone:PivotItem>    </phone:Pivot>    <stackpanel grid.row= "1" margin= "12,0,12,0" >        <textblock text= "Fixed content"/>    </StackPanel></Grid>

　　

Swiping on the top box would animate as the standard pivot animation.

If you don't want the user to being able to flick and rather control the, the states programmatically then you can simply add On the IsHitTestVisible="False" root pivot control then set the SelectedIndex "on the" pivot to switch between states.

Windows Phone Sliding Effect