【WP开发】实现Pivot控件单个PivotItem的全屏化

在新浪微博WP7版中有一个蛮酷的特效，就是滑动list的时候直接全屏化界面。

一直想实现这个特效，最终还是类似的实现了这个特效。

 

 

对于ApplicationBar还是很好解决的，直接对IsVisible属性设置为false就能实现，而对上面的Header进行进行隐藏就可以了，经过一番实验貌似用Margin设为负数就能够解决。

 

好接下去看代码：

首先是布局文件。

 

 

<controls:Pivot x:Name="FeaturePivot" Title="{Binding Title}" Foreground="{StaticResource PhoneAccentBrush}">

            <controls:PivotItem x:Name="StoryPivotItem">
                <controls:PivotItem.Header>
                    <TextBlock Text="{Binding Storys.Title}" FontSize="64" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" Foreground="{StaticResource PhoneAccentBrush}"></TextBlock>
                </controls:PivotItem.Header>


                <lw:StoryList x:Name="HomeTimeLine" DataContext="{Binding Storys}" />
            </controls:PivotItem>
</controls:Pivot>

 

这里的lw:StoryList是一个UserControl，里面是一个List和ListItem的模版文本，这里不用去管它。但后面它困扰了我很久。

好，由于这是扩展的交互方式，我们可以不用严格的把BackCode写在ViewModel里，我们就直接写在xaml.cs里就行了。

 

 

        void FullScreenAction()
        {
            if (this.ApplicationBar.IsVisible == false)
                return;
            this.FeaturePivot.Margin = new Thickness(0, -158, 0, 0);
            this.GlobalProgressBar.Margin = new Thickness(0);
            this.ApplicationBar.IsVisible = false;
            this.BackKeyPress += OnFullScreenBackKeyPress;
        }

        void StopFullScreenAction()
        {
            if (this.ApplicationBar.IsVisible == true)
                return;
            this.GlobalProgressBar.Margin = new Thickness(80, 32, 120, 0);
            this.ApplicationBar.IsVisible = true;
            this.FeaturePivot.Margin = new Thickness(0);
            this.BackKeyPress -= OnFullScreenBackKeyPress;
        }

        private void OnFullScreenBackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
        {
            StopFullScreenAction();
            e.Cancel = true;
        }

 

这是最挫的实现方式，直接this.FeaturePivot.Margin = new Thickness(0, -158, 0, 0);设置Margin为负值，能达到全屏的效果，但直接隐藏header用户体验很不好。并且这个时候还是能够左右滑动

PS：这里需要注意按后退键是能够退出全屏的，并在退出时清空BackKeyPress这个Event，防止阻碍用户正常退出App。

 

事情一件一件来，先解决左右滑动的问题。toolkit中有一个控件叫lockablePivot，在这里它就可以用了。

 

将上面的xml代码中的controls:Pivot替换成toolkit:LockablePivot，其他不用变，在backcode中再放入一些代码：

 

 

void FullScreenAction()
        {
            if (this.ApplicationBar.IsVisible == false)
                return;
            this.FeaturePivot.Margin = new Thickness(0, -158, 0, 0);
            this.GlobalProgressBar.Margin = new Thickness(0);
            this.ApplicationBar.IsVisible = false;
            this.FeaturePivot.IsLocked = true; //added code
            this.BackKeyPress += OnFullScreenBackKeyPress;
        }

        void StopFullScreenAction()
        {
            if (this.ApplicationBar.IsVisible == true)
                return;
            this.GlobalProgressBar.Margin = new Thickness(80, 32, 120, 0);
            this.ApplicationBar.IsVisible = true;
            this.FeaturePivot.Margin = new Thickness(0);
            this.FeaturePivot.IsLocked = false; //added code
            this.BackKeyPress -= OnFullScreenBackKeyPress;
        }

        private void OnFullScreenBackKeyPress(object sender, System.ComponentModel.CancelEventArgs e)
        {
            StopFullScreenAction();
            e.Cancel = true;
        }

 只是增加this.FeaturePivot.IsLocked的定值操作就能完美的解决全屏时能滑动的现象。

 

 

 接下来，貌似得加点动画才感觉有较好的用户体验，好，继续，我们会对上面的代码继续优化。

 

 到加动画的时候又犯难了，尼玛查文档发现Storyboard根本不支持Margin属性的DoubleAnimation类型的动画，因为Margin在SL中被定义成一个Object，而DoubleAnimation只能对数值类进行补间动画。

不过还是有方案的，就是用RenderTransform下的CompositeTransform的Translate系列属性。

 

直接看代码。

 

 

<phone:PhoneApplicationPage.Resources>

        <Storyboard x:Name="TitleDispear">
            <DoubleAnimation Duration="0:0:1" To="-158" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
            Storyboard.TargetName="FeaturePivot" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            
        </Storyboard>
        
        <Storyboard x:Name="TitleAppear">
            <DoubleAnimation Duration="0:0:1" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(CompositeTransform.TranslateY)"
            Storyboard.TargetName="FeaturePivot" d:IsOptimized="True">
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
</phone:PhoneApplicationPage.Resources>

<!---------------code---------------->

<toolkit:LockablePivot x:Name="FeaturePivot" Title="{Binding Title}" Foreground="{StaticResource PhoneAccentBrush}">
            <toolkit:LockablePivot.RenderTransform>
                <CompositeTransform />
            </toolkit:LockablePivot.RenderTransform>
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="SelectionChanged">
                    <cmd:EventToCommand Command="{Binding ChangeSelectionCommand}"  CommandParameter="{Binding ElementName=FeaturePivot}" />
                </i:EventTrigger>
            </i:Interaction.Triggers>

            <controls:PivotItem x:Name="StoryPivotItem">
                <controls:PivotItem.RenderTransform>
                    <CompositeTransform />
                </controls:PivotItem.RenderTransform>
                <controls:PivotItem.Header>
                    <TextBlock Text="{Binding Storys.Title}" FontSize="64" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" Foreground="{StaticResource PhoneAccentBrush}"></TextBlock>
                </controls:PivotItem.Header>

                <lw:StoryList x:Name="HomeTimeLine" DataContext="{Binding Storys}" />
            </controls:PivotItem>

<!------------code--------------->

</toolkit:LockablePivot>

 在上面的XML文件中定义了两个Storyboard动画资源，全屏化时让FeaturePivot的TranslateY由0->-158，向上溢出，这样就是实现了header的隐藏，所以TranslateY和margin都是可以隐藏header的，但有一点很大的不同，

 

TranslateY不会改变UIElement的大小，而Margin会改变，负数等于是拉伸大小。于是这里问题就产生了，如果光设置TranslateY会导致整个Pivot下方有一部分空白区域。。。所以要着手解决这个问题，也就是这个问题困然了我很久。。。。

 

看backcode代码：

 

        void FullScreenAction()
        {
            if (this.ApplicationBar.IsVisible == false)
                return;
            this.FeaturePivot.Margin = new Thickness(0, 0, 0, -158);
            this.GlobalProgressBar.Margin = new Thickness(0);
            TitleDispear.Begin();
            this.ApplicationBar.IsVisible = false;
            this.FeaturePivot.IsLocked = true;
            this.BackKeyPress += OnFullScreenBackKeyPress;
        }

        void StopFullScreenAction()
        {
            if (this.ApplicationBar.IsVisible == true)
                return;
            this.GlobalProgressBar.Margin = new Thickness(80, 32, 120, 0);
            this.ApplicationBar.IsVisible = true;
            TitleAppear.Begin();
            this.FeaturePivot.Margin = new Thickness(0);
            this.FeaturePivot.IsLocked = false;
            this.BackKeyPress -= OnFullScreenBackKeyPress;
        } //code

 

 

这里我们再start时先对Pivot的Margin的bottom设置为-158，用户这时候其实是感知不到pivot的大小变化的，因为溢出的看不到，接下来在进行动画的begin操作。就能完美的实现全屏模式了。

 

慢着，如何触发全屏这个动作呢，新浪是这么做的：用户快速下滑List的时候会开启，而上拉时关闭。接下来得加上手势。

 

我们要用到toolkit中的GestureService行为了。

 

前端代码：

 

 

          <controls:PivotItem x:Name="StoryPivotItem">
                <controls:PivotItem.RenderTransform>
                    <CompositeTransform />
                </controls:PivotItem.RenderTransform>
                <controls:PivotItem.Header>
                    <TextBlock Text="{Binding Storys.Title}" FontSize="64" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0,10,0,0" Foreground="{StaticResource PhoneAccentBrush}"></TextBlock>
                </controls:PivotItem.Header>
<!-- 增加下面的语句 -->
                <toolkit:GestureService.GestureListener>
                    <toolkit:GestureListener Flick="OnStoryGestureListenerFlick"/>
                </toolkit:GestureService.GestureListener>
<!-- END -->
                <lw:StoryList x:Name="HomeTimeLine" DataContext="{Binding Storys}" />
            </controls:PivotItem>

 

 

BackCode:

 

 

        private void OnStoryGestureListenerFlick(object sender, FlickGestureEventArgs e)
        {
            if (SettingsHelper.GetFullScreenMode() == "0")
                return;
            if (e.Direction == System.Windows.Controls.Orientation.Horizontal) //判断手势方向
                return;
            //if (e.Angle < 260 || e.Angle > 280) //角度判断，可以不用
            //    return;
            if (e.VerticalVelocity < 0) //垂直速度判断
            {
                FullScreenAction();
            }
            else
            {
                StopFullScreenAction();
            }
        }

 

 在前端中加入上面的语句来声明一个手势bind，在backcode中进行ActionBind，SettingsHelper.GetFullScreenMode()是设置信息，默认是开启的。

 其他的看注释。

 

好，这样就差不多实现了新浪微博类似的全屏模式。。。出个效果图（顺便宣传一下来往~~，哇咔咔）

 

普通界面：

 

 

 换肤加全屏界面：

 

 

 

Hummm，尼玛还是全屏神马的才能看得更多嘛！！