FlipView creat Image FlipView / Image Slide on Windows Store Apps (C#)

ใน
FlipView สร้าง Image FlipView / Image Slide บน Windows Store Apps C#
สำหรับ FlipView บน Windows Store Apps ใช้สำหรับสร้างรูปแบบการแสดงผลเหมือนกับ Slide คือสามารถกำหนด Layer ของ Control ได้หลาย ๆ ชั้นซ้อนกัน และสามารถทำการแสดงผล Slide ได้ทีล่ะหนึ่ง Slide 
พร้อมกับการ เลื่อน (Next) หรือ (Back) เพื่อดู Slide อื่น ๆ ได้เช่นเดียวกัน ซึ่งเหมาะสำหรับทำเป็น Image Slide หรือ Image Gallery



Windows Store Apps FlipView
1.<FlipView x:Name="name"></FlipView>

สามารถแทรก Control ภายใน FlipView เช่น TextBlock หรือ Image เพื่อสร้างเป็น Image Slide

Example 1 แสดง Image Slide ด้วย FlipView 

MainPage.xaml
01.<Page
02.x:Class="WindowsStoreApps.MainPage"
03.xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04.xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05.xmlns:local="using:WindowsStoreApps"
06.xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07.xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08.mc:Ignorable="d">
09. 
10.<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11.<FlipView x:Name="flpView">
12.<Image Source="Assets/android.jpg"/>
13.<Image Source="Assets/ios.jpg" />
14.<Image Source="Assets/java.jpg" />
15.<Image Source="Assets/windows-azure.jpg" />
16.<Image Source="Assets/windows-phone.jpg" />
17.</FlipView>
18.</Grid>
19.</Page>


Screenshot

Windows Store Apps FlipView

แสดง Image Slide สามารถคลิก Next และ Back 

Windows Store Apps FlipView

ทดสอบการเลื่อน Slide

Example 2 ใช้ FlipView แสดง Image Slide ด้วยการเรียก Image Resource บนภาษา C#

MainPage.xaml
01.<Page
02.x:Class="WindowsStoreApps.MainPage"
03.xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04.xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
05.xmlns:local="using:WindowsStoreApps"
06.xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
07.xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
08.mc:Ignorable="d">
09. 
10.<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
11.<FlipView x:Name="flpView">
12.<DataTemplate>
13.<Image Source="{Binding}" />
14.</DataTemplate>
15.</FlipView>
16.</Grid>
17.</Page>

MainPage.xaml
01.using System;
02.using System.Collections.Generic;
03.using System.IO;
04.using System.Linq;
05.using System.Runtime.InteropServices.WindowsRuntime;
06.using Windows.Foundation;
07.using Windows.Foundation.Collections;
08.using Windows.UI.Xaml;
09.using Windows.UI.Xaml.Controls;
10.using Windows.UI.Xaml.Controls.Primitives;
11.using Windows.UI.Xaml.Data;
12.using Windows.UI.Xaml.Input;
13.using Windows.UI.Xaml.Media;
14.using Windows.UI.Xaml.Navigation;
15. 
16.using Windows.UI.Xaml.Media.Imaging;
17. 
18.// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
19. 
20.namespace WindowsStoreApps
21.{
22./// <summary>
23./// An empty page that can be used on its own or navigated to within a Frame.
24./// </summary>
25.///
26. 
27. 
28.public sealed partial class MainPage : Page
29.{
30.public MainPage()
31.{
32.this.InitializeComponent();
33.}
34. 
35.protected Image getImageSource(string imgPath)
36.{
37.Uri uri = new Uri(BaseUri, imgPath);
38.BitmapImage imgSource = new BitmapImage(uri);
39.Image img = new Image();
40.img.Source = imgSource;
41.return img;
42.}
43. 
44.protected override void OnNavigatedTo(NavigationEventArgs e)
45.{
46.List<Image> item = new List<Image>();
47. 
48.item.Add(getImageSource("Assets/android.jpg"));
49.item.Add(getImageSource("Assets/ios.jpg"));
50.item.Add(getImageSource("Assets/java.jpg"));
51.item.Add(getImageSource("Assets/windows-azure.jpg"));
52.item.Add(getImageSource("Assets/windows-phone.jpg"));
53. 
54.flpView.ItemsSource = item;
55.}
56. 
57.}
58.}


Screenshot

Windows Store Apps FlipView

แสดง Image Slide ด้วย FlipView (เรียก Image Resource จากภาษา C#) 

crd: thaicreate