Windows 8開發入門（九） Windows 8中使用FlipView

FlipView控件類似於翻頁控件，並且是現成的翻頁按鈕，你只需要為其增加數據項即可。本文講述兩種方 式的FlipView項目和展示。

一：直接前台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>

效果如下：

二：前台設置DataTemplate，後台實體集方式添加數據項。

<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>   
    /// 可用於自身或導航至 Frame 內部的空白頁。   
    /// </summary>   
    public sealed partial class MainPage : Page   
    {   
        public MainPage()   
        {   
            this.InitializeComponent();   
            this.fvShow.ItemsSource = ImgModel.GetImgData();   
        }   
       
        /// <summary>   
        /// 在此頁將要在 Frame 中顯示時進行調用。   
        /// </summary>   
        /// <param name="e">描述如何訪問此頁的事件數據。Parameter   
        /// 屬性通常用於配置頁。</param>   
        protected override void OnNavigatedTo(NavigationEventArgs e)   
        {   
        }   
    }   
       
    /// <summary>   
    /// 圖片實體   
    /// </summary>   
    public class ImgModel   
    {   
        /// <summary>   
        /// 圖片名字   
        /// </summary>   
        public string ImgName { get; set; }   
       
        /// <summary>   
        /// 圖片地址   
        /// </summary>   
        public string ImgAddr { get; set; }   
       
        /// <summary>   
        /// 圖片URL   
        /// </summary>   
        public string ImgUrl { get; set; }   
       
        public static List<ImgModel> GetImgData()   
        {   
            List<ImgModel> list = new List<ImgModel>();   
            list.Add(new ImgModel() { ImgName = "名字：北京冬景", ImgAddr = "地址：北京市", 

ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/2/3922/760_300_3922.jpg" });   
            list.Add(new ImgModel() { ImgName = "名字：上海春景", ImgAddr = "地址：上海市", 

ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/7/3147/760_300_3147.jpg" });   
            list.Add(new ImgModel() { ImgName = "名字：天津秋景", ImgAddr = "地址：天津市", 

ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/6/3966/c_760_300_3966.jpg" });   
            list.Add(new ImgModel() { ImgName = "名字：海南夏景", ImgAddr = "地址：海南市", 

ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/5/3695/760_300_3695.jpg" });   
            list.Add(new ImgModel() { ImgName = "名字：成都風景", ImgAddr = "地址：成都市", 

ImgUrl = "http://imgcache.qq.com/club/item/wallpic/items/8/2518/760_300_2518.jpg" });   
            return list;   
        }   
    }

看此方式的效果如下：

最後如需源碼請下載：http://files.cnblogs.com/chengxingliang/Win8FlipView.rar