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>

 

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

 

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

 

 

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

 

 

相关文章推荐

wp7电流效果

  • 2013年06月14日 09:28
  • 53KB
  • 下载

WP7-Expression Blend 为Banner Text控件创建动画效果

转自:http://www.devdiv.com/thread-36650-1-1.html   帧定义一个动画效果的开始点和结束点。在Expression Blend中,你通过创建一个stor...

[WP7]实现类似tree效果

#目的 实现tree效果。 #前提条件 需要区分WP7.0和WP7.1+版本。 对于WP7.0版本,可采用Listbox嵌套listbox方法实现; 对于WP7.1+(Mango)版...
  • kokoar
  • kokoar
  • 2011年08月25日 17:02
  • 1516

在WP7上实现Listbox中长按弹出ContextMenu效果

#目标 在WP7中,为了达到长按弹出选项菜单效果,可以采用ContextMenu实现。 #前提条件 带有ContextMenu的toolkit,可以通过访问http://silverlight....

wp7精简版SDK

  • 2013年08月06日 13:52
  • 9.69MB
  • 下载

MyClock_WP7

  • 2012年10月06日 07:34
  • 10.47MB
  • 下载

WP7入门-XAML语法介绍

WP7入门-XAML语法介绍   http://www.silverlightchina.net/html/zhuantixilie/winphone7/2011/0210/5267.html ...

修复zune与wp7的连接问题

  • 2014年04月28日 03:26
  • 340KB
  • 下载

WP7平台常用方法的XML解析

  • 2014年03月06日 13:38
  • 19KB
  • 下载

<WP7>(三)手把手教你写天气预报程序:运用WebClient获取天气和json数据解析

上一节我们练习了UserControl,这次我们就要把UserControl运用到实际的布局上面来。           首先,把MainPage中的原来的测试UserControl的代码删除,在C...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:WP7放大鏡效果實作
举报原因:
原因补充:

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