[Windows Store App 開發筆記] 控制物件的縮放平移 PART3

2013-12-05

前言

http://www.dotblogs.com.tw/harrys86016/archive/2013/11/30/132031.aspx

以往我們要讓控制項可以自由的縮放和平移，其中一個方法就是在外面包一層「ScrollView」來實現，今天小編要來教大家另一個好用的方法。

前一篇為大家介紹控制項的多重變形，建立在這個基礎上面，我們利用ManipulationDelta這個事件，來偵測手勢來調整控制項的位置和大小。

這篇也會順便實作Visual Studio 2013中改善的功能─AppBarButton，開發人員可以輕鬆的選擇好看的Icon喔!!

實作

1. 首先我們利用image控制項為例，ManipulationMode設為All代表可以做任何的變形，最後別忘了變形中心RenderTransformOrigin="0.5,0.5"

在這個範例我們利用TranslateTransform以及ScaleTransform，讓使用者能夠同事做到縮放與平移

xaml :

<Image Source="Sponge.jpg" ManipulationMode="All" ManipulationDelta="Image_ManipulationDelta" RenderTransformOrigin="0.5,0.5">
		
    <Image.RenderTransform>
		
        <TransformGroup>
		
            <TranslateTransform x:Name="Translate"/>
		
            <ScaleTransform x:Name="Scale"/>
		
        </TransformGroup>
		
    </Image.RenderTransform>
		
</Image>

2. .接著在cs檔，我們實作ManipulationDelta的事件

xaml.cs :

private void Image_ManipulationDelta(object sender, ManipulationDeltaRoutedEventArgs e)
		
{
		
    Scale.ScaleX *= e.Delta.Scale;
		
    Scale.ScaleY *= e.Delta.Scale;
		
    Translate.X += e.Delta.Translation.X;
		
    Translate.Y += e.Delta.Translation.Y;
		
}

3. 然後利用Windows 8.1 中的新功能來實作一個按鈕，讓使用者能一鍵還原到原來的大小和位置

xaml :

<Page.BottomAppBar>
		
    <AppBar>
		
        <Grid>
		
            <AppBarButton x:Name="Refresh" Icon="Refresh"  Label="Refresh" Click="Refresh_Click"></AppBarButton>
		
        </Grid>
		
    </AppBar>
		
</Page.BottomAppBar>

4. 最後是實作button的click事件

xaml.cs :

private void Refresh_Click(object sender, RoutedEventArgs e)
		
{
		
    Scale.ScaleX = 1;
		
    Scale.ScaleY = 1;
		
    Translate.X = 0;
		
    Translate.Y = 0;
		
}

執行結果：

是不是很簡單呢，之後除了ScrollView，我們就有了另一個選擇囉!!!

回首頁