AMY&PINK

日本のITを世界へ！

Silverlight 3 工房

USING 3D TRANSFORMS, PART 1

このページは、Microsoft 社の Silverlight 3 サイトで紹介されているビデオ 「USING 3D TRANSFORMS, PART 1 」の内容を書き起こしています。 残念ながら解説の英語が聞き取れないため、基本的に手順のみのご紹介となってしまっております・・・。

１．プロジェクトを作る。

Visual Studio のプロジェクトの新規作成から、「Silverlight アプリケーション」を選択します。

ここでは「Silverlight 3d first」という名前で、プロジェクトを作っています。 001-create-project

Webプロジェクトは作成しないので、「Silverlight アプリケーションを新しいWebサイトでホストする」 のチェックは外します。

002-create-project2

２．ちょっと解説（なんだかわからず）

003-explain

手前（奥行き）がZ軸です。　という説明と思われます。

004-explain

ユーザーインターフェイスのエレメントは、PlaneProjection型のProjection プロパティを持つようになりました。

PlaneProjection は、エレメントをブラウザの表示に適応させます。

３．StackPanel を回転させてみる。

005-rotation

StackPanelが、斜めに回転してます。ソースは、以下のようになります。

<UserControl x:Class="Silverlight_3d_first.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Background="Gray"
                    Margin="40">
            <StackPanel.Projection >
                <PlaneProjection RotationX="-35"
                                 RotationY="-35"
                                 RotationZ="15" />
            </StackPanel.Projection>
        </StackPanel>
    </Grid>
</UserControl>

４．StackPanel にコントロールを配置する。

StackPanelにコントロールを配置します。コントロールも斜めになっていることが分かります。

006-form-rotation

このXAMLは以下です。

<UserControl x:Class="Silverlight_3d_first.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*" />
            <ColumnDefinition Width="1*" />
        </Grid.ColumnDefinitions>
        <StackPanel Background="Gray"
                    Margin="40"
                    Grid.Row="0"
                    Grid.Column="0" >
            <StackPanel.Projection >
                <PlaneProjection RotationX="-35"
                                 RotationY="-35"
                                 RotationZ="15" />
            </StackPanel.Projection>
            <TextBlock Margin="10"
                       Text="Please enter text below" />
            <TextBox x:Name="EnteredText"
                        Margin="10"
                        Width="150" />
            <Button x:Name="Send" Content="Click Me"
                    Width="Auto" Height="Auto" Margin="10" />
        </StackPanel>
        <TextBlock x:Name="Message"
                   Grid.Row="0"
                   Grid.Column="1"
                   Width="Auto"
                   Height="Auto"
                   HorizontalAlignment="Left"
                   VerticalAlignment="Center"
                   FontFamily="Georgia" FontSize="16" />
    </Grid>
</UserControl>

５．クリックイベントを実装する。

斜めになっているボタンにクリックイベントを実装して、今までのフォームと同じように使えることを確認します。

007-fixed1

テキストボックスに値を入れて、ボタンをクリックすると画面右側にあるTextBlock の値が変わります。

以下が、コードビハインドのソースです。

    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Send.Click += new RoutedEventHandler(Send_Click);
        }

        void Send_Click(object sender, RoutedEventArgs e)
        {
            Message.Text = EnteredText.Text;
        }
    }

６．回転アニメーションの為のプロジェクトを作る

こんどは、３D方向に傾けたオブジェクトに回転のアニメーションをつけてみます。

先ほどと同様に、新しいプロジェクトの作成で「Silverlight アプリケーション」を選択します。今回、名前は「FlipPanel」とします。

008-createproject

Webプロジェクトは作成しないので、「Silverlight アプリケーションを新しいWebサイトでホストする」 のチェックは外します。

画面のXamlは、以下になります。

ビデオの中では、先に画面レイアウトを作成した後に、TextBoxと TextBlock のプロパティをスタイルに変換する手順があるのですが、ここではその手順は飛ばして、スタイルに変換後のソースを掲載しています。

<UserControl x:Class="FlipPanel.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="400" Height="300">
    <UserControl.Resources>
        <Style TargetType="TextBlock"
               x:Key="Prompt">
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="HorizontalAlignment" Value="Right"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="FontFamily" Value="Georgia"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
        <Style TargetType="TextBox"
               x:Key="DataEntry">
            <Setter Property="VerticalAlignment" Value="Bottom"/>
            <Setter Property="HorizontalAlignment" Value="Left"/>
            <Setter Property="Margin" Value="5"/>
            <Setter Property="Width"  Value="100"/>
            <Setter Property="FontFamily" Value="Georgia"/>
            <Setter Property="FontSize" Value="14"/>
        </Style>
    </UserControl.Resources>

    <StackPanel x:Name="Form"
                Background="LightGray"
                Width="300"
                Margin="20">
        <StackPanel.Projection>
            <PlaneProjection x:Name="PanelProjection"
                             RotationX="0"
                             RotationY="0"
                             RotationZ="0" />
        </StackPanel.Projection>
        <Grid x:Name="theForm" >
            <Grid.RowDefinitions>
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
                <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*" />
                <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>
            <TextBlock Text="First Name"
                       Grid.Row="0"
                       Grid.Column="0"
                       Style="{StaticResource Prompt}"/>
            <TextBox x:Name="FirstName"
                     Grid.Row="0"
                     Grid.Column="1"
                        Style="{StaticResource DataEntry}"/>

            <TextBlock Text="Last Name"
                       Grid.Row="1"
                       Grid.Column="0"
                       Style="{StaticResource Prompt}"/>
            <TextBox x:Name="LastName"
                     Grid.Row="1"
                     Grid.Column="1"
                        Style="{StaticResource DataEntry}"/>

            <TextBlock Text="Street"
                       Grid.Row="2"
                       Grid.Column="0"
                       Style="{StaticResource Prompt}"/>
            <TextBox x:Name="Street"
                     Grid.Row="2"
                     Grid.Column="1"
                        Style="{StaticResource DataEntry}"/>

            <TextBlock Text="Second Street"
                       Grid.Row="3"
                       Grid.Column="0"
                       Style="{StaticResource Prompt}"/>
            <TextBox x:Name="Street2"
                     Grid.Row="3"
                     Grid.Column="1"
                        Style="{StaticResource DataEntry}"/>

            <TextBlock Text="Locale"
                       Grid.Row="4"
                       Grid.Column="0"
                       Style="{StaticResource Prompt}"/>
            <TextBox x:Name="Locale"
                     Grid.Row="4"
                     Grid.Column="1"
                        Style="{StaticResource DataEntry}"/>
            <Button x:Name="Help" Content="  Help  "
                    HorizontalAlignment="Left"
                    VerticalAlignment="Bottom"
                    Width="Auto"
                    Background="Red"
                    FontFamily="Georgia"
                    FontSize="18"
                    Grid.Row="5"
                    Grid.Column="0"
                    Margin="10,50" />
        </Grid>
    </StackPanel>
</UserControl>

画面イメージは、こんな感じです。ここから、ボタンを押したらフォーム（？）が回転するアニメーションを作成します。

.009-screen.

ちなみに、ビデオ中でボタンのマージンに関して解説が入っています。

010-margine

ボタンのマージンプロパティに（ Margin=”10, 50″ ）と設定すると、左右に５、上下に２５ずつマージンがとられるようです。CSSと、ちょっと動作が違うな～。ややこしい。

.

.

.011-storyboard.

Storyboard のターゲットは、StackPanelのProjectionプロパティに設定した、PlaneProjection オブジェクトに対して行います。

Storyboard 部分のコードは、こんな感じになります。

        <Storyboard x:Name="DoFlip">
            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00"
                                           Storyboard.TargetName="PanelProjection"
                                           Storyboard.TargetProperty="RotationY">
                <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                <SplineDoubleKeyFrame KeyTime="00:00:01" Value="90" />
                <SplineDoubleKeyFrame KeyTime="00:00:02" Value="180" />
            </DoubleAnimationUsingKeyFrames>
        </Storyboard>

キーフレームを使ったアニメーションなので、キーフレームに関して少し調べておいたほうが良いかもしれません。

以下、このコードの解説です。

.012-storyboard2.

時間が、00:00:00 に注目してください。ということかな？

ターゲットは、StackPanel.Projection に設定しているPlaneProjection になっていますね。

.013-storyboard3.

PlaneProjection の RotationX に対して作用させます。X軸だから、横方向に回転する感じでしょうか。

あとは、フォーム上のボタンクリックイベントで、Storyboardのアニメーションを開始させます。

アニメーションを開始するコードは、以下です。

namespace FlipPanel
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
            Help.Click += new RoutedEventHandler(Help_Click);
        }

        void Help_Click(object sender, RoutedEventArgs e)
        {
            DoFlip.Begin();
        }
    }
}

これで、動かしてみると、、、

014-storyboard4

回りました～

いぇ～い！