2013年08月28日

WPFサンプル:ObjectDataProviderを使いメソッドをバインドする (1)

   このエントリーをはてなブックマークに追加 Clip to Evernote
LIstBoxに乱数をいくつか表示するだけの単純なWPFのプログラムを考えてみます。
C#のコードで、ListBoxのItemsSourceに乱数の結果一覧を代入すれば、それで実現することができますが、今回は、XAMLのメソッドをバインドする機能を使ってみます。

まず、乱数を得るための以下のようなクラスを定義します。
これは、なんの変哲もないコードですね。

public class RandomNumbers {
    public IEnumerable<int> GetNumbers() {
        var rnd = new Random();
        for (int i = 0; i < 12; i++) {
            yield return rnd.Next(100, 1000);
        }
    }
}

このRandomNumbersのGetNumbersメソッドをバインドするXAMLが以下になります。

<Window x:Class="MethodBindingSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:system="clr-namespace:System;assembly=mscorlib"
         xmlns:local="clr-namespace:MethodBindingSample"
        Title="MainWindow" Height="351.108" Width="246.994">
    <Window.Resources>
        <ObjectDataProvider ObjectType="{x:Type local:RandomNumbers}"
                            MethodName="GetNumbers" x:Key="RandomNum">
        </ObjectDataProvider>
    </Window.Resources>
    <Grid>
        <ListBox HorizontalAlignment="Left" Height="300" Margin="10,10,0,0"
                 VerticalAlignment="Top" Width="217"
                 ItemsSource="{Binding Mode=OneWay, Source={StaticResource RandomNum}}"/>
    </Grid>
</Window>

ObjectDataProvider要素をWindows.Resourcesに定義し、ここで、クラス名とメソッド名を指定します。x:Keyでこのリソースに名前をつけます。
ListBoxでは、ItemsSourceで、先ほど名前付けした ObjectDataProvider をバインドしています。
C#のコードビハインドには何も記述する必要はありません。
以下は、これを実行してみたスクリーンショットです。

MethodBinding1

WPFサンプル・目次
  

Posted by gushwell at 23:00Comments(2)TrackBack(0)

2013年08月25日

WPFサンプル:コマンドラインの引数を得る

   このエントリーをはてなブックマークに追加 Clip to Evernote
Mainメソッドが隠蔽されてしまっているWPFでも、コマンドラインから引数を受け取ることができます。
まず、App.xaml.cs に以下のプロパティとメソッドを追加します。

public partial class App : Application {
    public static string[] CommandLineArgs { get; private set; }
    private void Application_Startup(object sender, StartupEventArgs e) {
        if (e.Args.Length == 0)
            return;
        CommandLineArgs = e.Args;
    }
}

StartupEventArgsのArgsプロパティに、アプリケーションに渡されたコマンド ライン引数が 入ってきますので、これを Appクラスの CommandLineArgs プロパティに設定しています。
Appクラスは、Visual Studio が自動生成してくれるクラスで、ソリューションエクスプローラからは、App.xaml -> App.xaml.cs -> App とたどっていくことで、開くことができます。

CommandLineArgs プロパティはstaticプロパティですので、これで、どこからでもコマンドライン引数を参照することができるようになりました。

例えば、Button_Click イベントハンドラで、以下のようなコードを書けば、コマンド引数をListBoxに表示させることができます。

private void Button_Click(object sender, RoutedEventArgs e) {
    if (App.CommandLineArgs == null)
        return;
    foreach (string arg in App.CommandLineArgs) {
        this.listBox1.Items.Add(arg);
    }
}

※ バインディングせずに、あえて ListBox.ItemsにAddしています。

このプログラムが、Sample.exeだとすると、

C:\>Sample.exe Visual Studio 2013

とタイプして Sample.xeをたちあげ、ボタンをクリックすれば、以下のような 実行結果が得られます。

cmdlineargs

エクスプローラ上のSample.exeのアイコンに、ファイルをDrag&Dropしてsample.xeを起動すれば、 Drag&Dropされたファイルパスが、コマンドライン引数として渡されますから、 以下のように、ファイルパスを得ることができます。

cmdlineargs2
※ 3つのファイルをアイコン上にD&Dした例です。


ちなみに、このサンプルのXAMLは、以下のように定義しています。

<Window x:Class="CommandLineSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <Button Content="Button" HorizontalAlignment="Left"
                Margin="10,10,0,0" VerticalAlignment="Top"
                Width="75" Click="Button_Click"/>
        <ListBox HorizontalAlignment="Stretch" Height="200"
                 Margin="5,50,5,5" VerticalAlignment="Top"
                 Name="listBox1"/>
    </Grid>
</Window>


WPFサンプル・目次
  
Posted by gushwell at 22:00Comments(0)TrackBack(0)

2013年08月21日

WPFサンプル:ビットマップ効果のアニメーション

   このエントリーをはてなブックマークに追加 Clip to Evernote
アニメーションの最後のサンプルとして、ビットマップ効果のアニメーションのサンプルを書いてみました。
Borderに、BlurEffectを適用し、Radiusプロパティを変化させることで、にじんだ状態から徐々ににじみのない通常の状態に変化させています。このとき、BorderのOpacityプロパティも 0(透明) から 1(不透明)に同時に変化させています。
これにより、Birder内に配置したコントロールが徐々に鮮明になっていきます。

また、Radiusのアニメーションには、Easing関数 CubicEase を使うことで、アニメーションに変化をつけています。

BlurEffectAnim1

BlurEffectAnim2

BlurEffectAnim3

Button.Triggers でアニメーションを開始しているので、C#側でのコーディングはありません。

<Window x:Class="BlurEffectAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="220" Width="310">
    <Window.Resources>
        <Storyboard x:Key="myAnimation" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="blurEffect"
                             Storyboard.TargetProperty="Radius"
                             From="20" To="0" Duration="0:0:04" >
                <DoubleAnimation.EasingFunction>
                    <CubicEase EasingMode="EaseOut" />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Storyboard.TargetName="border1"
                             Storyboard.TargetProperty="Opacity"
                             From="0" To="1" Duration="0:0:03" >
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="5,8,0,0"
                Name="button" VerticalAlignment="Top" Width="75" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myAnimation}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <Border BorderBrush="SlateGray" BorderThickness="1" Width="205" Height="105"
                CornerRadius="5" Background="Ivory" Name="border1" Margin="50,60,0,0"
                HorizontalAlignment="Left" VerticalAlignment="Top" Opacity="1" >
            <Border.Effect>
                <BlurEffect Radius="0" x:Name="blurEffect"/>
            </Border.Effect>
            <!-- これ以降は表示しているだけなので、本質的な部分ではない -->
            <Grid Height="100" HorizontalAlignment="Left" Name="grid1" VerticalAlignment="Top"
                  Width="200" >
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                        Margin="119,71,0,0" Name="button1" VerticalAlignment="Top" Width="75" />
                <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left"
                          Margin="9,41,0,0" Name="checkBox1" VerticalAlignment="Top" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="119,6,0,0"
                           Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" />
                <Slider Height="23" HorizontalAlignment="Left" Margin="10,6,0,0"
                        Name="slider1" VerticalAlignment="Top" Width="100" />
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                        Margin="35,71,0,0" Name="button2" VerticalAlignment="Top"
                        Width="75" />
                <TextBox Height="25" HorizontalAlignment="Left" Margin="89,36,0,0"
                         Name="textBox1" VerticalAlignment="Top" Width="103" />
            </Grid>
        </Border>
    </Grid>
</Window>


WPFサンプル・目次
  
Posted by gushwell at 20:33Comments(0)TrackBack(0)

2013年08月18日

WPFサンプル:イージング関数(easing function)を使用する (2)

   このエントリーをはてなブックマークに追加 Clip to Evernote
Easing関数にどんなものがあり、具体的にどんな風に動くのかを確認するために Easing関数と、EasingModeを選択し、アニメーションをさせるサンプルを書いてみました。
この記事の最後には、このサンプルと同じ動きをするSilverlightアプリを載せておいたので、 実際にブラウザで動作を確認してもらえます。

EasingFunc1

EasingFunc2

このサンプルでは、以下の5つのEasing関数を選択できます。
BackEase、CircleEase、CubicEase、BounceEase、ElasticEase
また、EasingModeは、EaseIn, EaseOut, EaseInOut の3つから選択できます。
XAMLです。

<Window x:Class="Easing2Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="600" Loaded="Window_Loaded">
    <Window.Resources>
        <Storyboard x:Name="cubicEase" x:Key="CubicEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <CubicEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Name="bounceEase" x:Key="BounceEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <BounceEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="ElasticEase" x:Name="ElasticEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <ElasticEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="BackEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <BackEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
        <Storyboard x:Key="CircleEase" FillBehavior="HoldEnd">
            <DoubleAnimation Storyboard.TargetName="myGrid"
                             Storyboard.TargetProperty="(Canvas.Left)"
                             From="-300" To="100" Duration="0:0:02" >
                <DoubleAnimation.EasingFunction>
                    <CircleEase />
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <StackPanel Orientation="Horizontal">
            <ComboBox Height="24" Name="comboBoxKind" Width="120" Margin="5" SelectedIndex="0">
                <ComboBoxItem Content="BackEase" />
                <ComboBoxItem Content="CircleEase" />
                <ComboBoxItem Content="CubicEase" />
                <ComboBoxItem Content="BounceEase" />
                <ComboBoxItem Content="ElasticEase" />
            </ComboBox>
            <ComboBox Height="24" Name="comboBoxEasingMode" Width="120" />
            <Button Width="80" Content="Begin" Margin="5" Click="Button_Click" />
        </StackPanel>
        <!-- これ以降は、表示するだけのためのもの -->
        <Canvas Grid.Row="1">
            <Grid Name="myGrid" Canvas.Left="-300">
                <CheckBox Content="CheckBox" Height="16" HorizontalAlignment="Left"
                      Margin="31,20,0,0" Name="checkBox1" VerticalAlignment="Top" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="31,58,0,0"
                      Name="textBlock1" Text="TextBlock" VerticalAlignment="Top" />
                <TextBox Height="24" HorizontalAlignment="Left" Margin="112,54,0,0"
                      Name="textBox1" VerticalAlignment="Top" Width="120" />
                <TextBlock Height="23" HorizontalAlignment="Left" Margin="31,100,0,0"
                      Name="textBlock2" Text="TextBlock" VerticalAlignment="Top" />
                <TextBox Height="24" HorizontalAlignment="Left" Margin="112,96,0,0"
                      Name="textBox2" VerticalAlignment="Top" Width="120" />
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                     Margin="132,160,0,0" Name="button1" VerticalAlignment="Top" 
                     Width="75" />
                <Button Content="Button" Height="23" HorizontalAlignment="Left"
                     Margin="221,160,0,0" Name="button2" VerticalAlignment="Top" 
                     Width="75" />
            </Grid>
        </Canvas>
    </Grid>
</Window>

5つのStoryboardを Window.Resources に定義しています。
Gridには、Canvasを配置し、そこのいくつかのControlを配置しています。
アニメーションでは、このCanvasの位置を変化させていますので、Canvasに配置されたControlが移動することになります。
アニメーションの起動と、EaseModeを表示するComboBoxへのデータバインドは、C# のコードで実装しています。
以下、C#のコードです。

using System;
using System.Linq;
using System.Windows;
using System.Windows.Media.Animation;
namespace Easing2Sample {
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
        }
        private void Button_Click(object sender, RoutedEventArgs e) {
            Storyboard storyboard = GetStoryboard(comboBoxKind.SelectionBoxItem as String);
            if (storyboard != null) {
                var da = (storyboard.Children[0] as DoubleAnimation);
                var ef = (da.EasingFunction as EasingFunctionBase);
                ef.EasingMode = (EasingMode)comboBoxEasingMode.SelectedItem;
                storyboard.Begin();
            }
        }
        private Storyboard GetStoryboard(string name) {
            return this.Resources[name] as Storyboard;
        }
        private void Window_Loaded(object sender, RoutedEventArgs e) {
            Type type = typeof(EasingMode);
            var values = (from field in type.GetFields()
                          where field.FieldType == typeof(EasingMode)
                          select field.GetValue(type)).Cast<EasingMode>();
            comboBoxEasingMode.ItemsSource = values;
            comboBoxEasingMode.SelectedIndex = 0;
        }
    }
}

最後に、Silverlightのアプリです。実際に動かせるので、ComboBoxを選択し、Begin ボタンを押してみてください。


WPFサンプル・目次
  
Posted by gushwell at 21:00Comments(0)TrackBack(0)

2013年08月13日

WPFサンプル:イージング関数(easing function)を使用する (1)

   このエントリーをはてなブックマークに追加 Clip to Evernote
イージング関数(easing function)を使用すると、加速度をつけたり、弾むような動作をさせたりといった複雑なアニメーションを簡単に制御できます。
ここでは、PowerEase のサンプルを示します。

PowerEaseクラスは、f(t) = t<sup>p</sup> という数式を使って加速と減速のアニメーションを作成するイージング関数を表します。
このPowerEaseを使い、TextBlockに表示された文字列のサイズを変化させるアニメーションを書いてみます。
実際にはFont-Sizeを変化させるのではなく、RenderTransformプロパティでScaleTransformを指定し、このScaleX ScaleYを変化させています。
XAMLを見て下さい。

<Window x:Class="Easing1Sample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="myAnimation" >
            <DoubleAnimation Duration="00:00:02" From="1" To="20"
                             Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleX" >
                <DoubleAnimation.EasingFunction>
                    <PowerEase Power="10" EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
            <DoubleAnimation Duration="00:00:02" From="1" To="20"
                             Storyboard.TargetName="scale" Storyboard.TargetProperty="ScaleY" >
                <DoubleAnimation.EasingFunction>
                    <PowerEase Power="10" EasingMode="EaseIn"/>
                </DoubleAnimation.EasingFunction>
            </DoubleAnimation>
        </Storyboard>
    </Window.Resources>
    <Grid >
        <TextBlock Name="textBlock1" Text="TextBlock" FontSize="12"
                   HorizontalAlignment="Center" VerticalAlignment="Center">
            <TextBlock.RenderTransform>
                <ScaleTransform ScaleX="1" ScaleY="1" x:Name="scale"
                                CenterX="25" CenterY="10" />
            </TextBlock.RenderTransform>
        </TextBlock>
        <Button Content="Button" Height="23" HorizontalAlignment="Left"
                Margin="4,6,0,0" Name="button1" VerticalAlignment="Top" Width="75" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myAnimation}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

ScaleX、 ScaleYは、Double型ですので、DoubleAnimationを利用します。
このDoubleAnimationのEasingFunctionプロパティに、PowerEaseを割り当てることでScaleX, ScaleYの値を加速度をつけて変化させています。
PowerEaseで指定するプロパティは、Power と EasingModeの2つ。
Powerプロパティは、f(t) = t<sup>p</sup> の p を示します。
EasingMode プロパティは、加速、減速、その両方を適用するかを指定します。EaseInは、加速を意味します。
詳しくは、MSDNライブラリのPowerEaseクラスのページをご覧ください。

実行結果のスクリーンショットを示します。スクリーンショットなので加速しているのを示せないのが残念です(T T)。

PowerEase1

PowerEase2

PowerEase3

WPFサンプル・目次
  
Posted by gushwell at 23:00Comments(0)TrackBack(0)

2013年08月11日

WPFサンプル:オブジェクトを回転させるアニメーション

   このエントリーをはてなブックマークに追加 Clip to Evernote
RotateTransformを使用し、オブジェクトを回転させる」で説明したRotateTransformのAngleプロパティをアニメーション化することによって、オブジェクトを回転させるアニメーションができます。
ここでは、ボタンを回転する例を掲載します。

<Window x:Class="RotateAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="rotateAnimation" FillBehavior="HoldEnd" >
            <DoubleAnimation
                Storyboard.TargetName="rotate"
                Storyboard.TargetProperty="Angle"
                From="0" To="360" Duration="0:0:02" />
            <DoubleAnimation
                Storyboard.TargetName="button1"
                Storyboard.TargetProperty="Width"
                From="0" To="140" Duration="0:0:02" />
        </Storyboard>
    </Window.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <Button Name="button1" Height="80" Width="140" Content="Click Me" >
            <Button.RenderTransform>
                <RotateTransform x:Name="rotate" Angle="0" CenterX="70" CenterY="40" />
            </Button.RenderTransform>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource rotateAnimation}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

プログラムを起動すると、ボタンの回転が始まります。
この例では、RotateTransform.Angleの値と同時に、Button.Widthプロパティの値も変化させることで、より動きのあるアニメーションとしています。
以下、実行時のスクリーンショットです。

rotateAni1

rotateAni2

rotateAni3

rotateAni4



WPFサンプル・目次
  
Posted by gushwell at 22:12Comments(0)TrackBack(0)

2013年08月08日

WPFサンプル:Point型の値を変化させるアニメーション

   このエントリーをはてなブックマークに追加 Clip to Evernote
RadialGradientBrushを使い放射状グラデーションで領域を塗りつぶす」 で示したRadialGradientBrushには、GradientOrigin というプロパティがあります。
このプロパティは、 System.Windows.Point 型です。このPoint型の値を変化させることができるのがPointAnimationです。

今回は、このPointAnimationを使い、RadialGradientBrushのGradientOriginを変化させることでアニメーション効果を出すサンプルです。

以下、実行例です。

PointAnim1

PointAnim2

PointAnim3

以下に、XAMLを示します。

<Window x:Class="PointAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="myStoryboad">
            <PointAnimation
                Storyboard.TargetName="MyGrad"
                Storyboard.TargetProperty="GradientOrigin"
                From="0.82,0.22" To="0.2,0.8" Duration="0:0:2"
                AutoReverse="True" RepeatBehavior="3x"/>
        </Storyboard>
    </Window.Resources>
    <Grid >
        <Ellipse Width="150" Height="150">
            <Ellipse.Fill>
                <RadialGradientBrush x:Name="MyGrad" RadiusX="0.5" 
                                 RadiusY="0.5" Center="0.5,0.5" 
                                 GradientOrigin="0.82,0.22">
                    <GradientStop Color="Azure" Offset="0.0"/>
                    <GradientStop Color="CornflowerBlue" Offset="0.4"/>
                    <GradientStop Color="DarkBlue" Offset="1.0" />
                </RadialGradientBrush>
            </Ellipse.Fill>
        </Ellipse>
        <Button Width="100" Height="24" HorizontalAlignment="Left" 
                VerticalAlignment="Top"
                Content="Start" >
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboad}}" />
                </EventTrigger>
            </Button.Triggers>
        </Button>
    </Grid>
</Window>

PointAnimationの各プロパティは、これまで見てきた、DoubleAnimationと同じですね。
なお、Pointの値は、"x,y" という形式で記述します。
AutoReverse="True" とすることで、FromからToへのアニメーション完了後にタイムラインを逆方向に再生するようにしています。

Button.Clickのイベントトリガーを使って、アニメーションを開始させているので、C#側で追加するコードはありません。


WPFサンプル・目次
  
Posted by gushwell at 21:30Comments(0)TrackBack(0)

2013年08月06日

WPFサンプル:2つのAnimationを同時に動かす

   このエントリーをはてなブックマークに追加 Clip to Evernote
前回に引き続き、ColorAnimationのサンプルです。
今度は、グラデーションを変化させています。
初期状態では、TextBlockで表示される文字列にMediumBlueからLightSkyBlueへのグラデーション効果を適用しています。
この文字列の色を Crimson 一色に変化させる例です。

XAMLです。

<Window x:Class="ColorAnimationSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="118" Width="450">
    <Window.Resources>
        <Storyboard x:Key="myStoryboard" FillBehavior="HoldEnd">
            <ColorAnimation Storyboard.TargetName="startColor"
                            Storyboard.TargetProperty="Color"
                            From="MediumBlue" To="Crimson" Duration="0:0:00.5" />
            <ColorAnimation Storyboard.TargetName="stopColor"
                            Storyboard.TargetProperty="Color"
                            From="LightSkyBlue" To="Crimson" Duration="0:0:01.5" />
        </Storyboard>
    </Window.Resources>
    <StackPanel Orientation="Vertical">
        <Button Content="Start" Height="23" HorizontalAlignment="Left" Margin="10"
                Name="button1" VerticalAlignment="Top" Width="75">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Click">
                    <BeginStoryboard Storyboard="{Binding Source={StaticResource myStoryboard}}"/>
                </EventTrigger>
            </Button.Triggers>
        </Button>
        <TextBlock HorizontalAlignment="Left"  Name="textBlock1"
                   Text="Microsoft .NET Framework" VerticalAlignment="Top"
                   FontSize="30" FontWeight="ExtraBlack" FontFamily="SketchFlow Print">
            <TextBlock.Foreground>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="MediumBlue" Offset="0.0" x:Name="startColor"/>
                    <GradientStop Color="LightSkyBlue" Offset="0.8" x:Name="stopColor"/>
                </LinearGradientBrush>
            </TextBlock.Foreground>
        </TextBlock>
    </StackPanel>
</Window>


Storyboardの子要素として、2つのColorAnimationを定義している点に注目です。
WPFでは、このようにすると、複数のアニメーションを同時に動かすことができます。
一つ目のColorAnimationでは、グラデーションの開始点の色を変化させ、2つ目のColorAnimationでは、グラデーションの終了点の色を変化させています。

ColorAnimation4

ColorAnimation5

ColorAnimation6


イベントトリガーを使い、アニメーションを起動させていますので、C#側では何も記述していません。



WPFサンプル・目次
  
Posted by gushwell at 22:30Comments(0)TrackBack(0)