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

最新推荐文章于 2017-08-15 10:37:59 发布
最新推荐文章于 2017-08-15 10:37:59 发布
阅读量100 收藏
点赞数
分类专栏： Windows phone 7 C# 文章标签： windows phone WP C# windows phone7 WP7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyichaodoom3/article/details/84240783
版权

在新浪微博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，尼玛还是全屏神马的才能看得更多嘛！！

 

liyichaodoom3
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现Pivot控件当成主页面案例
04-03
实现Pivot控件当成主页面案例源码，现在很多App都用到了Pivot视图 来当作 整个App主页面。如果你的Pivot视图主页面承载了大量数据的话，你可能会遇到从其他页面返回Pivot主页面时的延迟，过长时间的黑屏导致用户体验...
绑定Pivot控件
12-25
在Windows Phone 7 (WP7)开发中，Pivot控件是一种非常常用且功能强大的用户界面元素，它允许用户通过左右滑动来切换不同的内容区域。"绑定Pivot控件"这一主题涉及到如何将数据有效地与Pivot控件关联，以便在每个...
Windows Phone 实用开发技巧（29）：动态绑定Pivot
weixin_34023982的博客
11-20 92
前几天有个网友问我如何动态绑定Pivot项，即PiovtItem的项是动态的，PivotItem中的数据也是动态的。这个使用MVVM模式可以很方便的实现，在ViewModel中设置一个集合表示当前有多少个Item，集合中的类中含有当前PivotItem中的数据源。下面以一个简单的demo来演示下： 先来看看XAML中是怎么去绑定的 &lt;!--LayoutRoot is the root g...
Windows Phone 的 Pivot 控件体系结构
Kinley.H的专栏
05-08 1123
转自：http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/ff941097(v=vs.105).aspx 适用于： Windows Phone 8 | Windows Phone OS 7.1 Pivot 应用包含一个基础 Pivot 控件，该控件托管内容的各个页面。PivotItem 控件负责显示页面中的内容。您可以使
【WP开发学习笔记】之pivot控件
weixin_30485291的博客
09-27 73
博主wp开发小白，学习中...欢迎交流，微博@马and康 pivot控件中文也称为枢纽，是wp系统中最常用的控件之一，几乎所有个软件多多少少都会运用这个控件，比如设置、日历等等；该控件可以实现页面左右的快速切换，运行也十分流畅。如在设置中通过左右滑动可以切换为应用程序、系统，日历中通过左右滑动可以切换年、月、日； 首先可以通过项目模板直接建立一个pivot应用程序，或者通过拖动工具箱中的p...
PivotGridControl控件应用
lanbooli的专栏
10-31 4278
一、概述        PivotGridControl是DevExpress组件中的一个重要控件，在数据多维分析方面具有强大的功能，它不仅可以分析数据库中的数据，而且还能够做联机分析处理（OLAP），并且支持多种数据仓库。前面的文章中介绍了如何用PivotGridControl制作交叉表部件，在智能窗体上展示交叉报表。本文将继续对PivotGridControl控件的应用技巧进行小结。<
WP7 学习之pivot控件应用
水滴石穿！学习小积累！
01-08 103
Pivot控件用来过滤大量的数据集，在不同的视图中查看它们，或者针对同一个数据切换不同的视图。Pivot控件跟Tab控件很像，但它是专门为Windows Phone和触控界面设计的。它通过视图间的横向互相切换，这样就可以让用户 用内置的触控功能来回导航。 在Windows Phone内置的功能中，E-Mail和Calendar功能就是Pivot的一个应用。   &lt;controls...
wp7 控件练习
12-19
这两个项目是WP开发的基础控件，页面布局和资源字典的练习 WPControls 是wp基础控件练习 SilverlightToolkitControls 是SilverlightToolkit中的控件练习 1. 项目WPControls中包含如下控件使用： 面板类控件 Grid ...
Python 借助DataFrame的pivot进行数据的可视化
12-21
本篇文章将探讨如何利用 DataFrame 的 `pivot` 函数来实现数据的可视化，这对于理解多维数据以及探索数据间的关联至关重要。 首先，让我们详细解释 `pivot` 函数。`pivot` 是 pandas 库中用于重塑数据的一种方法，...
C#实现Excel动态生成PivotTable
09-02
在C#中实现Excel动态生成PivotTable，可以利用第三方库如Epplus，它是一个用于操作Excel文件的强大工具。以下是一些关键知识点和步骤： 1. **Epplus库的使用**： Epplus是一个.NET Framework和.NET Core兼容的库，...
透视图（pivot）数据解析逻辑（一个很low的透视图插件）
讨厌走开啦
08-15 2437
透视图 pivot
Pivot C# WPF 代码添加PivotItem
weixin_30925411的博客
09-14 106
PivotItem new_PivotItem = new PivotItem();//新建Pivotitem ListView new_ListView = new ListView();//新建listview作为PivotItem的内容 ScrollViewer new_ScrollViewer = new Sc...
C# 向PivotItem中添加子控件
ajt1472580369的博客
11-14 105
xaml语言： <controls:PivotItemName="SecondPivotItem"Header="Second"> 　　<ListBox x:Name="SecondListBox" Margin="0,0,-12,0" ItemsSource="{Binding Items}"> ...
UWP中用SplitView和Pivot实现两级目录
bending1218的博客
12-24 2621
两级目录类似以下情况 2015 2015.1 内容1 内容2 内容3 内容x 12 12.1 内容1 内容2 内容3 12.2 内容1 内容2 24 24.1 内容1 内容2 24.2 内容1 内容2 内容3 24.3 内容1 内容2 SplitView控件：有关SplitView的MS文档：SplitView class 由图可以看出SplitView控件由Pane和Cont
推荐一款基于Web的数据透视表控件
hbbsoft的专栏
09-18 1124
推荐一款基于Web的数据透视表控件,希望用得上: Http://www.ePivotTable.com  ePivotTable是一款基于ASP.NET 2.0的，用来展示Microsoft SQL Server 2005 Analisys Service多维数据的透视表控件，具有以下特点：  1.单个ePivotTable中可同时支持多个透视  2.支持KPI和图表显示  3.行
[翻译]WP7 QuickStart-第五篇-Panorama和Pivot控件
weixin_33908217的博客
10-27 87
  原文地址：http://create.msdn.com/en-US/education/quickstarts/Panorama_and_Pivot_Controls   【译者注:这篇文章是翻译自微软官方的WP7 QuickStart的第五篇，讲述WP下的Panorama和Pivot控件，这两个控件是Silverlight里WP中特有的。部分内容加入了自己的理解和表达习惯。而翻译此系列的主要...
红色龙年2024新年工作计划PPT模板
最新发布
07-13
【作品名称】：红色龙年2024新年工作计划PPT模板 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
mysql实现pivot
04-29
在 MySQL 中没有内置的 PIVOT 函数，但可以通过以下方法实现类似于 PIVOT 的功能： 假设有以下表： ```sql CREATE TABLE sales ( year INT, month INT, product_name VARCHAR(20), sales_amount DECIMAL(10, 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值