SkewTransform とは？

SkewTransform って何だろと思って MSDN ライブラリを読むと、「2 次元傾斜を表します。」とある。さらに、「SkewTransform は、2 次元オブジェクトで 3 次元的な奥行の効果を演出する場合に役立ちます。」だそうな。
さっぱりわからないので、アニメーションするデモを書いてみた。さいわい Silverlight にもあるので、Silverlight で公開。
X ボタンを押すと X だけ傾けるアニメを繰り返す。Y ボタンを押すと Y だけ傾けるアニメを(ry
XY ボタンを押すと (　ﾟдﾟ)ポカーン
びっくりしました…。そうきますか。

どうぞお試しあれ。
http://siokoshou.googlepages.com/SkewTest.html

ソース

<UserControl x:Class="SkewTest.Page"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
  Width="300" Height="300">
  <UserControl.Resources>

    <Style x:Key="ButtonStyle" TargetType="Button">
      <Setter Property="Margin" Value="5" />
    </Style>

    <Storyboard x:Name="X">
      <DoubleAnimation Storyboard.TargetName="trans" Storyboard.TargetProperty="AngleX"
        From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
    </Storyboard>

    <Storyboard x:Name="Y">
      <DoubleAnimation Storyboard.TargetName="trans" Storyboard.TargetProperty="AngleY"
        From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
    </Storyboard>

    <Storyboard x:Name="XY">
      <DoubleAnimation Storyboard.TargetName="trans" Storyboard.TargetProperty="AngleX"
        From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
      <DoubleAnimation Storyboard.TargetName="trans" Storyboard.TargetProperty="AngleY"
        From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
    </Storyboard>

    <Storyboard x:Name="Null" />

  </UserControl.Resources>
  <Grid x:Name="LayoutRoot" Background="White">
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <StackPanel Width="50">
      <Button Style="{StaticResource ButtonStyle}" Name="ButtonX"
        Content="X"  Click="Button_Click" />
      <Button Style="{StaticResource ButtonStyle}" Name="ButtonY"
        Content="Y"  Click="Button_Click" />
      <Button Style="{StaticResource ButtonStyle}" Name="ButtonXY"
        Content="XY" Click="Button_Click" />
    </StackPanel>

    <Button Grid.Column="1" HorizontalAlignment="Center"
      VerticalAlignment="Center" Name="Stop" Content="Stop"
      Padding="8" Click="Button_Click">
      <Button.RenderTransform>
        <SkewTransform x:Name="trans" CenterX="0" CenterY="0" AngleX="0" AngleY="0" />
      </Button.RenderTransform>
    </Button>
  </Grid>
</UserControl>

using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media.Animation;

namespace SkewTest
{
  public partial class Page : UserControl
  {
    private Dictionary<Button, Storyboard> dic;

    public Page()
    {
      InitializeComponent();
      this.dic = new Dictionary<Button, Storyboard> {
        { this.ButtonX, this.X },
        { this.ButtonY, this.Y },
        { this.ButtonXY, this.XY },
        { this.Stop, this.Null } };
    }

    private void Button_Click( object sender, RoutedEventArgs e )
    {
      foreach ( var item in this.dic.Values )
      {
        item.Stop();
      }

      var s = this.dic[ ( Button ) sender ];
      s.Begin();
    }
  }
}

このアニメ、アプリで使われたらうざいですね(^^;