C1Splitter には、コントロールのインタラクティブ操作をカスタマイズできる 31 種類の遷移効果が含まれています。このトピックでは、Easing プロパティと Duration プロパティを設定して、スプリッタバーが動かされたときに発生するアニメーション効果を作成します。このトピックでは、デザインビュー、ソースビュー、およびコードでこれらのプロパティのそれぞれを設定する方法を説明します。

デザインビューの場合

以下の手順を実行します。

1. Web ページで C1Splitter を選択してから、プロパティウィンドウに移動します。
2. ResizeSettings ノードを拡張して AnimationOptions ノードを拡張します。そして、以下の手順を実行します。
   
   • Easing プロパティを EaseOutBounce に設定します。このプロパティは、アニメーションの遷移効果を決定します。
   • AnimationDuration プロパティを 1000 に設定します。これによってアニメーション効果の持続時間が延長されるため、プロジェクトをビルドしたときに効果が目に見えるようになります。
3. プロジェクトをビルドしてから、マウスを使用してスプリッタバーをドラッグします。スプリッタバーを解放して、バーが数秒間バウンスしてから安定した状態に落ち着くことを確認してください

ソースビューの場合

ソースビューで、<cc1:C1Splitter> タグと </cc1:C1Splitter> タグの間に <ResizeSettings AnimationDuration="1500" Easing="EaseOutBounce" /> を置き、次のようなマークアップを作成します。

プロジェクトをビルドしてから、マウスを使用してスプリッタバーをドラッグします。スプリッタバーを解放して、バーが数秒間バウンスしてから安定した状態に落ち着くことを確認してください。

コードの場合

以下の手順を実行します。

1. 以下の名前空間をプロジェクトにインポートします。
   

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   Imports C1.Web.Wijmo.Controls

   C#コードの書き方

   C#	コードのコピー
   using C1.Web.Wijmo.Controls;

2. アニメーションの持続時間を設定します。

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   C1Splitter1.ResizeSettings.AnimationOptions.AnimationDuration = 1000

   C#コードの書き方

   C#	コードのコピー
   C1Splitter1.ResizeSettings.AnimationOptions.AnimationDuration = 1000;

3. アニメーション遷移効果を選択します。

   Visual Basicコードの書き方

   Visual Basic	コードのコピー
   C1Splitter1.ResizeSettings.AnimationOptions.Easing = Easing.EaseOutBounce

   C#コードの書き方

   C#	コードのコピー
   C1Splitter1.ResizeSettings.AnimationOptions.Easing = Easing.EaseOutBounce;

4. プロジェクトをビルドしてから、マウスを使用してスプリッタバーをドラッグします。スプリッタバーを解放して、バーが数秒間バウンスしてから安定した状態に落ち着くことを確認してください。