Windows Phone 8.1 新特性 - 控件之FlipView

本篇为大家介绍 Windows Phone 8.1 中新增的 FlipView 控件,它的中文名字叫做:翻转视图。

虽然听起来有点拗口,但是它的用途大家一定不会陌生。在 Windows Phone 8 中,我们经常会为应用首次启动时加一个引导页,几张引导图片滑动来显示,最后点击确定进入应用。我们会为它写一个控件来实现,而FlipView 可以轻松的完成这一功能。FlipView不止可以作为图片浏览控件,同时还可以作为文本切换,步骤切换等等。下面我们先来看一个简单的例子:

<FlipView>
    <TextBlock Text="1" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="200"/>
    <TextBlock Text="2" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="200"/>
    <TextBlock Text="3" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="200"/>
</FlipView>

我们给FlipView添加了三个元素,分别是1,2 和 3。来看看运行效果:

如上图中,我们通过水平滑动来显示1,2 和 3,但是不能循环显示,也就是说不能从1向右滑动显示3,或者从3向左滑动显示1。

与其他集合类控件相似,FlipView 支持直接添加元素集合或者将 ItemsSource 绑定到数据源来添加元素。下面我们分别来演示这两种方式:

(1) 直接添加元素集合

<FlipView SelectedIndex="0">
    <TextBlock Text="TextBlock" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="70"/>
    <Image Source="Assets/setting.png" Width="100"/>
    <Border Background="Green" Width="200" Height="200"/>
</FlipView>

我们添加了三个不同类型的元素。同时我们可以通过修改 SelectedIndex 属性来决定初始显示的元素。来看看运行效果:

(2) 通过ItemsSource属性绑定

<FlipView x:Name="demoFlipView">
    <FlipView.ItemTemplate>
        <DataTemplate>
            <Grid Background="YellowGreen">
                <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding DemoContent}" FontSize="60"/>
            </Grid>
        </DataTemplate>
    </FlipView.ItemTemplate>
    <FlipView.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Vertical"/>
        </ItemsPanelTemplate>
    </FlipView.ItemsPanel>
</FlipView>

我们为 FlipView 指定了 ItemTemplate 和 ItemsPanel。其中 ItemsPanel 为纵向排列的 StackPanel,这样我们就可以通过上下滑动的方式来显示元素了。来看看后台代码中的数据绑定:

protected override async void OnNavigatedTo(NavigationEventArgs e)
{
    List<Demo> demoList = new List<Demo>();
    demoList.Add(new Demo() { DemoContent = "First Item"});
    demoList.Add(new Demo() { DemoContent = "Second Item" });
    demoList.Add(new Demo() { DemoContent = "Last Item" });
    demoFlipView.ItemsSource = demoList;
}
public class Demo
{
    public string DemoContent { get; set; }
}

绑定代码很简单,这里不做过多说明,来看看运行效果:

上图中,三个元素通过上下滑动的方式显示出来。同样,我们可以利用代码来控制 FlipView 显示哪个元素。比如一个自动浏览的相册,每隔几秒变换一张图片,到最后一张后,重新再来。来看看代码实现:

DispatcherTimer _timer = new DispatcherTimer();
_timer.Interval = TimeSpan.FromSeconds(1.0);
_timer.Tick += ((sender, e) =>
{
    if (demoFlipView.SelectedIndex < demoFlipView.Items.Count - 1)
        demoFlipView.SelectedIndex++;
    else
        demoFlipView.SelectedIndex = 0;
});
_timer.Start();

如上的代码即可实现 FlipView 的自动切换效果,这里我们不需截图说明了。

好了,到这里我们就把 FlipView 的基本应用介绍完了,希望对大家有帮助,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Google Dart

AngularDart Material Design 记分卡 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

14540
来自专栏腾讯NEXT学位

小程序iOS客户端框架——控件事件逻辑框架与控件原生化(下)

? 小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打...

23040
来自专栏贺贺的前端工程师之路

Angular2 之 结构型指令几个概念

两种用法。(* 与 template) 控制宿主元素的模板。 在哪里去显示,viewcontain 怎么注入,属性的set语法的使用,是便捷的监听属性值变化...

9720
来自专栏知晓程序

如何「掏空」小程序的五层页面限制? | 技术宝典

13130
来自专栏Google Dart

AngularDart Material Design 步进器 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

18220
来自专栏从零开始学自动化测试

Selenium2+python自动化28-table定位

前言 在web页面中经常会遇到table表格,特别是后台操作页面比较常见。本篇详细讲解table表格如何定位。 一、认识table 1.首先看下...

30070
来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

15820
来自专栏前端小叙

vue父组件中获取子组件中的数据

<FormItem label="上传头像" prop="image"> <uploadImg :width="150"...

1.5K100
来自专栏JavaEE

jQuery进阶前言

在《jQuery入门》一文中,记录了jQuery选择器、属性与样式和DOM操作等内容,本文将对jQuery的事件以及Ajax相关知识点进行讲解。接下来就一起来学...

18120
来自专栏coding for love

CSS入门4-引入CSS

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

9330

扫码关注云+社区

领取腾讯云代金券