Windows Store App and PDF Viewer (C#) |
Windows Store App and PDF Viewer (C#) บน App ของ Windows Store เราอาจจะเคยเห็นพวก App ที่ใช้สำหรับอ่าน Ebook หรือ Cartoon โดยรูปแบบการอ่านจะสามารถย่อ-ขยาย หรือเลื่อนไปยังหน้าต่าง ๆ ของ Ebook ได้ ในปัจจุบันการอ่าน Ebook บนอุปกรณ์ Tablets ก็ได้รับความนิยมมาก และในอนาคตก็อาจจะมาทดแทนหนังสือทั่ว ๆ ไปอย่างแน่นอน เพราะลดตนทุน มีความสะดวกและง่ายในการอ่าน ส่วนรูปแบบไฟล์นั้น Ebook ต่าง ๆ เหล่านี้ก็ก็ล้วนอยู่ในรูป PDF ไฟล์ โดยไฟล์เหล่านี้เราสามารถ Download จากแหล่งต่าง ๆ มาจัดเก็ยไว้ในเครื่อง จากนั้นก็ใช้ Apps ที่เรามีอยู่นั้นทำการเปิดไฟล์ PDF เหล่านั้น
ในตัวอย่างนี้จะใช้รูปแบบการแปลงไฟล์ PDF ให้เป็นรูปภาพ โดยจะใช้การอ่านจำนวนหน้าของไฟล์ PDF จากนั้นแปลงเป็น Image แล้วค่อยแสดงผลบน Control ของ FlipView ซึ่งจะทำให้เราสามารถที่จะการ Slide เลื่อนไปยังหน้าต่าง ๆ ได้
รูปแบบการอ่าน PDF ไฟล์บน Windows Store Apps (C#)
บน XAML สร้าง FlipView ซึ่งเป็น Control สำหรับแสดงข้อมูลแบบ Flip (Slide)
<FlipView x:Name="myFlipView">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding Image}" HorizontalAlignment="Center" Height="{Binding Height}" Width="{Binding Width}"></Image>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" CleanUpVirtualizedItemEvent="VirtualizingStackPanel_CleanUpVirtualizedItemEvent" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
</FlipView>
เรียกใช้งาน Class Library ของ Windows.Data.Pdf
using Windows.Data.Pdf;
สร้าง File Picker สำหรับ Browse เพื่อเลือกไฟล์
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.List;
openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
openPicker.FileTypeFilter.Add(".pdf");
StorageFile pdfFile = await openPicker.PickSingleFileAsync();
การอ่านไฟล์ PDF จำนวนหน้าทั้งหมด และแสดงผลบน Flip View
var pdfDocument = await PdfDocument.LoadFromFileAsync(pdfFile);
for (int i = 0; i < pdfDocument.PageCount; i++)
{
items.Add(new FData() { PageNumber = i, PdfDoc = pdfDocument, Width = Window.Current.Bounds.Width, Height = Window.Current.Bounds.Height });
}
myFlipView.ItemsSource = items;
ลองมาดูตัวอย่างแบบเต็ม ๆ
ไฟล์ PDF ที่อยู่บน Desktop ซึ่งประกอบด้วยหลาย ๆ หน้า
Example การเขียน Windows Store Apps อ่าน PDF ไฟล์ มาแสดงบนหน้าจอ ของ Windows Store Apps
ออกแบบหน้าจอดังรูป ซึ่งประกอบด้วย Button และ FlipView
MainPage.xaml
<Page
x:Class="WindowsStoreApps.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WindowsStoreApps"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<FlipView x:Name="myFlipView">
<FlipView.ItemTemplate>
<DataTemplate>
<Grid>
<Image Source="{Binding Image}" HorizontalAlignment="Center" Height="{Binding Height}" Width="{Binding Width}"></Image>
</Grid>
</DataTemplate>
</FlipView.ItemTemplate>
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel AreScrollSnapPointsRegular="True" Orientation="Horizontal" CleanUpVirtualizedItemEvent="VirtualizingStackPanel_CleanUpVirtualizedItemEvent" />
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
</FlipView>
<Button x:Name="btnBrowse" Content="Browse PDF" HorizontalAlignment="Left" Margin="70,38,0,0" VerticalAlignment="Top" FontSize="25" Click="btnBrowse_Click"/>
</Grid>
</Page>
MainPage.xaml.cs
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Devices.Geolocation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Core;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
using Windows.Storage;
using Windows.Storage.AccessCache;
using Windows.Storage.Pickers;
using Windows.Storage.Provider;
using Windows.Storage.Streams;
using Windows.Data.Pdf;
using System.ComponentModel;
using Windows.ApplicationModel;
using System.Collections.ObjectModel;
using Windows.UI.Xaml.Media.Imaging;
// The Blank Page item template is documented at http://go.microsoft.com/fwlink/?LinkId=234238
namespace WindowsStoreApps
{
/// <summary>
/// An empty page that can be used on its own or navigated to within a Frame.
/// </summary>
///
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
ObservableCollection<FData> items = new ObservableCollection<FData>();
private void VirtualizingStackPanel_CleanUpVirtualizedItemEvent(object sender, CleanUpVirtualizedItemEventArgs e)
{
var item = e.Value as FData;
item.Dispose();
}
private async void btnBrowse_Click(object sender, RoutedEventArgs e)
{
FileOpenPicker openPicker = new FileOpenPicker();
openPicker.ViewMode = PickerViewMode.List;
openPicker.SuggestedStartLocation = PickerLocationId.DocumentsLibrary;
openPicker.FileTypeFilter.Add(".pdf");
StorageFile pdfFile = await openPicker.PickSingleFileAsync();
if(pdfFile != null)
{
var pdfDocument = await PdfDocument.LoadFromFileAsync(pdfFile);
for (int i = 0; i < pdfDocument.PageCount; i++)
{
items.Add(new FData() { PageNumber = i, PdfDoc = pdfDocument, Width = Window.Current.Bounds.Width, Height = Window.Current.Bounds.Height });
}
myFlipView.ItemsSource = items;
}
}
}
public class FData : INotifyPropertyChanged
{
public int PageNumber { get; set; }
public PdfDocument PdfDoc { get; set; }
public double Height { get; set; }
public double Width { get; set; }
private ImageSource _image = null;
public ImageSource Image
{
get
{
if (_image == null)
Rendering();
return _image;
}
set
{
_image = value;
}
}
private async void Rendering()
{
using (var page = PdfDoc.GetPage((uint)PageNumber))
{
var renderOption = new PdfPageRenderOptions();
BitmapImage img = new BitmapImage();
renderOption.DestinationHeight = (uint)(Height);
InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();
await page.RenderToStreamAsync(stream, renderOption);
img.SetSource(stream);
_image = img;
if (PropertyChanged != null)
PropertyChanged(this, new PropertyChangedEventArgs("Image"));
_image = null;
}
}
public event PropertyChangedEventHandler PropertyChanged;
internal void Dispose()
{
_image = null;
}
}
}
คลิกที่ปุ่ม Browse แสดง File Picker เพื่อเลือกไฟล์ PDF
เลือกไฟล์ PDF ที่อยู่บน Desktop
จากนั้นโปรแกรมจะแสดง PDF ไฟล์
กรณีที่ PDF มีมากกว่า 1 หน้า สามารถเลื่อนเลื่อนไปดูหน้าถัด ๆ ไปได้ หรือจะย้อนกลับ
.
|
ช่วยกันสนับสนุนรักษาเว็บไซต์ความรู้แห่งนี้ไว้ด้วยการสนับสนุน Source Code 2.0 ของทีมงานไทยครีเอท
|
|
|
By : |
ThaiCreate.Com Team (บทความเป็นลิขสิทธิ์ของเว็บไทยครีเอทห้ามนำเผยแพร่ ณ เว็บไซต์อื่น ๆ) |
|
Score Rating : |
|
|
|
Create/Update Date : |
2014-05-27 11:56:25 /
2017-03-19 15:13:06 |
|
Download : |
No files |
|
Sponsored Links / Related |
|
|
|
|
|
|
|