程序博客网 > 网络协议实践实验报告

FlipView和自定义值转换器

来源：互联网 发布：网络协议实践实验报告 编辑：程序博客网 时间：2024/05/16 16:00

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

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

完整的xaml代码如下：

[html] view plaincopy
  1. <Page  
  2.     x:Class="TestFlip.MainPage"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:TestFlip"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d">  
  9.   
  10.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
  11.         <FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">  
  12.             <FlipView.ItemTemplate>  
  13.                 <DataTemplate>  
  14.                     <TextBlock Text="{Binding}"/>  
  15.                 </DataTemplate>  
  16.             </FlipView.ItemTemplate>  
  17.         </FlipView>  
  18.     </Grid>  
  19. </Page>  


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

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


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

[csharp] view plaincopy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using Windows.Foundation;  
  6. using Windows.Foundation.Collections;  
  7. using Windows.UI.Xaml;  
  8. using Windows.UI.Xaml.Controls;  
  9. using Windows.UI.Xaml.Controls.Primitives;  
  10. using Windows.UI.Xaml.Data;  
  11. using Windows.UI.Xaml.Input;  
  12. using Windows.UI.Xaml.Media;  
  13. using Windows.UI.Xaml.Navigation;  
  14.   
  15. // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍  
  16.   
  17. namespace TestFlip  
  18. {  
  19.     /// <summary>  
  20.     /// 可用于自身或导航至 Frame 内部的空白页。  
  21.     /// </summary>  
  22.     public sealed partial class MainPage : Page  
  23.     {  
  24.         public MainPage()  
  25.         {  
  26.             this.InitializeComponent();  
  27.         }  
  28.   
  29.         /// <summary>  
  30.         /// 在此页将要在 Frame 中显示时进行调用。  
  31.         /// </summary>  
  32.         /// <param name="e">描述如何访问此页的事件数据。Parameter  
  33.         /// 属性通常用于配置页。</param>  
  34.         protected override void OnNavigatedTo(NavigationEventArgs e)  
  35.         {  
  36.             if (e.NavigationMode == NavigationMode.New)  
  37.             {  
  38.                 string[] myString = new string[] {   
  39.                     "ms-appx:///Images/1.jpg",  
  40.                     "ms-appx:///Images/2.jpg",  
  41.                     "ms-appx:///Images/3.jpg",  
  42.                     "ms-appx:///Images/4.jpg",  
  43.                     "ms-appx:///Images/5.jpg",  
  44.                     "ms-appx:///Images/6.jpg",  
  45.                 };  
  46.   
  47.                 myFlip.ItemsSource = myString;  
  48.             }  
  49.   
  50.         }  
  51.     }  
  52. }  

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

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

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

[csharp] view plaincopy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Threading.Tasks;  
  7.   
  8. namespace TestFlip  
  9. {  
  10.     class Person : INotifyPropertyChanged  
  11.     {  
  12.         private string _name;  
  13.   
  14.         public string Name  
  15.         {  
  16.             get  
  17.             {  
  18.                 return _name;  
  19.             }  
  20.   
  21.             set  
  22.             {  
  23.                 _name = value;  
  24.                 FirePropertyChanged("Name");  
  25.             }  
  26.         }  
  27.   
  28.         private string _imgPath;  
  29.   
  30.         public string ImgPath  
  31.         {  
  32.             get  
  33.             {  
  34.                 return _imgPath;  
  35.             }  
  36.   
  37.             set  
  38.             {  
  39.                 _imgPath = value;  
  40.                 FirePropertyChanged("ImgPath");  
  41.             }  
  42.         }  
  43.   
  44.   
  45.   
  46.   
  47.   
  48.         private void FirePropertyChanged(string propName)  
  49.         {  
  50.             if (PropertyChanged != null)  
  51.             {  
  52.                 PropertyChanged(this, new PropertyChangedEventArgs(propName));  
  53.             }  
  54.         }  
  55.   
  56.         public event PropertyChangedEventHandler PropertyChanged;  
  57.     }  
  58. }  

接下来到MainPage.xaml.cs文件里进行如下修改：
[csharp] view plaincopy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.IO;  
  4. using System.Linq;  
  5. using Windows.Foundation;  
  6. using Windows.Foundation.Collections;  
  7. using Windows.UI.Xaml;  
  8. using Windows.UI.Xaml.Controls;  
  9. using Windows.UI.Xaml.Controls.Primitives;  
  10. using Windows.UI.Xaml.Data;  
  11. using Windows.UI.Xaml.Input;  
  12. using Windows.UI.Xaml.Media;  
  13. using Windows.UI.Xaml.Navigation;  
  14.   
  15. // “空白页”项模板在 http://go.microsoft.com/fwlink/?LinkId=234238 上有介绍  
  16.   
  17. namespace TestFlip  
  18. {  
  19.     /// <summary>  
  20.     /// 可用于自身或导航至 Frame 内部的空白页。  
  21.     /// </summary>  
  22.     public sealed partial class MainPage : Page  
  23.     {  
  24.         public MainPage()  
  25.         {  
  26.             this.InitializeComponent();  
  27.         }  
  28.   
  29.         /// <summary>  
  30.         /// 在此页将要在 Frame 中显示时进行调用。  
  31.         /// </summary>  
  32.         /// <param name="e">描述如何访问此页的事件数据。Parameter  
  33.         /// 属性通常用于配置页。</param>  
  34.         protected override void OnNavigatedTo(NavigationEventArgs e)  
  35.         {  
  36.             if (e.NavigationMode == NavigationMode.New)  
  37.             {  
  38.                 List<Person> people = new List<Person>();  
  39.                 people.Add(new Person() { Name = "Why1", ImgPath = "ms-appx:///Images/1.jpg" });  
  40.                 people.Add(new Person() { Name = "Why2", ImgPath = "ms-appx:///Images/2.jpg" });  
  41.                 people.Add(new Person() { Name = "Why3", ImgPath = "ms-appx:///Images/3.jpg" });  
  42.                 people.Add(new Person() { Name = "Why4", ImgPath = "ms-appx:///Images/4.jpg" });  
  43.                 people.Add(new Person() { Name = "Why5", ImgPath = "ms-appx:///Images/5.jpg" });  
  44.   
  45.                 myFlip.ItemsSource = people;  
  46.             }  
  47.   
  48.         }  
  49.     }  
  50. }  

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

[html] view plaincopy
  1. <Page  
  2.     x:Class="TestFlip.MainPage"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:TestFlip"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d">  
  9.   
  10.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
  11.         <FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">  
  12.             <FlipView.ItemTemplate>  
  13.                 <DataTemplate>  
  14.                     <Grid Background="DarkGray">  
  15.                         <Grid.RowDefinitions>  
  16.                             <RowDefinition></RowDefinition>  
  17.                             <RowDefinition></RowDefinition>  
  18.                         </Grid.RowDefinitions>  
  19.                         <TextBlock Grid.Row="0" Text="{Binding Name}" FontSize="40" TextAlignment="Center"></TextBlock>  
  20.                         <Image Source="{Binding ImagePath}" Grid.Row="1"></Image>  
  21.                     </Grid>  
  22.                 </DataTemplate>  
  23.             </FlipView.ItemTemplate>  
  24.         </FlipView>  
  25.     </Grid>  
  26. </Page>  

便可以看到FlipView的效果了：



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

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

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

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

[csharp] view plaincopy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.ComponentModel;  
  4. using System.Linq;  
  5. using System.Text;  
  6. using System.Threading.Tasks;  
  7.   
  8. namespace TestFlip  
  9. {  
  10.     class Person : INotifyPropertyChanged  
  11.     {  
  12.         private string _name;  
  13.         public string Name  
  14.         {  
  15.             get  
  16.             {  
  17.                 return _name;  
  18.             }  
  19.   
  20.             set  
  21.             {  
  22.                 _name = value;  
  23.                 FirePropertyChanged("Name");  
  24.             }  
  25.         }  
  26.   
  27.         private string _imagePath;  
  28.         public string ImagePath  
  29.         {  
  30.             get  
  31.             {  
  32.                 return _imagePath;  
  33.             }  
  34.   
  35.             set  
  36.             {  
  37.                 _imagePath = value;  
  38.                 FirePropertyChanged("ImgPath");  
  39.             }  
  40.         }  
  41.   
  42.         private bool _showImage;  
  43.         public bool ShowImage  
  44.         {  
  45.             get  
  46.             {  
  47.                 return _showImage;  
  48.             }  
  49.   
  50.             set  
  51.             {  
  52.                 _showImage = value;  
  53.                 FirePropertyChanged("ShowImage");  
  54.             }  
  55.         }  
  56.   
  57.   
  58.   
  59.   
  60.   
  61.         private void FirePropertyChanged(string propName)  
  62.         {  
  63.             if (PropertyChanged != null)  
  64.             {  
  65.                 PropertyChanged(this, new PropertyChangedEventArgs(propName));  
  66.             }  
  67.         }  
  68.   
  69.         public event PropertyChangedEventHandler PropertyChanged;  
  70.     }  
  71. }  

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


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

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

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

[csharp] view plaincopy
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Text;  
  5. using System.Threading.Tasks;  
  6. using Windows.UI.Xaml;  
  7. using Windows.UI.Xaml.Data;  
  8.   
  9. namespace TestFlip  
  10. {  
  11.     class BoolVisibilityConverter : IValueConverter  
  12.     {  
  13.         public object Convert(object value, Type targetType, object parameter, string language)  
  14.         {  
  15.             //value是model中的数据，返回值是转换后UI中的数据  
  16.             bool b = (bool)value;  
  17.             return b ? Visibility.Visible : Visibility.Collapsed;  
  18.         }  
  19.   
  20.         public object ConvertBack(object value, Type targetType, object parameter, string language)  
  21.         {  
  22.             //TwoWay绑定  
  23.             Visibility v = (Visibility)value;  
  24.             return v == Visibility.Visible;  
  25.         }  
  26.     }  
  27. }  

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

[html] view plaincopy
  1. <Page  
  2.     x:Class="TestFlip.MainPage"  
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
  5.     xmlns:local="using:TestFlip"  
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
  8.     mc:Ignorable="d">  
  9.   
  10.     <Page.Resources>  
  11.         <local:BoolVisibilityConverter x:Key="BoolVisibilityConverter" />  
  12.     </Page.Resources>  
  13.       
  14.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
  15.         <FlipView x:Name="myFlip" HorizontalAlignment="Center" VerticalAlignment="Center" Width="600" Height="400">  
  16.             <FlipView.ItemTemplate>  
  17.                 <DataTemplate>  
  18.                     <Grid Background="DarkGray">  
  19.                         <Grid.RowDefinitions>  
  20.                             <RowDefinition></RowDefinition>  
  21.                             <RowDefinition></RowDefinition>  
  22.                         </Grid.RowDefinitions>  
  23.                         <TextBlock Grid.Row="0" Text="{Binding Name}" FontSize="40" TextAlignment="Center"></TextBlock>  
  24.                         <Image Source="{Binding ImagePath}" Visibility="{Binding ShowImage,Converter={StaticResource BoolVisibilityConverter}}" Grid.Row="1"></Image>  
  25.                     </Grid>  
  26.                 </DataTemplate>  
  27.             </FlipView.ItemTemplate>  
  28.         </FlipView>  
  29.     </Grid>  
  30. </Page>  

这样就可以实现用bool值控制Visibility了。
0 0
网络协议实践实验报告 网络协议实践实验报告
原创粉丝点击
热门IT博客
echo.js下载echo.js下载
天刀怎样导入捏脸数据天刀怎样导入捏脸数据
淘宝客挣多少钱一个月
网络摄像头ip查找器app
sql怎么删除指定列
淘宝合约机好吗
usb共享电脑网络
最激励你的一句话 知乎
淘宝收藏在哪里看
免费店铺销售软件
数据库中,元组是什么
淘宝卖的夜磨牙垫好吗
工程造价有什么软件
高校大门设计知乎
js校验身份证号
路径规划常用算法
淘宝手机从华强北发货
大数据实时计算
千元头戴式耳机 知乎
java选择排序算法
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 钱钱钱歌曲 图片钱的图片 钱歌曲 图片钱 钱多 玻尿酸 多少钱 51talk多少钱 瑞蓝3号多少钱 货币定义 货币基金基金 奥德赛 多少钱 钱串 钱乙 钱俶 猫猫兔多少钱一只 北极兔多少钱一只 茶杯兔多少钱一只 公主兔多少钱一只 钱兜的养殖方法 钱力 小七钱包 银联钱包 助钱包 一个钱包 易付宝钱包 银钱包 云钱包app 盛迪嘉钱包 男人钱包 钱包图片 bv钱包 钱包女款 app钱包 钱包网 长款钱包 新钱包 钱包英语 钱包女 钱包英文 下载钱包 钱包男

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里