WP7放大鏡效果實作

最新推荐文章于 2024-09-20 20:44:35 发布

jazwoo

最新推荐文章于 2024-09-20 20:44:35 发布

阅读量569

点赞数

分类专栏： silverlight/WP7 文章标签： image blend windows phone constructor shell 2010

silverlight/WP7 专栏收录该内容

84 篇文章 0 订阅

订阅专栏

今天我們在Windows Phone 7模擬器上面來做個簡單的放大鏡範例

這邊提一下，我在裝好開發工具後，我的VS2010已經可以開發WP7應用程式，但是想要用Blend設計介面時，卻發現找不到Blend forWindows Phone Beta，後來是在執行解除安裝時(參考下圖)，選擇第一個選項，再按下一步就可以看到安裝Blend forWindows Phone Beta的選項，安裝好後就有Blend for Windows Phone Beta了

接下來我們就可以實際開始開發及設計介面了，首先我們先把容器換成Canvas這樣比較容易用程式計算位置

然後我們加幾張圖片到專案裡，接著在畫面上加一個Image控制項並設定好一些屬性

1	<Image x:Name="NormalImg" Height="350" Source="Lighthouse.jpg" Stretch="Fill" Width="450"/>

再來我們加一個Canvas，並套用Scale轉換，這裡我們設成放大2倍的效果，並在Canvas裡面放一張跟剛剛一樣的Image進來，同時我們設定一個圓形當作Canvas的Clip(裁切)，這個圓形就是我們的放大鏡，另外我們也希望放大鏡效果是在滑鼠按下時才看的到，所以就把這個Canvas的Visibility設成Collapsed

1	<Canvas x:Name="ZoomCanvas" Height="350" Width="450" Visibility="Collapsed">
2		<Canvas.RenderTransform>

3	<CompositeTransform ScaleX="2" ScaleY="2"/>
4	</Canvas.RenderTransform>

5	<Canvas.Clip>
6		<EllipseGeometry x:Name="Glass" RadiusX="50" RadiusY="50"/>

7		</Canvas.Clip>
8	<Image Height="350" x:Name="ZoomImg" Width="450" Source="Lighthouse.jpg" Stretch="Fill"/>

</Canvas>

另外我們放個StackPanel在下面，裡面放我們剛剛加進專案的其他Image，這是讓我們可以隨時點擊不同的圖片來替換我們上面有放大鏡效果的那張圖片

1		<StackPanel Height="64" Canvas.Top="567" Width="480" Orientation="Horizontal">
2	<Image x:Name="Image1" Source="Lighthouse.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>

3	<Image x:Name="Image2" Source="W7.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>
4	<Image x:Name="Image3" Source="taipei101.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>

5	<Image x:Name="Image4" Source="Image.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>
6		</StackPanel>

到這裡我們的介面就完成了，然後可以切換到Visual Studio2010來寫程式，我們在最底層的Canvas容器加入三個滑鼠事件，MouseLeftButtonDown、MouseLeftButtonUp、MouseMove，還有就是在我們介面下方StackPanel裡的Image加入MouseLeftButtonDown事件，所有事件我都是從介面XAML檔加入的，而C#完整程式碼如下

01	using System;
02	using System.Collections.Generic;

03	using System.Linq;
04	using System.Net;

05	using System.Windows;
06	using System.Windows.Controls;

07	using System.Windows.Documents;
08	using System.Windows.Input;

09	using System.Windows.Media;
10	using System.Windows.Media.Animation;

11	using System.Windows.Shapes;
12	using Microsoft.Phone.Controls;

13	using System.Windows.Media.Imaging;
14

15	namespace WindowsPhoneApplication1
16	{

17	public partial class MainPage : PhoneApplicationPage
18	{

19	// Constructor
20	public MainPage()

21	{
22	InitializeComponent();

23	}
24

25		bool drag;
26	private void ContentGrid_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)

27	{
28	if (drag)

29	{
30	ZoomCanvas.Visibility = Visibility.Collapsed;

31	drag = false;
32	ContentGrid.ReleaseMouseCapture();

33	}
34	}

35
36	private void ContentGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

37	{
38	double x = e.GetPosition(ContentGrid).X;

39	double y = e.GetPosition(ContentGrid).Y;
40	if (x < 450 && y < 350)

41	{
42	Glass.Center = new Point(x, y);

43	ZoomCanvas.SetValue(Canvas.LeftProperty, -1 * x);
44	ZoomCanvas.SetValue(Canvas.TopProperty, -1 * y);

45	ZoomCanvas.Visibility = Visibility.Visible;
46	drag = true;

47	ContentGrid.CaptureMouse();
48	}

49	}
50

51	private void ContentGrid_MouseMove(object sender, MouseEventArgs e)
52	{

53	double x = e.GetPosition(ContentGrid).X;
54	double y = e.GetPosition(ContentGrid).Y;

55	if (drag && x < 450 && y < 350)
56	{

57		Glass.Center = new Point(x, y);
58	ZoomCanvas.SetValue(Canvas.LeftProperty, -1 * x);

59	ZoomCanvas.SetValue(Canvas.TopProperty, -1 * y);
60		}

61	}
62

63	private void Image1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
64		{

65	Image img = (Image)sender;
66	NormalImg.Source = img.Source;

67	ZoomImg.Source = img.Source;
68	}

69	}
70	}

這裡的程式就是簡單的判斷滑鼠位置然後改變我們放大的那個Canvas位置來做出像放大鏡的效果

完整介面的XAML檔如下

01	<phone:PhoneApplicationPage
02	x:Class="WindowsPhoneApplication1.MainPage"

03	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
04		xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

05	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
06		xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"

07		xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
08	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

09	FontFamily="{StaticResource PhoneFontFamilyNormal}"
10	FontSize="{StaticResource PhoneFontSizeNormal}"

11	Foreground="{StaticResource PhoneForegroundBrush}"
12	SupportedOrientations="Portrait" Orientation="Portrait"

13	mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
14	shell:SystemTray.IsVisible="True">

15	<Canvas x:Name="ContentGrid" Background="Transparent" MouseLeftButtonDown="ContentGrid_MouseLeftButtonDown" MouseLeftButtonUp="ContentGrid_MouseLeftButtonUp" MouseMove="ContentGrid_MouseMove">
16		<Image x:Name="NormalImg" Height="350" Source="Lighthouse.jpg" Stretch="Fill" Width="450"/>

17	<Canvas x:Name="ZoomCanvas" Height="350" Width="450" Visibility="Collapsed">
18		<Canvas.RenderTransform>

19	<CompositeTransform ScaleX="2" ScaleY="2"/>
20		</Canvas.RenderTransform>

21	<Canvas.Clip>
22		<EllipseGeometry x:Name="Glass" RadiusX="50" RadiusY="50"/>

23		</Canvas.Clip>
24	<Image Height="350" x:Name="ZoomImg" Width="450" Source="Lighthouse.jpg" Stretch="Fill"/>

25		</Canvas>
26	<StackPanel Height="64" Canvas.Top="567" Width="480" Orientation="Horizontal">

27	<Image x:Name="Image1" Source="Lighthouse.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>
28	<Image x:Name="Image2" Source="W7.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>

29	<Image x:Name="Image3" Source="taipei101.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>
30	<Image x:Name="Image4" Source="Image.jpg" Stretch="Fill" Cursor="Hand" MouseLeftButtonDown="Image1_MouseLeftButtonDown"/>