Windows Phone 8.1中的FlipView控件

青旅半醒 2022-08-06 06:11 3阅读 0赞

滑动视图控件FlipView  ----  可以做应用开始的导航展示，也可以用在分页展示上，作用多多

相对于前面一篇关于WP8.1页面左右平移切换的博客，这个方法就来的正统多了，不过这个控件不光可以设置成左右

视图切换，还可以垂直滑动切换哦

不过之前的那篇博客总结了一些实现页面左右平移切换的方法，关于这个大家倒是可以看一下。

博客的地址：[WP8.1页面左右平移][WP8.1]

首先FlipView有一些重要的认识：

a.SelectedIndex属性  -----   决定FlipView初始显示的元素

SelectedIndex="0"  -----   意味着初始显示的是FlipView中的第一个数据元素，默认也是0

b.FlipView滑动的方向怎么控制呢，怎样才可以左右可以上下呢？如下：

<FlipView.ItemsPanel>

<StackPanel Orientation="Vertical"/>  可以当看到这边就设置成上下滑动了,左右为Horitonal

</ItemsPanelTemplate>

</FlipView.ItemsPanel>

</FlipView>

其次FlipView里面数据来源有两种：

a.直接写喽，如下：

b.通过后台绑定，下面贴出的源代码中有体现

好了，终于可以贴代码了

前台XAML：

后台.cs：

using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍
    
    namespace TestUnion
    {
        /// <summary>
        /// 可用于自身或导航至 Frame 内部的空白页。
        /// </summary>
        public sealed partial class FlipViewDemo : Page
        {
            public FlipViewDemo()
            {
                this.InitializeComponent();
                flipView.ItemsSource = list;
            }
    
            /// <summary>
            /// 在此页将要在 Frame 中显示时进行调用。
            /// </summary>
            /// <param name="e">描述如何访问此页的事件数据。
            /// 此参数通常用于配置页。</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
    
            public class Student
            {
                public string name { get; set; }
                public int age { get; set; }
                public Student(string Name,int Age)
                {
                    name = Name;
                    age = Age;
                }
            }
    
            List<Student> list = new List<Student>
            {
                new Student("金木",20),
                new Student("熏香",21)
            };
    
        }
    }

运行截图：

初始界面：

![20141228213724000][]

上部分的FlipView左滑时和左滑结束后：

![20141228213824150][]                      ![20141228213837129][]

下面的FlipView右滑时和右滑后：

![20141228213917596][]                 ![20141228215639241][]

除此之外，我们还可以实现FlipView元素之间的自动滑动切换，只要加一个定时器即可

代码如下，很简单易懂：

前台XAML:

后台.cs：

using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Runtime.InteropServices.WindowsRuntime;
    using Windows.Foundation;
    using Windows.Foundation.Collections;
    using Windows.UI.Xaml;
    using Windows.UI.Xaml.Controls;
    using Windows.UI.Xaml.Controls.Primitives;
    using Windows.UI.Xaml.Data;
    using Windows.UI.Xaml.Input;
    using Windows.UI.Xaml.Media;
    using Windows.UI.Xaml.Navigation;
    
    // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkID=390556 上有介绍
    
    namespace TestUnion
    {
        /// <summary>
        /// 可用于自身或导航至 Frame 内部的空白页。
        /// </summary>
        public sealed partial class FlipViewDemo2 : Page
        {
            public FlipViewDemo2()
            {
                this.InitializeComponent();
    
                DispatcherTimer timer = new DispatcherTimer();
                timer.Interval = new TimeSpan(0, 0, 2);
                timer.Tick += timer_Tick;
                timer.Start();
            }
    
            void timer_Tick(object sender, object e)
            {
                if(flipView.SelectedIndex<flipView.Items.Count-1)
                {
                    flipView.SelectedIndex++;
                }
                else
                {
                    flipView.SelectedIndex = 0;
                }
            }
    
            /// <summary>
            /// 在此页将要在 Frame 中显示时进行调用。
            /// </summary>
            /// <param name="e">描述如何访问此页的事件数据。
            /// 此参数通常用于配置页。</param>
            protected override void OnNavigatedTo(NavigationEventArgs e)
            {
            }
        }
    }

运行截图：

初始界面：

![20141228215040768][]

以下状态是1切换到2时，2页面，2切换到3时：

![20141228215143671][]    ![20141228215202703][]     ![20141228215214789][]

最后一个是3画面：

![20141228215430796][]

多动手试试，可以做成各种各样想要的动画效果。我觉得蛮好玩的，実に　おもしろい

[WP8.1]: http://blog.csdn.net/u010792238/article/details/41629185
[20141228213724000]: /images/20220806/a11ff73bcc0543b38c084089f8d6fd4d.png
[20141228213824150]: https://img-blog.csdn.net/20141228213824150
[20141228213837129]: /images/20220806/096843bde8f64d2b885f8bd5c45ccbb5.png
[20141228213917596]: https://img-blog.csdn.net/20141228213917596
[20141228215639241]: /images/20220806/5fa9399103bc43fbae2d4d5e86d83b04.png
[20141228215040768]: /images/20220806/c71040eb50f845d18f44873ada3855e6.png
[20141228215143671]: https://img-blog.csdn.net/20141228215143671
[20141228215202703]: https://img-blog.csdn.net/20141228215202703
[20141228215214789]: /images/20220806/97cfcd1f83af4c069e4ba7ed08bd4eed.png
[20141228215430796]: /images/20220806/43007b5a90f44cc68374f0127ea06beb.png