2013年07月24日

total 5895 count

なぜか落とし穴・Windows Store AppでWidthをコードからアニメーションさせる

Written By: 川俣晶連絡先

「いやー。参った。まさかWidthをコードからアニメーションさせるだけでこんなに手間が掛かるとは」

「アニメーションなら六角大戦で散々やったじゃないか」

「Widthはアニメーションさせていない」

「拡大縮小は使っていたじゃないか」

「それはWidthじゃなくてトランスフォーム系のパラメータだったので別口」

「Widthって幅だろう?　同じやり方ではダメなのかい?」

「ダメだった」

「結論から言うと以下の点に注意が必要だった」

EnableDependentAnimationをtrueにする必要がある

「理由は?」

「Widthって、FrameworkElementクラスのメンバーで、Rectangleクラスなどのコントロールはこれを継承している。継承したクラスのメンバーは別口ってことだ」

「へー」

「とりあえず、アニメーションするページのソースだけ全部この後に付けるよ」

MainPage.Xaml.cs §

using System;

using System.Collections.Generic;

using System.IO;

using System.Linq;

using Windows.Foundation;

using Windows.Foundation.Collections;

using Windows.UI.Xaml;

using Windows.UI.Xaml.Controls;

using Windows.UI.Xaml.Controls.Primitives;

using Windows.UI.Xaml.Data;

using Windows.UI.Xaml.Input;

using Windows.UI.Xaml.Media;

using Windows.UI.Xaml.Navigation;

using Windows.UI.Xaml.Media.Animation;

// 空白ページのアイテムテンプレートについては、http://go.microsoft.com/fwlink/?LinkId=234238 を参照してください

namespace MetroWidthAnimation001

{

/// <summary>

/// それ自体で使用できる空白ページまたはフレーム内に移動できる空白ページ。

/// </summary>

public sealed partial class MainPage : Page

{

public MainPage()

{

this.InitializeComponent();

}

/// <summary>

/// このページがフレームに表示されるときに呼び出されます。

/// </summary>

/// <param name="e">このページにどのように到達したかを説明するイベントデータ。Parameter

/// プロパティは、通常、ページを構成するために使用します。</param>

protected override void OnNavigatedTo(NavigationEventArgs e)

{

}

private void Button_Click(object sender, RoutedEventArgs e)

{

var rect = MyRect;

var storyboard = new Storyboard();

var da = new DoubleAnimation();

Storyboard.SetTarget(da, rect);

Storyboard.SetTargetProperty(da, "Width");

da.EnableDependentAnimation = true;

da.From = rect.Width;

da.To = 0;

da.Duration = TimeSpan.FromSeconds(2);

storyboard.Children.Add(da);

storyboard.Completed += storyboard_Completed;

storyboard.Begin();

}

void storyboard_Completed(object sender, object e)

{

MyRect.Width = 1000;

}

MainPage.Xaml §

<Page

x:Class="MetroWidthAnimation001.MainPage"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

xmlns:local="using:MetroWidthAnimation001"

xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

mc:Ignorable="d">

<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left"

Height="100" Stroke="Black" VerticalAlignment="Top" Width="1000"

Margin="235,264,0,0" x:Name="MyRect"/>

<Button Content="Button" HorizontalAlignment="Left"

VerticalAlignment="Top" Margin="330,439,0,0" Height="220" Width="701"

Click="Button_Click"/>

</Grid>

</Page>

感想 §

「またしても大冒険になってしまった」

「なぜ?」

「Windows Store App関係は検索が難しいんだよ」

「なんで?　ググれば出てこないの?」

「そう」

「理由は?」

Windows Store App(lication)と書いてもmetoroと書いても、普通の単語と重なるので、ノイズが大量に混じる
MSDNで検索するとWindows Store Appに限定しているのに関係情報が山ほどヒットする
サンプルソースに関係無い記述も含んでいる場合が多く、どこが確信だか分かりにくい
WPFやSilverligh関連の情報を混ざりやすいが細部が違いすぎて役に立たない (たとえば、NameScopeクラスはWindows Store Appには存在しないみたいだ)
そもそも日本語の情報が無いことも多い　(英語で検索)
ソーシャル系の情報は、似たような問題の質問に見えて実はぜんぜん関係無いこtも多い

「わあ、大変そうだ」

「山勘でショートカットしながら進むしか無い」