Windows 8实用窍门系列:9.Windows 8中使用FlipView
2012-11-26 11:44
435 查看
FlipView控件类似于翻页控件,并且是现成的翻页按钮,你只需要为其增加数据项即可。本文讲述两种方式的FlipView项目和展示。
一:直接前台FlipViewItem
效果如下:
二:前台设置DataTemplate,后台实体集方式添加数据项。
看此方式的效果如下:
最后如需源码请点击 Win8FlipView.rar 下载。
一:直接前台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; } }
看此方式的效果如下:
最后如需源码请点击 Win8FlipView.rar 下载。
相关文章推荐
- Windows 8实用窍门系列:14.windows 8中粘贴板(剪切板)的使用
- Windows 8实用窍门系列:1.使用Xaml+C#开发第一个Metro Style应用程序 推荐
- Windows 8实用窍门系列:1.使用Xaml+C#开发第一个Metro Style应用程序
- Windows 8实用窍门系列:20.Windows 8中的GridView使用(二)和DataTemplateSelector
- Windows 8实用窍门系列:19.Windows 8中的GridView使用(一)
- Windows 8实用窍门系列:6.Windows 8中的Popup使用方式
- Windows 8实用窍门系列:20.Windows 8中的GridView使用(二)和DataTemplateSelector
- Windows 8实用窍门系列:6.Windows 8中的Popup使用方式
- Windows 8实用窍门系列:12.windows 8的文件管理---1.File创建和String Stream Buffer方式读写
- Windows 8实用窍门系列【目录索引】
- Windows 8实用窍门系列:4.Windows 8的常用鼠标事件
- 转载 Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))
- Windows 8实用窍门系列:15.Windows 8中的4种视图状态和锁屏通知
- Silverlight实用窍门系列:26.Silverlight多线程技术ThreadPool的使用【附带源码实例】
- Windows 8实用窍门系列:22.Windows 8 的SemanticZoom缩放视图
- Silverlight实用窍门系列:47.Silverlight中元素到元素的绑定,以及ObservableCollection和List的使用区别 推荐
- Windows 8实用窍门系列:2.Windows 8开发知识储备
- Silverlight实用窍门系列:22.Silverlight使用WebService调用C++,Delphi编写的DLL文件【实例源码下载】
- Silverlight实用窍门系列:1.Silverlight读取外部XML加载配置---(使用WebClient读取XAP包同目录下的XML文件))【附带实例源码】
- Silverlight实用窍门系列:39.Silverlight中使用Frame和Page控件制作导航【附带实例源码】