[Win8]Windows8开发笔记(十):FlipView和自定义值转换器
来源:互联网 发布:mac版idown怎么用 编辑:程序博客网 时间:2024/06/06 02:39
新建一个项目叫做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了。
- [Win8]Windows8开发笔记(十):FlipView和自定义值转换器
- FlipView和自定义值转换器
- 新时尚Windows8开发(20):FlipView控件
- Windows8:FlipView
- [Win8]Windows8开发笔记(九):ListView的使用和数据绑定
- [Win8]Windows8开发笔记(八):数据绑定的基础
- [Win8]Windows8开发入门(三):导航、布局和视图
- [Win8]Windows8开发笔记(一):猜数字大小的游戏
- [Win8]Windows8开发笔记(二):三种基础的布局控件
- [Win8]Windows8开发笔记(三):代码读取图片动态生成页面
- [Win8]Windows8开发笔记(五):变换与投射以及制作旋转的头像
- [Win8]Windows8开发笔记(六):页面导航的基础与深入
- [Win8]Windows8开发笔记(七):页面样式的相关介绍
- [Win8]Windows8开发笔记(十一):动画故事版 StoryBoard的入门介绍
- [Win8]Windows8开发笔记(十二):动画中Transition的使用
- [Win8]Windows8开发入门(二):管理应用生命周期和状态
- [Win8]Windows8开发入门(四):文件访问和选取器
- JSF入门十(自定义转换器)
- javax.naming.InitialContext.lookup("java:comp/env/***")
- mysql int(3)与int(11)的区别
- IOCP相关问题和解决方案
- linux ant 自动打包
- Android学习之 反编译
- [Win8]Windows8开发笔记(十):FlipView和自定义值转换器
- 求子数组的最大和
- log4j.properties log4j 配置
- 2012微软暑期实习生笔试题
- 2013年3月23----使用Java I-Ol流快速搜索手机文件引擎
- RSYNC 所有的参数详解
- 多张图片整合成连续动画
- gcc -I -L -l区别
- 微博转发话题js代码