PR

好きな写真を指で選んで順番に拡大表示するLeap Motionプログラムを作る

2013年12月6日(金)
薬師寺 国安

ユーザー・コントロール(TransitionEffectImageShow)の作成

「■ユーザー・コントロール(TransitionEffectListBox)の作成」と同じ手順で、「TransitionEffectImageShow.xaml」ユーザー・コントロールを作成します。

コントロールの配置(TransitionEffectImageShow.xaml)

のWidthに700、Heightに500と指定します。次に、に「LayoutRoot」という名前を付けます。その子要素として名前が「Image1」というImageコントロールを配置します。Opacityプロパティに0と指定して透明化しておきます。

書き出されるXAMLはリスト3のようになります。

リスト3 書き出されたXAML(TransitionEffectImageShow.xaml)

<UserControl
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      x:Class="TransitionEffectImageShow" 
      mc:Ignorable="d" d:DesignWidth="300" Width="700" Height="500">
  <Grid x:Name="LayoutRoot">
    <Image  Height="480" HorizontalAlignment="Left"  x:Name="Image1" Stretch="Fill"  Width="640" Opacity="0" />
  </Grid>
</UserControl>

レイアウトは図3のようになります。

図3:コントロールを配置した(TransitionEffectImageShow.xaml)(クリックで拡大)

BlendでのTransitionEffectの設定(TransitionEffectImageShow.xaml)

次に、TransitionEffectの設定をBlendで行います。

まずはBlendを起動します。実際にBlend起動する前に、必ずVS 2012でプロジェクトをビルドしておいてください。

VS 2012からBlendを直接起動する方法もありますが、今回は.exeファイルを実行して起動します。64bitのWindows 8環境であれば、「C:\Program Files (x86)\Microsoft Visual Studio 11.0\Blend\Blend.exe」を実行します。

なお、VS 2012をインストールすると、Blendも自動的にインストールされています。Windows 8のスタート画面にも表示されているはずですので、それをタップして起動しても構いません。

Blendが起動したら、[プロジェクトを開く]から、現在作成している「SlideInTransitionLeapMotion.sln」ファイルを指定して開きます。

アートボードの上に表示されているタブからTransitionEffectImageShowを選択します。

「状態(S)」パネルの「状態グループの追加」アイコンをクリックし(図4)、さらに「状態の追加」アイコンをクリックします(図5)。

「●VisualState状態 記録オン」に変わり、アートボード上の画面全体が赤の枠線で囲まれます。この状態でタイムラインの記録が可能になります。

「SlideIn」という名前を入力します(図6)。「タイムラインを表示する」アイコンをクリックして、タイムラインを表示します(図7)。

図4:「状態(S)」タブの「状態グループの追加」アイコンをクリックする(クリックで拡大)
図5:「状態の追加」アイコンをクリックする(クリックで拡大)
図6:「SlideIn」という名前を入力する(クリックで拡大)
図7:タイムラインを表示する(クリックで拡大)

状態の作成

状態を作成します。「オブジェクトとタイムライン(B)」内のImage1を選択します。

黄色の再生ヘッドが「0」の位置で、プロパティの[外観]内にある[Opacity]の値に「100」を指定します。自動的に100%となりImageの透明化が解除されます(図8)。

図8:再生ヘッドが「0」の位置で、Opacityの値を100%とする(クリックで拡大)

次に、「切り替え効果の追加」をクリックします(図9)。

図9:「切り替え効果の追加」を選択する(クリックで拡大)

表示される項目から、「★→SlideIn」を選択します(図10)。

図10:「★→SlideIn」を選択する(クリックで拡大)

fxアイコンをクリックするとTransitionEffectの一覧が表示されますので、「Slide In」を選択します。時間は1秒を指定します。表示されるSlideDirectionプロパティはデフォルトのLeftToRightのままにしておきます。左から右に向かってスライドします(図11)。

図11:TransitionEffectの一覧から「Slide In」を選択し、時間に1秒を指定する(クリックで拡大)

ここで、「●SlideIn状態記録オン」の●をクリックして、記録オフにします。

図5〜図11の手順で、もうひとつ、SlideIn2という状態を追加します。タイムラインへの追加もSlideInの時と全く同じです。「状態(S)」の中にSlideInとSlideIn2という2つの状態が追加されることになります(図12)。

図12:SlideInとSlideIn2という2つの状態が追加された(クリックで拡大)

TransitionEffectの設定は以上で終わりです。Blendを閉じて、VS 2012に戻ります。保存と適用のメッセージが出ますので、保存して適用させます。

TransitionEffectListBoxユーザー・コントロール内にTransitionEffectImageShowユーザー・コントロールを取り込む

まずlocalという名前空間を、MainPage.xaml内の要素内で定義します。xmlns:local=””と入力すると、名前空間の値の一覧が表示されますので、現在作成しているプロジェクト名を選択します(図13)。

図13:localという名前空間を定義する(クリックで拡大)

名前空間を定義した後、要素を記述している下に

図14:TransitionEffectListBox.xaml 内にTransitionEffectImageShow .xamlを取り込む(クリックで拡大)

Widthに640、Heightに480を指定し、x:NameにImageShowAreaと指定します。適当な位置に配置してください。このサンプルでは下記のようなコードになります。

<local:TransitionEffectImageShow x:Name="ImageShowArea" Width="640" Height="480" Margin="464,10,96,310"/>(図15)
図15:ListBoxコントロールの横にTransitionEffectImageShowユーザー・コントロールを配置した(クリックで拡大)

Think IT会員限定特典
  • 好きな写真を指で選んで順番に拡大表示するLeap Motionプログラム

    『新世代モーションコントローラー Leap Motion -Visual Basicによる実践プログラミング-』 第10回のサンプルプログラムです。
薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

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