PR

画像のドラッグ、移動、回転、拡大縮小を行う+1つのサンプル

2013年3月8日(金)
薬師寺 国安

コントロールを追加した状態で、ソリューションエクスプローラーからMainPage.xamlを選択し、マウスの右クリックで表示されるメニューから、「Blendで開く(B)」を選択します。

Blend内でCascadingTextBoxの文字色にグラデーションを設定する

Blend内の「オブジェクトとタイムライン(B)」内のコントロールを展開し、CascadingTextBlock1を選択します(図11)。

図11:Blend内の「オブジェクトとタイムライン(B)」内のコントロールを展開し、CascadingTextBlock1を選択した(クリックで拡大)

CascadingTextBlock1が選択された状態で、プロパティの〔ブラシ〕パネルのForegroundを選択し、「グラデーション」アイコンをクリックして、適当なグラデーションを指定します(図12)。

図12:Foregroundにグラデーションを指定した(クリックで拡大)

Blendを閉じてVS2012に戻ります。書き出されたXAMLはリスト3、レイアウトは図13です。

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

  • (1)WinRT XAML Toolkitのコントロールを使用すると、Controlsという名前空間が追加されます。
  • (2)を配置しています。プロパティの[寄せ集め]パネル内のCascadeOutにチェックを付けておきます。CascadeOut=”True”と指定されます。文字がアニメーションを伴って表示された後、アニメーションを伴って消えていきます。CascadeOut=”False”にすると、文字がアニメーションを伴って表示された後、文字は残ったままになります。Textプロパティにアニメーションして表示させたい文字列を指定します。 は実態参照で改行を表します。
  • (3)文字色にグラデーションを指定したために、自動的に書き出されたグラデーションのコードです。
  • (4)「実行」用の
<Page
  x:Class="Win8_WinRTXamlToolkit_CascadingTextBlock.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:Win8_WinRTXamlToolkit_CascadingTextBlock"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  xmlns:Controls="using:WinRTXamlToolkit.Controls"■(1)
mc:Ignorable="d">

  <Grid Background="{StaticResourceApplicationPageBackgroundThemeBrush}">
    <Controls:CascadingTextBlockx:Name="CascadingTextBlock1" HorizontalAlignment="Left" Height="626" Margin="91,19,0,0" VerticalAlignment="Top" Width="1103" FontFamily="Meiryo UI" FontSize="72" CascadeOut="True"  Text="まだ上げ染めし前髪の
林檎のもとに見えし時
前にさしたる花櫛の
華ある君と思いけり
 By 島崎藤村" AnimateOnLoaded="False" >■(2)
      <Controls:CascadingTextBlock.Foreground>■(3)
        <LinearGradientBrushEndPoint="0.5,1" StartPoint="0.5,0">■(3)
          <GradientStop Color="#FFBB3F39" Offset="0.626"/>■(3)
          <GradientStop Color="#FFD8B207" Offset="0.874"/>■(3)
          <GradientStop Color="#FF5A4A02" Offset="0.138"/>■(3)
        </LinearGradientBrush>■(3)
      </Controls:CascadingTextBlock.Foreground>■(3)
    </Controls:CascadingTextBlock>■(2)
    <Button x:Name="Button1" Content="実行" HorizontalAlignment="Left" Height="63" Margin="1096,668,0,0" VerticalAlignment="Top" Width="160" FontFamily="Meiryo UI" FontSize="36"/>■(4)
  </Grid>
</Page>

次に、ソリューションエクスプローラー内のMainWindow.xamlを展開して表示される、MainWindow.xaml.vbをダブルクリックしてリスト4のコードを記述します。

ロジックコードを記述する

リスト4 (MainWindow.xaml.vb)

Option Strict On
Public NotInheritable Class MainPage
  Inherits Page

[実行]ボタンがクリックされた時の処理

アニメーションを呼び出すAnimateOnLoadedプロパティにTrueを指定し、BeginCascadingTransitionAsyncメソッドでアニメーションを開始します。

非同期処理で行われるため、メソッドの先頭にAsyncを追加します。Asyncが追加されていると、その処理が非同期で行われることを意味します。

  Private Async Sub Button1_Click(sender As Object, e As RoutedEventArgs) Handles Button1.Click
    CascadingTextBlock1.AnimateOnLoaded = True
    Await CascadingTextBlock1.BeginCascadingTransitionAsync()
  End Sub End Class

今回はここまでです。ありがとうございました。

  • 画像のドラッグ、移動、回転、拡大縮小を行うWindowsアプリサンプル

  • 文字をアニメーション表示させるWindowsアプリサンプル

薬師寺国安事務所

薬師寺国安事務所代表。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 Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

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

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