[Win8]Windows8开发笔记（十）：FlipView和自定义值转换器

最新推荐文章于 2024-03-15 09:38:28 发布
最新推荐文章于 2024-03-15 09:38:28 发布
阅读量150 收藏
点赞数
文章标签： ui

新建一个项目叫做TestFlip，拖动一个FlipView到MainPage.xaml上面。

和前面说到的控件ListView一样，我们可以在代码中设置FlipView控件的元素格式和内容。

完整的xaml代码如下：

<Page
    x:Class="TestFlip.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestFlip"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding}"/>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>


接下来跳转到后台的代码处进行设置。

先将几张图片添加到项目中。新建一个文件夹：Images，然后将图片添加进去。


然后在后台代码里添加字符串数组用来存储这些图片的路径。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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=234238 上有介绍

namespace TestFlip
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。Parameter
        /// 属性通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (e.NavigationMode == NavigationMode.New)
            {
                string[] myString = new string[] { 
                    "ms-appx:///Images/1.jpg",
                    "ms-appx:///Images/2.jpg",
                    "ms-appx:///Images/3.jpg",
                    "ms-appx:///Images/4.jpg",
                    "ms-appx:///Images/5.jpg",
                    "ms-appx:///Images/6.jpg",
                };

                myFlip.ItemsSource = myString;
            }

        }
    }
}

这样可以看到在FlipView中会显示相应的路径，并且有按钮可以切换。

接下来我们要把这些图片在FlipView中显示出来。

新建一个类叫做Person.cs文件用来存储人物姓名和图片路径：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestFlip
{
    class Person : INotifyPropertyChanged
    {
        private string _name;

        public string Name
        {
            get
            {
                return _name;
            }

            set
            {
                _name = value;
                FirePropertyChanged("Name");
            }
        }

        private string _imgPath;

        public string ImgPath
        {
            get
            {
                return _imgPath;
            }

            set
            {
                _imgPath = value;
                FirePropertyChanged("ImgPath");
            }
        }





        private void FirePropertyChanged(string propName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

接下来到MainPage.xaml.cs文件里进行如下修改： 

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
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=234238 上有介绍

namespace TestFlip
{
    /// <summary>
    /// 可用于自身或导航至 Frame 内部的空白页。
    /// </summary>
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        /// <summary>
        /// 在此页将要在 Frame 中显示时进行调用。
        /// </summary>
        /// <param name="e">描述如何访问此页的事件数据。Parameter
        /// 属性通常用于配置页。</param>
        protected override void OnNavigatedTo(NavigationEventArgs e)
        {
            if (e.NavigationMode == NavigationMode.New)
            {
                List<Person> people = new List<Person>();
                people.Add(new Person() { Name = "Why1", ImgPath = "ms-appx:///Images/1.jpg" });
                people.Add(new Person() { Name = "Why2", ImgPath = "ms-appx:///Images/2.jpg" });
                people.Add(new Person() { Name = "Why3", ImgPath = "ms-appx:///Images/3.jpg" });
                people.Add(new Person() { Name = "Why4", ImgPath = "ms-appx:///Images/4.jpg" });
                people.Add(new Person() { Name = "Why5", ImgPath = "ms-appx:///Images/5.jpg" });

                myFlip.ItemsSource = people;
            }

        }
    }
}

最后到xaml页面设置一下显示的内容：

<Page
    x:Class="TestFlip.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestFlip"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="DarkGray">
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Name}" FontSize="40" TextAlignment="Center"></TextBlock>
                        <Image Source="{Binding ImagePath}" Grid.Row="1"></Image>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>

便可以看到FlipView的效果了：



但是有一个问题，比如一个TextBox的Text可以显示int类型的Age数值，一个Image的ImageSource属性也可以用一个string来赋值，

但是如果是一个bool类型的值，想绑定在Visibility属性（枚举）上怎么办呢？

这时我们需要做一个数据转换。

我们在Person类里面添加一个属性：ShowImage来判断是否展现图片。

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace TestFlip
{
    class Person : INotifyPropertyChanged
    {
        private string _name;
        public string Name
        {
            get
            {
                return _name;
            }

            set
            {
                _name = value;
                FirePropertyChanged("Name");
            }
        }

        private string _imagePath;
        public string ImagePath
        {
            get
            {
                return _imagePath;
            }

            set
            {
                _imagePath = value;
                FirePropertyChanged("ImgPath");
            }
        }

        private bool _showImage;
        public bool ShowImage
        {
            get
            {
                return _showImage;
            }

            set
            {
                _showImage = value;
                FirePropertyChanged("ShowImage");
            }
        }





        private void FirePropertyChanged(string propName)
        {
            if (PropertyChanged != null)
            {
                PropertyChanged(this, new PropertyChangedEventArgs(propName));
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;
    }
}

此时如果直接将其绑定到image的Visibility上是不可以的，因为Visibility是枚举类型：


这个时候我们就需要一个转换器。

xx-xx转换器，也就是Model-UI的转换。

新建一个类，命名为：BoolVisibilityConverter.cs。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Data;

namespace TestFlip
{
    class BoolVisibilityConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            //value是model中的数据，返回值是转换后UI中的数据
            bool b = (bool)value;
            return b ? Visibility.Visible : Visibility.Collapsed;
        }

        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            //TwoWay绑定
            Visibility v = (Visibility)value;
            return v == Visibility.Visible;
        }
    }
}

接下来到xaml界面中继续设置一下：

<Page
    x:Class="TestFlip.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestFlip"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">

    <Page.Resources>
        <local:BoolVisibilityConverter x:Key="BoolVisibilityConverter" />
    </Page.Resources>
    
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">
            <FlipView.ItemTemplate>
                <DataTemplate>
                    <Grid Background="DarkGray">
                        <Grid.RowDefinitions>
                            <RowDefinition></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding Name}" FontSize="40" TextAlignment="Center"></TextBlock>
                        <Image Source="{Binding ImagePath}" Visibility="{Binding ShowImage,Converter={StaticResource BoolVisibilityConverter}}" Grid.Row="1"></Image>
                    </Grid>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>
    </Grid>
</Page>

这样就可以实现用bool值控制Visibility了。

iteye_19603
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C++判断Windows系统是Win7、Win8，还是Win10系统（附源码）
dvlinker的技术专栏
05-04 9293
C++判断Windows系统是Win7、Win8，还是Win10系统；判断系统是32位的，还是64位的。
详解C++中的ANSI、Unicode和UTF8三种字符编码及相互转换
最新发布
dvlinker的技术专栏
06-08 1万+
本文详细介绍ANSI、Unicode和UTF8三种字符编码以及它们之间的相互转换，并给出了实际问题实例。
Flip View
03-16
Flip View介绍： 用翻页效果实现视图的切换，类似 Flipboard App 的翻页。小编注：这份代码在Android 4.0 以上的模拟器中测试效果不大好，翻页时，页面图像发生失真效果。
新时尚Windows8开发（20）：FlipView控件
老周——“易之道”
10-12 1万+
FlipView控件和我们常见到的ListView、ListBox控件很像，今天拿它来吹一吹，是因为这个控件还挺新鲜的。   要说用文字来介绍这个控件，还真不够生动也欠缺活泼，不过，其实这个控件咱们还是见得不少的，如果你经常到应用商店下载应用的话，你肯定见过。就是这个：   就是这玩意儿，左右各有一个按钮用来导航视图，每次只能查看一个视图，比较适合用于图片浏览。   废话少说，我们
FlipView使用
weixin_34148508的博客
12-03 239
<FlipView Name="fv" Margin="100,100,0,0" Width="500" Height="200"> <FlipView.ItemTemplate> <DataTemplate> <Grid> ...
Android-EasyFlipView一个快速和简便的翻转视图
08-12
EasyFlipView 一个快速和简便的翻转视图，通过它您可以创建像信用卡，扑克牌等这样双面视图。
FlipView(类似ViewPager的翻页）
07-15
类似VIewPager的翻页，但是肯定是不一样的，效果比较新，下下来看看就知道
FlipView控件开发示例（微软官方Win8 Metro开发示例）
11-09
微软官方提供的Win8 Metro开发示例中，"FlipView控件开发示例"是一个非常实用的学习资源，旨在帮助开发者更好地理解和运用FlipView。 FlipView控件的主要特点和功能包括： 1. **触摸友好**：FlipView设计时充分...
ie8 for win7（windows7旗舰版内提取）
05-25
标题"ie8 for win7（windows7旗舰版内提取）"指出，这个压缩包包含了适用于Windows 7旗舰版的Internet Explorer 8浏览器。这是一款由微软公司开发的网络浏览器，主要用于在Windows 7操作系统上浏览网页。"windows7...
安装win8到U盘
01-09
### 安装Win8到U盘的详细步骤与注意事项 #### 一、准备工作 在开始安装Windows 8到U盘之前，确保做好以下准备工作： - **U盘**: 准备一个容量至少为16GB的U盘，并确保其格式化为NTFS或FAT32格式。 - **Windows 8 ...
FlipViewPager 非常酷炫的可翻动的item的Viewpager自定义控件
10-13
FlipViewPager 非常酷炫的可翻动的item的Viewpager自定义控件
安卓动画效果相关-FlipView目前最流畅的翻转动画效果.zip
07-29
FlipView目前最流畅的翻转动画效果.zip,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
ViewFlip的简单用法
09-23
ViewFlip的简单用法，通过手势来实现动画切换view，
FlipView控件
singhwong
12-03 519
FlipView控件是比较特殊的集合控件，ListBox等控件可以在屏幕上呈现多个项目的，而FlipView控件每次只显示一个项。不能认为FlipView控件和Pivot控件是一样的，尽管二者有相似之处。因为Pivot控件的侧重点是视图之间的切换，而FlipView控件主要展现的是数据项。 FlipView控件使用起来与其他集合控件没有区别，读者通过下面示例就可以轻松掌握。 本示例将在FlipView控件中添加4个Image对象，分别用于显示4张图片。具体的XAML如下： // to do Fli
滑动控件-FlipView
weixin_34122548的博客
09-28 108
<Grid> <FlipView> <FlipView.Items> <FlipViewItem> <Grid> <Image Stretch=...
FlipView: 带给你全新的滚动体验
gitblog_00053的博客
03-15 412
FlipView: 带给你全新的滚动体验 FlipView 是一个轻量级的 JavaScript 库，它提供了独特的翻页效果，让你可以创建出更加引人入胜的网页。通过使用 FlipView，你可以让网站的滚动区域在屏幕上以翻书或翻页的形式移动，这样不仅能够吸引用户的注意力，还能增加互动性。 FlipView 可用于哪些场景？ FlipView 可以广泛应用于各种类型的网站，例如： 产品展示：如果你...
win10 UWP FlipView
lindexi
12-21 4119
FlipView 可以让用户逐个浏览的项目集合 FlipView Grid.Row="0" Height="100" Margin="10,10,10,10"> Image Source="Assets/QQ.png"/> Image Source="Assets/搜狐.png"/> Image Sou
EasyFlipViewPager
未来很长，但我会努力的走下去。
02-20 417
EasyFlipViewPager 项目地址：wajahatkarim3/EasyFlipViewPager  简介：
FlipView 知识准备
weixin_34087503的博客
09-05 103
<FlipView x:Name = "flipView1" Width = "480" Height = "270" BorderBrush = "Black" BorderThickness ="1"> <FlipView.ItemTemplate> <D...
Windows 8 开发全攻略：设计与国际化指南
《Win8开发手册》是一份由微软官方提供的全面指南，旨在帮助开发者理解和创建针对Windows 8操作系统的应用程序。本手册主要关注的是Windows 8的特色设计元素—— Metro风格（也称为Modern UI）应用的开发流程和设计...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值