[Silverlight] 用WriteableBitmap對物件做Snapshot(快照)

以前在玩Silverlight 2.0 的時候，那時候公司對我有一個需求…

就是對使用者的操作結果…進行快照..如果那時候是用Flex 就覺得還好…

但是用Silverlight 2.0 真的是花了我一點時間..

 

那時候作法網路上都是說把XMAL 傳回Server讓Server去做..

那時候我就用很糟糕的做法，就是直接Clone物件，讓他看起來很像是快照..

事實上都是實體物件….這是不好的作法，哥哥情非得已…

 

現在到了4.0這需求重新被提起，想不到卻是輕輕鬆鬆簡單幾行…(翻桌..

 

這案例是有三張圖可以可以隨意地拖動，之後我下面有放一張名為imgSync的Image物件..

即時的去sync你的拖曳狀態… 本文重點在如何做出Snapshot如果您對拖曳的效果有問題..

請參考此篇(Blend 做拖曳超簡單)..

 

畫面物件配置..

cvsSnapShop 是一個Canvas物件..裡面包了三張圖..

imgSync 是一個不被cvsSnapShop 給包住得物件，不然進行快照會被拍到…

 

XAML Code 如下:

		<UserControl

		xmlns=""

		xmlns:x=""

		xmlns:i="" 

		xmlns:ei="" 

		x:Class="DragSample.MainPage"

		Width="640" Height="480">

		<Grid x:Name="LayoutRoot" Background="Black"  Width="640" Height="480"   >

		<Canvas x:Name="cvsSnapShop" MouseMove="SnapShop_MouseMove" >

		<Image HorizontalAlignment="Left" Margin="102,48,0,202" Width="150"  Source="avr.jpg" >

		<i:Interaction.Behaviors>

		<ei:MouseDragElementBehavior/>

		i:Interaction.Behaviors>

		Image>

		<Image HorizontalAlignment="Left"  Width="150"  Source="van.jpg" Canvas.Left="274" Canvas.Top="140">

		<i:Interaction.Behaviors>

		<ei:MouseDragElementBehavior/>

		i:Interaction.Behaviors>

		Image>

		<Image HorizontalAlignment="Right" Margin="0,0,0,0" Width="150"  Source="avr.png" Canvas.Left="60" Canvas.Top="305">

		<i:Interaction.Behaviors>

		<ei:MouseDragElementBehavior/>

		i:Interaction.Behaviors>

		Image>

		Canvas>

		<Image Height="120" HorizontalAlignment="Right" Margin="0,0,0,0" Name="imgSync" Stretch="Fill" VerticalAlignment="Bottom" Width="160" />

		Grid>

		UserControl>

 

接下來…我在對 cvsSnapShop  的MouseMove 寫下事件…

		private void SnapShop_MouseMove(object sender, MouseEventArgs e)

		{

		//可被寫入的Bitmap 

		//在Ctor 時傳入 cvsSnapShop物件

		WriteableBitmap bitmap = new WriteableBitmap(cvsSnapShop, null);

		//顯示快照的結果

		this.imgSync.Source = bitmap;

		}

 

沒錯就是兩行就可以做到這種效果…

真是頗方便及實用的功能..

 

簡單就可以寫出感覺很酷的東西…

要時候那時候就有這東西該多好…(淚奔~~

 

 

範例:(請拖曳下方三張圖)