Windows 8 practical tips series: 9. Use flipview in Windows 8

The flipview control is similar to the page flip control and is a ready-made Page flip button. You only need to add data items to it. This article describes two methods of flipview project and display.

I. flipviewitem

        <FlipView>            <FlipViewItem>                <Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/2/3802/760_300_3802.jpg"/>            </FlipViewItem>            <FlipViewItem>                <Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/3/4023/c_760_300_4023.jpg"/>            </FlipViewItem>            <FlipViewItem>                <Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/3/3673/c_760_300_3673.jpg"/>            </FlipViewItem>            <FlipViewItem>                <Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/7/4017/c_760_300_4017.jpg"/>            </FlipViewItem>            <FlipViewItem>                <Image Stretch="Uniform" Source="http://imgcache.qq.com/club/item/wallpic/items/2/3972/c_760_300_3972.jpg"/>            </FlipViewItem>        </FlipView>

The effect is as follows:

2. Set datatemplate in the foreground and add data items in the background object set mode.

        <FlipView Name="fvShow" Margin="100">            <FlipView.ItemTemplate>                <DataTemplate>                    <Grid>                        <Grid.Background>                            <ImageBrush Stretch="Uniform" ImageSource="{Binding ImgUrl}"/>                        </Grid.Background>                        <TextBlock  Height="30" VerticalAlignment="Top" HorizontalAlignment="Left"                                    Margin="180 300 0 0" FontSize="20" Foreground="Blue" Text="{Binding ImgName}"/>                        <TextBlock  Height="30" VerticalAlignment="Top" HorizontalAlignment="Left"                                    Margin="180 350 0 0" FontSize="20" Foreground="Blue" Text="{Binding ImgAddr}"/>                    </Grid>                </DataTemplate>            </FlipView.ItemTemplate>        </FlipView>

/// <Summary> /// it 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 (); this. fvshow. itemssource = imgmodel. getimgdata () ;}/// <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) {}}/// <summary> /// image entity /// </Summary> public class imgmodel {/// <summary> /// image name // </Summary> Public String imgname {Get; set ;}//< summary> /// image address /// </Summary> Public String imgaddr {Get; set ;} /// <summary> /// image URL /// </Summary> Public String imgurl {Get; set;} public static list  getimgdata () {list  List = new list  (); list. add (New imgmodel () {imgname = "Name: Beijing winter scene", imgaddr = "Address: Beijing", imgurl = "http://imgcache.qq.com/club/item/wallpic/items/2/3922/760_300_3922.jpg"}); list. add (New imgmodel () {imgname = "Name: Shanghai Spring scene", imgaddr = "Address: Shanghai City", imgurl = "http://imgcache.qq.com/club/item/wallpic/items/7/3147/760_300_3147.jpg"}); list. add (New imgmodel () {imgname = "Name: Tianjin autumn scene", imgaddr = "Address: Tianjin City", imgurl = "http://imgcache.qq.com/club/item/wallpic/items/6/3966/c_760_300_3966.jpg"}); list. add (New imgmodel () {imgname = "Name: Hainan Xia Jing", imgaddr = "Address: Hainan City", imgurl = "http://imgcache.qq.com/club/item/wallpic/items/5/3695/760_300_3695.jpg"}); list. add (New imgmodel () {imgname = "Name: Chengdu scenery", imgaddr = "Address: Chengdu City", imgurl = "http://imgcache.qq.com/club/item/wallpic/items/8/2518/760_300_2518.jpg"}); return list ;}}

The effect of this method is as follows:

Click win8flipview.rar to download the source code.