[Win8] Windows 8 Development notes (10): flipview and custom value Converter

Create a project named testflip and drag a flipview to mainpage. XAML.

Like the previous control listview, we can set the element format and content of the flipview control in the code.

The complete XAML code is as follows:

<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>

Next, go to the background code and set it.

Add several images to the project. Create a new folder: images, and add the image.

Then, add a string array in the background code to store the paths of these 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; // "blank page" item template in http://go.microsoft.com/fwlink? On linkid = 234238, the introduction namespace testflip {// <summary> /// can be used to itself or navigate to a blank page inside the frame. /// </Summary> Public sealed partial class mainpage: Page {public mainpage () {This. initializecomponent () ;}/// <summary> /// call when this page is to be displayed in the frame. /// </Summary> /// <Param name = "E"> describes how to access event data on this page. Parameter // properties are usually used on the configuration page. </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 ;}}}}

In this way, the corresponding path is displayed in flipview, and a button is available to switch.

Next, we will display these images in flipview.

Create a new class named person. CS file to store the name and path of the person:

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;    }}

Next, modify mainpage. XAML. CS as follows:

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; // "blank page" item template in http://go.microsoft.com/fwlink? On linkid = 234238, the introduction namespace testflip {// <summary> /// can be used to itself or navigate to a blank page inside the frame. /// </Summary> Public sealed partial class mainpage: Page {public mainpage () {This. initializecomponent () ;}/// <summary> /// call when this page is to be displayed in the frame. /// </Summary> /// <Param name = "E"> describes how to access event data on this page. Parameter // properties are usually used on the configuration page. </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 ;}}}}

Finally, set the displayed content on the XAML page:

<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>

You can see the effect of flipview:

However, there is a problem. For example, the text of a textbox can display the age value of the int type. The imagesource attribute of an image can also be assigned a value using a string,

But what should I do if I want to bind a value of the bool type to the visibility attribute (enumeration?

In this case, we need to perform a data conversion.

We add a property in the person class: showimage to determine whether to display the image.

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;    }}

In this case, it is not possible to bind it directly to the visibility of the image, because visibility is of the enumeration type:

At this time, we need a converter.

XX-xx converter, that is, model-UI conversion.

Create a new class named 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 is the data in the model, the returned value is the converted data bool B = (bool) value in the UI; return B? Visibility. visible: visibility. collapsed;} public object convertback (object value, type targettype, object parameter, string language) {// twoway binding visibility v = (visibility) value; return v = visibility. visible ;}}}

Next, configure the settings in the XAML interface:

<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>

In this way, you can use the bool value to control visibility.