2013年07月24日
川俣晶の縁側ソフトウェア技術雑記total 4565 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">

 

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">

        <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も多い

「わあ、大変そうだ」

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

Facebook

キーワード【 川俣晶の縁側ソフトウェア技術雑記
【技術雑記】の次のコンテンツ
2013年
08月
15日
WindowsストアアプリでのコンストラクタとLoadイベントの違い
3days 0 count
total 4138 count
【技術雑記】の前のコンテンツ
2013年
07月
16日
Windows Store Appでバックボタンの色を強制的に上書きする
3days 0 count
total 3909 count

このコンテンツを書いた川俣 晶へメッセージを送る

[メッセージ送信フォームを利用する]

メッセージ送信フォームを利用することで、川俣 晶に対してメッセージを送ることができます。

この機能は、100%確実に川俣 晶へメッセージを伝達するものではなく、また、確実に川俣 晶よりの返事を得られるものではないことにご注意ください。

このコンテンツへトラックバックするためのURL

http://mag.autumn.org/tb.aspx/20130724190835
サイトの表紙【技術雑記】の表紙【技術雑記】のコンテンツ全リスト 【技術雑記】の入手全リスト 【技術雑記】のRSS1.0形式の情報このサイトの全キーワードリスト 印刷用ページ

管理者: 川俣 晶連絡先

Powered by MagSite2 Version 0.29 (Alpha-Test) Copyright (c) 2004-2018 Pie Dey.Co.,Ltd.