開発ツール
技術解説
連載 :
  これから始めるWindows Phone プログラミング（基本編）

ページ遷移時にTransition効果を適用する

2011年7月8日(金)
PROJECT KySS
このエントリーをはてなブックマークに追加

書き出されたXAMLコードをリスト2のように編集します。

リスト2 　書き出された編集されたXAMLコード(MainPage.xaml)

（１）Page Transitionを使用するためtoolkitという名前空間を定義します。<phone:PhoneApplicationPage>要素内でxmlns:toolkit=”と入力すると値の一覧が表示されますので、その中からMicrosoft.Phone.Controls(Microsoft.Phone.Controls.Toolkit)を選択します(図5)。「プロジェクト(P)／参照の追加(F)」からMicrosoft.Phone.Controls.Toolkitを追加していなければ、この値は表示されませんので注意してください。
（２）<phone:PhoneApplicationPage.Resources>プロパティ要素内に、x:KeyがButtonTemplateという<DataTemplate>を記述します。<DataTemplate>の子要素として<Button>と<StackPanel>要素を記述します。<StackPanel>要素のOrientationにはHorizontalを指定し、スタックされる要素が水平方向に配置されるようにしておきます。規定値はVerticalで垂直方向に配置されます。
<Button>要素のClickイベントにButton_Clickイベントハンドラを指定しておきます。Tagプロパティには「インデックス」をバインドしておきます。
次に、<StackPanel>要素の子要素として<Image>と<TextBlock>要素を配置します。<Button>要素から見ると、<Image>と<TextBlock>要素は子孫として配置します。<Image>要素のWidthとHeightを指定し、Sourceプロパティに「画像名」をバインドします。Marginには5を指定し、余白を設けます。<TextBlock>要素のTextプロパティには「タイトル」をバインドしておきます。ここでバインドする名称はVBコード内のクラスで定義するプロパティ名です。
（３）ListBoxのItemTemplateに（１）で定義したButtonTemplateを指定し適用します。StaticResourceは定義済みのリソースへの参照を表します。
（４）このサンプルで使用するPage Transitionである、「SwivelTransition」のコードを記述します。
<toolkit:NavigationInTransition>では、画面に入ってきた時のトランジションを定義します。
<toolkit:NavigationOutTransition>では、画面から出ていく時のトランジションを定義します。

<toolkit:NavigationInTransition.Backward />(A)　
のプロパティ要素は、ユーザーがこのページへ移動する、バックナビゲーションをトリガーした時に呼び出されます。

<toolkit:NavigationInTransition.Forward />(B)
のプロパティ要素は、このページには、前方のナビゲーションに移動すると呼び出されます。

<toolkit:NavigationOutTransition.Backward />(C)
のプロパティ要素は、このページから戻るナビゲーションに移動すると呼び出されます。

<toolkit:NavigationOutTransition.Forward />(D)
のプロパティ要素は、このページから前方ナビゲーションに移動すると呼び出されます。

上記の各プロパティ要素内(A～D)に、遷移時に適用するTransitionのモードを<toolkit:SwivelTransition>のModeプロパティに指定します（AA～DD）。Modeプロパティの値はインテリセンスで表示されますので、その中から選択することができます。<toolkit:SwivelTransition>要素の箇所は、適用するTransitionの種類によって変わります(リスト3参照)。
<toolkit:SwivelTransition Mode="BackwardIn"/>(AA)
<toolkit:SwivelTransition Mode="ForwardIn"/>(BB)
<toolkit:SwivelTransition Mode="BackwardOut"/>(CC)
<toolkit:SwivelTransition Mode="ForwardOut"/>(DD)

詳細については、下記のURLを参照してください。
→参照：Windows Phone Navigation, Part 2: Advanced Recipes(英語)

※ダウンロードされたサンプルのMainPage.xaml内には、残りの「Turnstile、Slide、Rotate、Roll」のTransitionコードを記述してのコメントアウトで無効としていますので、コメントアウトを外して動作を確認してください。各Transitionのコードはリスト3のようになります。

3
図5：toolkitという名前空間を定義する（クリックで拡大） 
<phone:PhoneApplicationPage 
  x:Class="WP7_Transition.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
  xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit" ■（１）
  mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
  FontFamily="{StaticResource PhoneFontFamilyNormal}"
  FontSize="{StaticResource PhoneFontSizeNormal}"
  Foreground="{StaticResource PhoneForegroundBrush}"
  SupportedOrientations="Portrait" Orientation="Portrait"
  shell:SystemTray.IsVisible="True">
  
  <phone:PhoneApplicationPage.Resources>　■（２）
    <DataTemplate x:Key="ButtonTemplate">
      <Button Width="400" Click="Button_Click" Tag="{Binding インデックス}">　■（２）
      <StackPanel Orientation="Horizontal">
        <Image Width="160" Height="120" Source="{Binding 画像名}" Margin="5"/>
        <TextBlock Text="{Binding タイトル}" VerticalAlignment="Center"/>
      </StackPanel>
      </Button>
    </DataTemplate>
  </phone:PhoneApplicationPage.Resources>
  
  <!--SwivelTransition-->　■（４）
  <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>　■（４）
      <toolkit:NavigationInTransition.Backward>　■(A)
        <toolkit:SwivelTransition Mode="BackwardIn"/>　■(AA)
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>　■(B)
        <toolkit:SwivelTransition Mode="ForwardIn"/>　■(BB)
      </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
  </toolkit:TransitionService.NavigationInTransition>
  <toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>　■（４）
      <toolkit:NavigationOutTransition.Backward>　■(C)
        <toolkit:SwivelTransition Mode="BackwardOut"/>　■(CC)
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>　■(D)
        <toolkit:SwivelTransition Mode="BackwardOut"/>　■(DD)
      </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
  </toolkit:TransitionService.NavigationOutTransition>
  
  <!--LayoutRoot is the root grid where all page content is placed-->
  <Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

  <!--TitlePanel contains the name of the application and page title-->
  <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
    <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
    <TextBlock x:Name="PageTitle" Text="Page Transition" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
  </StackPanel>
  <ListBox Grid.Row="1" Height="574" HorizontalAlignment="Left" Margin="18,21,0,0" Name="ListBox1" VerticalAlignment="Top" Width="449" ItemTemplate="{StaticResource ButtonTemplate}"/>　■（３）
  <!--ContentPanel - place additional content here-->
</Grid>
  
  <!--Sample code showing usage of ApplicationBar-->
  <!--<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Button 1"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Button 2"/>
      <shell:ApplicationBar.MenuItems>
        <shell:ApplicationBarMenuItem Text="MenuItem 1"/>
        <shell:ApplicationBarMenuItem Text="MenuItem 2"/>
      </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
  </phone:PhoneApplicationPage.ApplicationBar>-->

</phone:PhoneApplicationPage>

リスト3　「Turnstile、Slide、Rotate、Roll」のTransitionコード

■TurnstileTransition■
  <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
        <toolkit:TurnstileTransition Mode="BackwardIn"/>
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
        <toolkit:TurnstileTransition Mode="ForwardIn"/>
      </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
  </toolkit:TransitionService.NavigationInTransition>
  <toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
        <toolkit:TurnstileTransition Mode="BackwardOut"/>
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
        <toolkit:TurnstileTransition Mode="ForwardOut"/>
      </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
  </toolkit:TransitionService.NavigationOutTransition>
  
■SlideTransition■
  <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
        <toolkit:SlideTransition Mode="SlideRightFadeIn"/>
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
        <toolkit:SlideTransition Mode="SlideLeftFadeIn"/>
      </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
  </toolkit:TransitionService.NavigationInTransition>
  <toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
        <toolkit:SlideTransition Mode="SlideRightFadeOut"/>
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
        <toolkit:SlideTransition Mode="SlideLeftFadeOut"/>
      </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
  </toolkit:TransitionService.NavigationOutTransition>
  
■RotateTransition■
  <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
        <toolkit:RotateTransition Mode="In180Clockwise"/>
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
        <toolkit:RotateTransition Mode="Out180Clockwise"/>
      </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
  </toolkit:TransitionService.NavigationInTransition>
  <toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
        <toolkit:RotateTransition Mode="In90Clockwise"/>
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
        <toolkit:RotateTransition Mode="Out90Clockwise"/>
      </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
  </toolkit:TransitionService.NavigationOutTransition>

■RollTransition■
  <toolkit:TransitionService.NavigationInTransition>
    <toolkit:NavigationInTransition>
      <toolkit:NavigationInTransition.Backward>
        <toolkit:RollTransition/>
      </toolkit:NavigationInTransition.Backward>
      <toolkit:NavigationInTransition.Forward>
        <toolkit:RollTransition/>
      </toolkit:NavigationInTransition.Forward>
    </toolkit:NavigationInTransition>
  </toolkit:TransitionService.NavigationInTransition>
  <toolkit:TransitionService.NavigationOutTransition>
    <toolkit:NavigationOutTransition>
      <toolkit:NavigationOutTransition.Backward>
        <toolkit:RollTransition/>
      </toolkit:NavigationOutTransition.Backward>
      <toolkit:NavigationOutTransition.Forward>
        <toolkit:RollTransition/>
      </toolkit:NavigationOutTransition.Forward>
    </toolkit:NavigationOutTransition>
  </toolkit:TransitionService.NavigationOutTransition>
このエントリーをはてなブックマークに追加
設計／開発 / 携帯端末 / Windows Phone / Visual Studio 2010 / SwivelTransition効果 / タッチスクリーン

  • ｢ページ遷移時にTransition効果を適用する｣サンプルプログラム

    Package icon 2194_1.zip
著者
PROJECT KySS

四国のSOHO。薬師寺国安（VBプログラマ）と、薬師寺聖（デザイナ、エンジニア）によるコラボレーション・ユニット。1997年6月、Dynamic HTMLとDirectAnimationの普及を目的として結成。共同開発やユニット名義での執筆活動を行う。XMLおよび.NETに関する著書や連載多数。最新刊は「Silverlight実践プログラミング」両名とも、Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。http://www.PROJECTKySS.NET/

連載バックナンバー

開発ツール技術解説

翻訳された英文の表示と読み上げ

2011/8/26
続きを読む
開発ツール技術解説

AutoCompleteBoxとLongListSelectorコントロールを使う

2011/8/22
続きを読む
開発ツール技術解説

ContextMenuコントロールを使う、加速度センサー、GPSでの位置情報取得

2011/8/19
続きを読む

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています

全文検索エンジンによるおすすめ記事

Topへ戻る
Copyright © 2004-2024 Impress Corporation. An Impress Group Company. All rights reserved.