Windows 8实用窍门系列:9.Windows 8中使用FlipView
生活随笔
收集整理的這篇文章主要介紹了
Windows 8实用窍门系列:9.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;}}看此方式的效果如下:
最后如需源碼請點擊?Win8FlipView.rar 下載。
總結
以上是生活随笔為你收集整理的Windows 8实用窍门系列:9.Windows 8中使用FlipView的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 同一个闭区间上有界变差函数的和与积都是有
- 下一篇: Windows Azure 安全最佳实践