<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 will animate as the standard pivot animation.
If you don‘t want the user to be able to flick and rather control the two states programmatically then you can simply add IsHitTestVisible="False"
on the root pivot control then set the SelectedIndex
on the pivot to switch between states.