Windows Phone 8.1中的FlipView控制項

來源:互聯網
上載者:User

標籤:windows phone 8.1   flipview   selectedindex   控制flipview滑動的方向   flipview元素之間的自動滑動切換   

滑動視圖控制項FlipView  ----  可以做應用開始的導航展示,也可以用在分頁展示上,作用多多

相對於前面一篇關於WP8.1頁面左右平移切換的部落格,這個方法就來的正統多了,不過這個控制項不光可以設定成左右

視圖切換,還可以垂直滑動切換哦

不過之前的那篇部落格總結了一些實現頁面左右平移切換的方法,關於這個大家倒是可以看一下。

部落格的地址:WP8.1頁面左右平移


首先FlipView有一些重要的認識:

a.SelectedIndex屬性  -----   決定FlipView初始顯示的元素

   SelectedIndex="0"  -----   意味著初始顯示的是FlipView中的第一個資料元素,預設也是0

b.FlipView滑動的方向怎麼控制呢,怎樣才可以左右可以上下呢?如下:

   <FlipView>

   <FlipView.ItemsPanel>

          <ItemsPanelTemplate>

                <StackPanel Orientation="Vertical"/>  可以當看到這邊就設定成上下滑動了,左右為Horitonal

         </ItemsPanelTemplate>

    </FlipView.ItemsPanel>

    </FlipView>


其次FlipView裡面資料來源有兩種:

a.直接寫嘍,如下:

<FlipView SelectedIndex="0" HorizontalAlignment="Center" Width="400" Height="300">    <FlipView.Items>        <FlipViewItem>            <Image Source="Assets/boy1.jpeg" Width="400" Height="300" Stretch="UniformToFill" />        </FlipViewItem>        <FlipViewItem>            <Border Background="Green">                <Border.Child>                    <TextBlock Text="東京食屍鬼" HorizontalAlignment="Center" FontSize="30" Width="400" Height="300" />                </Border.Child>            </Border>        </FlipViewItem>    </FlipView.Items></FlipView>

b.通過後台綁定,下面貼出的原始碼中有體現


好了,終於可以貼代碼了

前台XAML:

<Page    x:Class="TestUnion.FlipViewDemo"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestUnion"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid>        <StackPanel>            <!--FlipView滑動視圖控制項-->            <!--SelectedIndex屬性決定初始顯示元素-->                        <!--直接通過FlipViewItem指定FlipView的每一項-->            <FlipView SelectedIndex="0" HorizontalAlignment="Center" Width="400" Height="300">                <FlipView.Items>                    <FlipViewItem>                        <Image Source="Assets/boy1.jpeg" Width="400" Height="300" Stretch="UniformToFill" />                    </FlipViewItem>                    <FlipViewItem>                        <Border Background="Green">                            <Border.Child>                                <TextBlock Text="東京食屍鬼" HorizontalAlignment="Center" FontSize="30" Width="400" Height="300" />                            </Border.Child>                        </Border>                    </FlipViewItem>                </FlipView.Items>                <FlipView.ItemsPanel>                    <ItemsPanelTemplate>                        <StackPanel Orientation="Horizontal"/>                    </ItemsPanelTemplate>                </FlipView.ItemsPanel>            </FlipView>                        <!--通過後台綁定-->            <FlipView x:Name="flipView" Width="400" Height="300">                <FlipView.ItemContainerStyle>                    <Style TargetType="FlipViewItem">                        <Setter Property="HorizontalAlignment" Value="Center"/>                        <Setter Property="VerticalAlignment" Value="Center"/>                    </Style>                </FlipView.ItemContainerStyle>                <!--上下翻頁-->                <FlipView.ItemsPanel>                    <!--指定FlipView內容怎樣滑動-->                    <ItemsPanelTemplate>                        <StackPanel Orientation="Vertical"/>                    </ItemsPanelTemplate>                </FlipView.ItemsPanel>                <FlipView.ItemTemplate>                    <DataTemplate>                        <StackPanel Background="Green" Orientation="Vertical">                            <TextBlock Text="{Binding name}" FontSize="30"/>                            <TextBlock Text="{Binding age}" FontSize="30"/>                        </StackPanel>                    </DataTemplate>                </FlipView.ItemTemplate>            </FlipView>        </StackPanel>    </Grid></Page>

後台.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)        };    }}

運行:

初始介面:


上部分的FlipView左滑時和左滑結束後:

                      


下面的FlipView右滑時和右滑後:

                


除此之外,我們還可以實現FlipView元素之間的自動滑動切換,只要加一個定時器即可

代碼如下,很簡單易懂:

前台XAML:

<Page    x:Class="TestUnion.FlipViewDemo2"    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"    xmlns:local="using:TestUnion"    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"    mc:Ignorable="d"    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">    <Grid>        <FlipView x:Name="flipView" SelectedIndex="0">            <FlipView.Items>                <FlipViewItem>                    <Image Source="Assets/boy1.jpeg" Stretch="UniformToFill"/>                </FlipViewItem>                <FlipViewItem>                    <Image Source="Assets/boy2.png" Stretch="UniformToFill"/>                </FlipViewItem>                <FlipViewItem>                    <Image Source="Assets/boy3.jpg" Stretch="UniformToFill"/>                </FlipViewItem>            </FlipView.Items>        </FlipView>    </Grid></Page>

後台.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)        {        }    }}

運行:

初始介面:



以下狀態是1切換到2時,2頁面,2切換到3時:

      


最後一個是3畫面:



多動手試試,可以做成各種各樣想要的動畫效果。我覺得蠻好玩的,実に おもしろい

Windows Phone 8.1中的FlipView控制項

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.