wp-Pivot 仿新浪微博全屏模式

本文介绍的是仿新浪微博全屏模式，因为wp风格使用Pivot后可浏览范围太少，全屏模式有一定作用。

虽然网上有很多方法，但我当时没注意到、就用自己的方法实现，代码比较臃肿，当也记录一下吧。

xaml部分 ：首先用Blend修改Pivot控件的Style的Template部分 

<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="phone:Pivot">
						<Grid 
							x:Name="PivotControlGrid"
							HorizontalAlignment="{TemplateBinding HorizontalAlignment}"			
							VerticalAlignment="{TemplateBinding VerticalAlignment}">
							<Grid.RowDefinitions>
								<RowDefinition Height="Auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>


							<ItemsPresenter 
								x:Name="PivotItemPresenter" 
								Grid.Row="1"
								Margin="0,0,0,0"/>

							<Grid 
								x:Name="MainPivotHeaders"
								Grid.Row="0">
								<Grid.RenderTransform>
									<CompositeTransform/>
								</Grid.RenderTransform>
								<Grid.RowDefinitions>
									<RowDefinition Height="Auto"/>
									<RowDefinition Height="*"/>
								</Grid.RowDefinitions>

								<ContentControl 
									Grid.Row="0"
									ContentTemplate="{TemplateBinding TitleTemplate}"				
									Content="{TemplateBinding Title}" 
									HorizontalAlignment="Left" 
									Margin="24,17,0,-7" 
									Style="{StaticResource PivotTitleStyle}"/>

								<Primitives:PivotHeadersControl 
									x:Name="HeadersListElement"
									Margin="0"
									Grid.Row="1">
									<Primitives:PivotHeadersControl.RenderTransform>
										<CompositeTransform/>
									</Primitives:PivotHeadersControl.RenderTransform>
								</Primitives:PivotHeadersControl>

							</Grid>

						</Grid>
					</ControlTemplate>
				</Setter.Value>

对比原来的Style只是增加了一个Grid并且命名为MainPivotHeaders，方便我们之后控件Pivot的Header部分。

Pivot部分：

<phone:Pivot x:Name="MainPivot" 
					 Title="仿新浪微博全屏功能" 
					 Loaded="MainPivot_Loaded" 
					 Style="{StaticResource PivotStyle1}">
			
			<phone:PivotItem Header="首页" FontSize="16">
				
				<Grid x:Name="Content"
					  Background="AliceBlue">
					<toolkit:GestureService.GestureListener>
						<toolkit:GestureListener 
							DragCompleted="GestureListener_DragCompleted"/>
					</toolkit:GestureService.GestureListener>
				</Grid>
				
			</phone:PivotItem>

			<phone:PivotItem Header="消息" FontSize="16"/>

			<phone:PivotItem Header="好友" FontSize="16"/>

			<phone:PivotItem Header="微博广场" FontSize="16"/>

（首页的Content应该用LongListSelector的，但这里为了方便使用Grid代替，用法一样。)

后台部分：

1.定义一个标记

bool isFullScreen = false;

2.初始化动画属性

private void InitStoryboardProperty()
		{
			Grid pivotHeaderGrid = this.MainPivot.GetFirstLogicalChildByName("MainPivotHeaders", true) as Grid;
			double pivotHeaderHeight = pivotHeaderGrid.ActualHeight;


			IEnumerable<PivotHeaderItem> pivotHeaderItems = this.MainPivot.GetLogicalChildrenByType<PivotHeaderItem>(true);
			List<TextBlock> pivotHeaderTextBlocks = new List<TextBlock>();
			foreach (PivotHeaderItem phi in pivotHeaderItems)
			{
				TextBlock tb = phi.GetFirstLogicalChildByType<TextBlock>(true);
				tb.RenderTransform = new CompositeTransform();
				pivotHeaderTextBlocks.Add(tb);
			}


			/*给每个TextBlock和Header部分设置动画*/


		}

解析一下：

this.MainPivot.GetFirstLogicalChildByName就是获取我们添加上去的Grid，代表Pivot的Header部分。

然后再获取每个PivotItem里面的TextBlock，给添加上动画就ok了。

动画部分的代码就不上了，也就只是控制每个TextBlock的偏移方向和透明度。

3.通过监控手势设置全屏或非全屏

		private void GestureListener_DragCompleted(object sender, DragCompletedGestureEventArgs e)
		{
			if (e.VerticalVelocity == 0)
			{
				if (e.VerticalChange > 0 || e.HorizontalChange < -50 || e.HorizontalChange > 50)
				{
					this.UnFullScreen();
				}
				else
				{
					this.FullScreen();
				}
			}
		}

		private void FullScreen()
		{
			if (this.isFullScreen == false)
			{
				this.isFullScreen = true;
				this.MainPivot.IsLocked = true;
				this.FullStoryboard.Begin();
			}
		}

		private void UnFullScreen()
		{
			if (this.isFullScreen)
			{
				this.isFullScreen = false;
				this.MainPivot.IsLocked = false;
				this.UnFullStoryboard.Begin();
			}
		}

好了，就这样。。。不上图了，因为看不到效果。。。