[Windows Phone] 使用 TranslateTransform 和 ScaleTransform 讓矩形方塊拖曳放大

2013-11-30

1957
0
Windows Phone
2014-01-20

在本文中使用了 TranslateTransform 和 ScaleTransform 讓矩形方塊拖曳時放大。

[成品]

[範例]

Step1. 新增 Windows Phone 應用程式專案。

Step2. 新增一個 Rectangle 物件，Name="rg"、高50、寬50的黃色矩形。

XAML程式碼：

    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"></Grid>
        <Canvas >
            <Rectangle Name="rg" Width="50" Height="50" Fill="Yellow" StrokeThickness="4" Canvas.Left="36" Canvas.Top="424"/>
        </Canvas>
    </Grid>

Step3. 在 MainPage.xaml.cs 上先增加 2 個命名空間。

using System.Windows.Media;
using System.Windows.Input;

Step4. MainPage.xaml.cs 上的程式碼內容。

    public partial class MainPage : PhoneApplicationPage
    {
        // 建構函式
        private TransformGroup transformGroup = new TransformGroup();

        //建立移動轉換 TranslateTransform 類的物件translation ，可以用來將矩形移動
        private TranslateTransform translation = new TranslateTransform();

        //使用 ScaleTransform 物件類別 scale ，使矩形放大
        private ScaleTransform scale = new System.Windows.Media.ScaleTransform();

        public MainPage()
        {
            InitializeComponent();
            //新增 ManipulationDelta 的事件，會偵測是否觸發滑鼠在畫面中滑動的事件
            rg.ManipulationDelta += 
                new EventHandler<ManipulationDeltaEventArgs>(Drag_ManipulationDelta);

            //把 translation 以及 scale 裝入 transformGroup 內
            transformGroup .Children .Add (scale );
            transformGroup .Children .Add (translation );

            //將轉換群組的 transformGroup 設置給 rect 控制項的 RenderTransform 屬性，這樣才可以移動矩形 rect 
            rg .RenderTransform = transformGroup;
        }

        void Drag_ManipulationDelta(object sender,ManipulationDeltaEventArgs e)
        {
            //放大三倍
            scale.ScaleX = 3;
            scale.ScaleY = 3;

            //移動
            translation.X += e.DeltaManipulation.Translation.X;
            translation.Y += e.DeltaManipulation.Translation.Y;        
        }
    }

[參考與引用]

TranslateTransform 類別

ScaleTransform 類別

[範例下載]

移動放大.rar

回首頁