• TOP
• プログラム

WPF C# でLineをアニメーションする

2010-04-05T22:51:00+09:00 2019-03-03T01:32:42Z プログラム

1. XAMLでLineを記載する

XAMLでLineを描画するには以下の様に記載します。

<Line X1="始点のX座標" X2="終点のX座標" Y1="始点のY座標" Y2="終点のY座標" Stroke="色" StrokeThickness="線の太さ"/>

上の画像のような線のあるウインドウのXAMLは以下のようになります。
今回のサンプルではアニメーションを行うLineの名前を「」とし、トリガとしボタンを配置してあります。このボタンがクリックされた時の動作をC#で記載しています。

<Window x:Class="Study_WPF03.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Canvas>
<Line Name="lineTest" X1="150" X2="150" Y1="0" Y2="300" Stroke="Aqua" StrokeThickness="100"></Line>
<Button Canvas.Left="12" Canvas.Top="227" Height="23" Name="button1" Width="75" Click="button1_Click">Button</Button>
</Canvas>
</Window>

2. C# でアニメーション処理を追加する

自動生成されたC#にはアニメーション処理を使用する宣言が無いので宣言部分に以下を追加します。

using System.Windows.Media.Animation;

ボタンのハンドラとしてアニメーション処理を以下の様に記載します。

private void button1_Click(object sender, RoutedEventArgs e)
{
//変更するアニメーションの数値
var anime = new DoubleAnimation{
From = 0,//0から
To = 300,//300まで変化させる
Duration=TimeSpan.FromMilliseconds(300)//変化は300m秒
};
//Line.Y2 を上記の設定アニメーションさせる
lineTest.BeginAnimation(Line.Y2Property, anime);
}