生活随笔
收集整理的這篇文章主要介紹了
FlipView和自定义值转换器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
新建一個項目叫做TestFlip，拖動一個FlipView到MainPage.xaml上面。
和前面說到的控件ListView一樣，我們可以在代碼中設置FlipView控件的元素格式和內容。
完整的xaml代碼如下：
[html] view plaincopy
<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，然后將圖片添加進去。
然后在后臺代碼里添加字符串數組用來存儲這些圖片的路徑。
[csharp] view plaincopy
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;????????namespace?TestFlip??{????????????????????????public?sealed?partial?class?MainPage?:?Page??????{??????????public?MainPage()??????????{??????????????this.InitializeComponent();??????????}??????????????????????????????????????????????????????????????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文件用來存儲人物姓名和圖片路徑：
[csharp] view plaincopy
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文件里進行如下修改：
[csharp] view plaincopy
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;????????namespace?TestFlip??{????????????????????????public?sealed?partial?class?MainPage?:?Page??????{??????????public?MainPage()??????????{??????????????this.InitializeComponent();??????????}??????????????????????????????????????????????????????????????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頁面設置一下顯示的內容：
[html] view plaincopy
<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來判斷是否展現圖片。
[csharp] view plaincopy
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。
[csharp] view plaincopy
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)??????????{????????????????????????????bool?b?=?(bool)value;??????????????return?b???Visibility.Visible?:?Visibility.Collapsed;??????????}????????????public?object?ConvertBack(object?value,?Type?targetType,?object?parameter,?string?language)??????????{????????????????????????????Visibility?v?=?(Visibility)value;??????????????return?v?==?Visibility.Visible;??????????}??????}??}??
接下來到xaml界面中繼續設置一下：
[html] view plaincopy
<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了。
總結
以上是生活随笔為你收集整理的FlipView和自定义值转换器的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
