การใช้งาน PivotViewer กับ RIA Service บน Silverlight 5


SL5PivotViewer

PivotViewer คือหนึ่งในฟีเจอร์ใหม่ที่ถูกเพิ่มเข้ามาใน Silverlight 5…
หากท่านใดอยากรู้จักคอนโทรลตัวยี้ให้มากขึ้นให้เข้าไปดูที่:>

ลองดูตัวอย่างการใช้งาน PivotViewer กับ RIA Service…ดังต่อไปนี้

 

สร้างโปรเจ็กต์

สร้างโปรเจ็กต์ด้วย Silverlight 5…
และเปิดใช้ RIA Service…
ได้โครงสร้างโปรเจ็กต์เหมือนเดิมใน Silverlight 4

23

 

บนโปรเจ็กต์เซอร์ฟเวอร์…

เพิ่ม ADO.NET Entity Data Model(EF)…
โดยคลิกขวา Add > New Item…
ในหน้าต่าง Add New item…พิมพ์ enti เพิ่อกรองเฉพาะ Item EF…
ตั้งชื่อ NortwhwindModel> กด Add

45

เลือกสร้างโมเดลจากฐานข้อมูล….
สร้าง Connection…ติดต่อไปยังแหล่งข้อมูล…
โดยคลิก New Connection…

67

 

ระบุเซอร์ฟเวอรโฮส…บานข้อมูล…กด OK
กด Next…

89

 

เลือกตาราง Products…กด Finish…
เราจะได้ Data Model ของ product…

1011

 

เพิ่ม DomainService

Build โปรเจ็กต์หนึ่งครั้ง…
แล้วเพิ่มไอเทม DomainService…

1214

 

ในหน้าต่าง Add New Domain Service Class…
ติ๊กเลือกอ็อบเจ็กต์ Product…คลิก OK…
Build โซลูชั่น หนึ่งครั้ง…

1516

 

บนโปรเจ็กต์ไคลเอ็นต์…

ไปที่โปรเจ็กต์ไคลเอ็นต์…
เปิดไฟล์ Home.xaml…
ลบคอนโทรล ScrollViewer…ทิ้ง

1718

 

เพิ่มคอนโทรล PivotViewer
ถ้าหาคอนโทรล PivotViewer บน ToolBox ไม่พบ…
ทำการเพิ่มโดยคลิกขวาบน ToolBox>Choose Item…

บนหน้าต่าง Shoose Toolbox Items…
Filter: คำว่า pivot…แล้วเลื่อนหาคอนโทรล PivotViewer…
ติ๊กเลอกแล้วกด OK

2021

 

ลากคอนโทรล PivotViewer ไปวางบนฟอร์ม Silverlight…
ปรับ Layout ให้เต็มพื้นที่…โดยคลิกขวา> Reset Layout

2223

 

โค้ดดิ้ง:

สร้างอีเว้นต์ Loaded…
โดยใช้ Lambda Expression ในการกำหนด delegate logic inline.
Loaded += (s, args) =>{…};

ใส่โค้ดโหลดข้อมูลจาก Domain Service…
ผ่าน DomainContext…

c1

   1: Loaded += (s, args) =>

   2:            {

   3:                NorthwindContext ctx = new NorthwindContext();

   4:                LoadOperation<Product> lo = ctx.Load(ctx.GetProductsQuery());

   5:  

   6:                this.pivotViewer1.ItemsSource = lo.Entities;

   7:            };

 

ทดสอบโปรแกรม:

จะเห็นว่าแสดงแต่รูปภาพไอคอนของ คอนโทรล PivotViewer เท่านั้น…
เนื่องจากเรายังไม่ได้ระบุพรอปเพอร์ตี้ให้มัน…

c2

 

PivotProperties:
ปรับโค้ด xaml ของคอนโทรลจาก Inline Properties เป็น Element Properties

c3c4

 

แล้วใส่ Properties ของ PivotProperties และ ItemTemplates ลงไป

c5

image

 

XAML:

ถ้าต้อง Sort และ Filter ให้ระบุใน PivotViewerStringProperty Options=”CanFilter”…
ในบทความนี้ระบุที่สามฟิลด์นี้ CategoryID, ProductName, SupplierID

   1: <sdk:PivotViewer Name="pivotViewer1">

   2:             <sdk:PivotViewer.PivotProperties>

   3:                 <!--Setting data-->

   4:                 <sdk:PivotViewerStringProperty Id="colCategoryID"

   5:                                                Options="CanFilter"

   6:                                                DisplayName="CategoryID"

   7:                                                Binding="{Binding Path=CategoryID}" />

   8:  

   9:                 <sdk:PivotViewerStringProperty Id="colProductID"

  10:                                                DisplayName="ProductID"

  11:                                                Binding="{Binding Path=ProductID}" />

  12:  

  13:                 <sdk:PivotViewerStringProperty Id="colProductName"

  14:                                                Options="CanFilter"

  15:                                                DisplayName="Product Name"

  16:                                                Binding="{Binding  Path=ProductName}" />

  17:  

  18:                 <sdk:PivotViewerStringProperty Id="colquantityPerUnitColumn"

  19:                                                Binding="{Binding Path=QuantityPerUnit}"

  20:                                                DisplayName="QuantityPerUnit" />

  21:  

  22:                 <sdk:PivotViewerStringProperty Id="reorderLevelColumn"

  23:                                                Binding="{Binding Path=ReorderLevel}"

  24:                                                DisplayName="ReorderLevel" />

  25:  

  26:                 <sdk:PivotViewerStringProperty Id="supplierIDColumn"

  27:                                                Binding="{Binding Path=SupplierID}"

  28:                                                Options="CanFilter"

  29:                                                DisplayName="SupplierID" />

  30:  

  31:                 <sdk:PivotViewerStringProperty Id="unitPriceColumn"

  32:                                                Binding="{Binding Path=UnitPrice}"

  33:                                                DisplayName="UnitPrice" />

  34:  

  35:                 <sdk:PivotViewerStringProperty Id="unitsInStockColumn"

  36:                                                Binding="{Binding Path=UnitsInStock}"

  37:                                                DisplayName="UnitsInStock" />

  38:  

  39:                 <sdk:PivotViewerStringProperty Id="unitsOnOrderColumn"

  40:                                                Binding="{Binding Path=UnitsOnOrder}"

  41:                                                DisplayName="UnitsOnOrder" />

  42:  

  43:                 <sdk:PivotViewerStringProperty Id="coldiscontinuedColumn"

  44:                                                Binding="{Binding Path=Discontinued}"

  45:                                                DisplayName="Discontinued" />

  46:                 

  47:             </sdk:PivotViewer.PivotProperties>

  48:  

  49:             <sdk:PivotViewer.ItemTemplates>

  50:                 <!--Setting data-->

  51:                 <sdk:PivotViewerItemTemplate>

  52:                     <Border Width="Auto"

  53:                             Height="Auto"

  54:                             Background="Azure">

  55:                         <StackPanel Orientation="Vertical">

  56:  

  57:                             <TextBlock x:Name="categoryIDColumn"

  58:                                        Text="{Binding Path=CategoryID}"

  59:                                        Width="Auto" />

  60:                             <TextBlock x:Name="discontinuedColumn"

  61:                                        Text="{Binding Path=Discontinued}"

  62:                                        Width="Auto" />

  63:                             <TextBlock x:Name="productIDColumn"

  64:                                        Text="{Binding Path=ProductID, Mode=OneWay}"

  65:                                        Width="Auto" />

  66:                             <TextBlock x:Name="productNameColumn"

  67:                                        Text="{Binding Path=ProductName}"

  68:                                        Width="Auto" />

  69:                             <TextBlock x:Name="quantityPerUnitColumn"

  70:                                        Text="{Binding Path=QuantityPerUnit}"

  71:                                        Width="Auto" />

  72:                             <TextBlock x:Name="reorderLevelColumn"

  73:                                        Text="{Binding Path=ReorderLevel}"

  74:                                        Width="Auto" />

  75:                             <TextBlock x:Name="supplierIDColumn"

  76:                                        Text="{Binding Path=SupplierID}"

  77:                                        Width="Auto" />

  78:                             <TextBlock x:Name="unitPriceColumn"

  79:                                        Text="{Binding Path=UnitPrice}"

  80:                                        Width="Auto" />

  81:                             <TextBlock x:Name="unitsInStockColumn"

  82:                                        Text="{Binding Path=UnitsInStock}"

  83:                                        Width="Auto" />

  84:                             <TextBlock x:Name="unitsOnOrderColumn"

  85:                                        Text="{Binding Path=UnitsOnOrder}"

  86:                                        Width="Auto" />

  87:  

  88:                         </StackPanel>

  89:                     </Border>

  90:                 </sdk:PivotViewerItemTemplate>

  91:             </sdk:PivotViewer.ItemTemplates>

  92:  

  93:         </sdk:PivotViewer>

 

ทดสอบรันโปรแกรมอีกครั้ง:

คุณจะเห็นข้อมูลแล้ว…

c6

แหล่งข้อมูลอ้างอิง:

 

แหล่งข้อมูลดาวน์โหลด:

https://skydrive.live.com/embedicon.aspx/SourcesCode/2011/Silverlight%205/2011-09-04_Silverlight5withPivotViewer.zip?cid=7d608959d854cb28&sc=documents

เกี่ยวกับ

Nuchit Atjanawat is a Microsoft MVP, GreatFriends Community Leader, WindowsITPro Columnist(Mr.Nano), Silverlight Business Application Instructor, Speaker in various Microsoft events, Author, passionate Blogger and a Software Engineer by profession. He has a very good skill over Silverlight, LightSwitch, C#, XAML & Blend. He shares his technical findings, tutorials in his technical blog. Follow his Blog and Facebook page to be updated on latest articles. - Technical Blog: https://janawat.wordpress.com - WindowsITPro Columnist(Mr.Nano): http://windowsitpro.net - The GreatFriends.Biz Community Discussion Board (nano): http://greatfriends.biz - witter: https://twitter.com/janawat - Facebook Page: https://www.facebook.com/nuchit - Instructor: http://bit.ly/GF250-01, http://bit.ly/GF150-02

เขียนใน Silverlight 5

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

In Archive
%d bloggers like this: