atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

その11:Flickしよう!SLとはちょっと違うから気をつけて!

Windows 8 Developer Previewなので正式版とは異なる場合があります。
また、Windows Updateが走るときもあるため、エントリ執筆現在の情報をもとにかいています。

Windows PhoneやSilverlightだとManipulationイベントを実行すればフリックができました。
Metro Style Appsではちょっと変わってます。
コードぜんぶ。

MainPage.xaml

<UserControl x:Class="Application15.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="768" d:DesignWidth="1366">

	<Grid x:Name="LayoutRoot" Background="#FF0C0C0C">
		<StackPanel Margin="0" HorizontalAlignment="Center" Width="410" VerticalAlignment="Center">
			<Button x:Name="button" Content="Flick Me" Width="400" Height="400" HorizontalAlignment="Center"
ManipulationMode="TranslateY" ManipulationDelta="Button_ManipulationDelta"/>
			<TextBlock x:Name="maniX" Text="X:" FontSize="48"></TextBlock>
			<TextBlock x:Name="maniY" Text="Y:" FontSize="48"></TextBlock>
		</StackPanel>
	</Grid>
</UserControl>


MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Windows.Foundation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Data;

namespace Application15
{
	partial class MainPage
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void Button_ManipulationDelta(object sender, Windows.UI.Xaml.Input.ManipulationDeltaEventArgs e)
		{
			maniX.Text = "X:" + e.CumulativeManipulation.Translation.X.ToString();
			maniY.Text = "Y:" + e.CumulativeManipulation.Translation.Y.ToString();

			if (e.CumulativeManipulation.Translation.Y > 0)
			{
				button.Content = "Down !";
			}
			else
			{
				button.Content = "Up !";
			}
		}
	}
}


ここで重要なのはButtonコントロールの

ManipulationMode="TranslateY"

このManipulationModeが記述されてないとManipulation系のイベントが走りません。
TranslateYだとY方向だけ値を監視します。
これはWPとかSLにはありませんでした。

実行画面。小さいけど上にフリックするとUp !下にフリックするとDown !って表示されます。
ManipuationModeをY方向のみに指定しているのでXはずっと0のままですね。


ほんとちっちゃいとこでハマるゎぁ。。。