WP7放大鏡效果實作

转载 2012年03月30日 23:39:26


今天我們在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進來,同時我們設定一個圓形當作CanvasClip(裁切),這個圓形就是我們的放大鏡,另外我們也希望放大鏡效果是在滑鼠按下時才看的到,所以就把這個CanvasVisibility設成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"/>

 

9

</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容器加入三個滑鼠事件,MouseLeftButtonDownMouseLeftButtonUpMouseMove,還有就是在我們介面下方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"/>

 

31

            </StackPanel>

32

    </Canvas>   

 

33

</phone:PhoneApplicationPage>

 

最後是幾張在模擬器中執行的畫面:

 

當我們按下滑鼠時就可以看到點擊那個點為中心的放大效果

 

 

也可以在下面點不同圖片來替換要放大的圖片

 

 

ASP.net中实现放大镜(商场中查看商品)

添加新项 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> ...
  • daipengfei878412
  • daipengfei878412
  • 2011年10月27日 22:22
  • 1047

ListView性能优化(官方建议Making ListView Scrolling Smooth)

链接地址:http://developer.android.com/intl/zh-CN/training/improving-layouts/smooth-scrolling.html The ...
  • Hknock
  • Hknock
  • 2013年01月07日 14:43
  • 1755

WP7入门篇(一)开发环境搭建以及相关学习资源

wp7入门篇,首先整理对于wp7应用开发的准备工作,如下 需要的环境配置 一、在没有安装vs2010最终版情况下可以使用一下方法 Windows Phone SDK 7.1下载地址  visu...
  • changwei07080
  • changwei07080
  • 2012年03月26日 16:26
  • 420

jQuery+HTML5实现图片上传前预览效果

本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下: 这里主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标...
  • stwuyiyu
  • stwuyiyu
  • 2016年12月30日 10:13
  • 432

[API] 實作 MessageBox

Introduction製作一個 Console 專案,來測試訊息視窗。 Example引用 “user32.dll” 參考函式原型int MessageBox( HWND hWnd...
  • jamex
  • jamex
  • 2010年04月26日 13:54
  • 445

css3-划过div放大突出效果

css3-放大突出效果 ul{display: block;} ul li{transition: transform 0.25s ease;float: left;width: 200px;hei...
  • qq_36898102
  • qq_36898102
  • 2017年09月02日 20:53
  • 747

成大资工嵌入式系统开发课程

2014 年進階嵌入式系統開發與實作 課程進度表分組報告 (針對 STM32 週邊): GPIO, USART, ADC, I2C, PWM, USB, SPI, Flash...
  • robertsong2004
  • robertsong2004
  • 2015年02月03日 15:01
  • 1178

js图片局部放大镜效果

在购物网站的展示页面中常常能看到跟随鼠标移动而移动焦点的放大镜效果,实现这种效果的方法很多,这里给出一种。 你需要一张大图和一张缩小尺寸的小图,小图在界面中显示,大图用来构造放大效果。 ...
  • huntererer
  • huntererer
  • 2015年12月10日 01:14
  • 1779

js 实现 图片的局部放大效果

很多的网上商城都有鼠标在图片上移动时能将局部图放大的JS效果,今天自己也做了个,   实现该效果的原理是:在图片原有的宽高大小基础上再重新定义一个放大了X倍的图片,然后通过对大图位置偏移的设置来起到放...
  • kai161
  • kai161
  • 2013年07月19日 17:59
  • 6589

解锁wp7手机实现真机调试

http://www.dotblogs.com.tw/vbwp7/archive/2011/11/13/57683.aspx  注册西安文理学院的edu邮箱   点此注册 补充说明一下: 1....
  • yihu0817
  • yihu0817
  • 2014年12月16日 20:45
  • 390
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WP7放大鏡效果實作
举报原因:
原因补充:

(最多只允许输入30个字)