ProgressBar for ASP.NET Web Forms

Size: px

Start display at page:

Download "ProgressBar for ASP.NET Web Forms"

れいなかやぬま
5 years ago
Views:

1 ProgressBar for ASP.NET Web Forms 更新グレープシティ株式会社

2 目次製品の概要 2 ComponentOne for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: プロジェクトの作成とコントロールの追加 4 手順 2: 各コントロールの設定 4-5 手順 3: プロジェクトの実行 5 デザイン時のサポート 6 スマートタグとタスクメニュー 6-7 コンテキストメニュー 7 C1ProgressBar の要素 8 トラック 8 進捗インジケータ 8-9 ラベル 9 C1ProgressBar の動作と外観 10 テーマ 10 ツールチップ 10 イージング効果の説明アニメーションの持続時間 12 タスク別ヘルプ 13 ラベルのカスタマイズ 13 ラベルの配置ラベルの書式設定テーマの利用 15 組み込みテーマの使用ツールチップの書式設定進捗インジケータの進行方向の変更アニメーションの設定値の設定 Copyright GrapeCity Inc. All rights reserved.

3 製品の概要 ProgressBar for ASP.NET Web Forms を Web プロジェクトに追加することによってエンドユーザーに通知し続けます ProgressBar for ASP.NET Web Forms はゲージとインジケータの両方の役割を果たすグラフィカルユーザーインタフェース要素ですこれによってユーザーは処理の進捗状況を確認でき同時にその処理がまだ実行中であることもわかりますこのインタフェースを使用して進行中であることを示す静的なシンボルを表示したり現在実行されている処理の進捗状況を表示したりできます ProgressBar for ASP.NET Web Forms では 5 つの組み込み視覚スタイルカスタマイズ可能なラベルとツールチップ数十種類のアニメーションなどが利用できます ComponentOne for ASP.NET Web Forms のヘルプ ComponentOne for ASP.NET Web Forms の各コントロールで共通したトピックアセンブリの追加テーマの適用クライアント側情報などについては ASP.NET Web Forms ユーザーガイドを参照してください 2 Copyright GrapeCity Inc. All rights reserved.

4 主な特長 C1ProgressBar の主な特長として次の事項が挙げられますアニメーション 30 種類以上の組み込みアニメーションから選択してプログレスバーの進行時の効果を魅力あるものにします各アニメーションの実行速度と頻度は選択することが可能ですテーマスマートタグをクリックするだけで 6 種類のプレミアムテーマ (Arctic Midnight Aristo Rocket Cobalt および Sterling) のいずれかを選択してプログレスバーの外観を変更しますオプションとして jquery UI から ThemeRoller を使用してカスタマイズしたテーマを作成しますカスタマイズ可能なラベルコントロール内の右下左上または中央に表示されるようにラベルをカスタマイズしますラベルはプログレスバーの進行に合わせてマーキーとして動作するように設定することもできますラベルは現在の進捗量現在の進捗割合残りの進捗量残りの進捗割合最小値および最大値という6つの進捗インジケータの1つを使用して設定できます詳細についてはラベルを参照してください CSS のサポート CSS(Cascading Style Sheet) のスタイルを使用してカスタムスキンを定義します 3 Copyright GrapeCity Inc. All rights reserved.

クイックスタートこの ProgressBar for ASP.NET Web Forms クイックスタートでは 1つのC1ProgressBar と2つの Button コントロールを備える ASP.NET Web アプリケーションプロジェクトを作成しますスタートボタンをクリックすると RunTask イベントが発生しプログレスバーは UpdateProgress メソッドを介して 0.

5 クイックスタートこの ProgressBar for ASP.NET Web Forms クイックスタートでは 1つのC1ProgressBar と2つの Button コントロールを備える ASP.NET Web アプリケーションプロジェクトを作成しますスタートボタンをクリックすると RunTask イベントが発生しプログレスバーは UpdateProgress メソッドを介して 0.5 秒 (500 ミリ秒 ) ごとに更新されるようになりますストップボタンをクリックするとプログレスバーは更新されなくなります手順 1: : プロジェクトの作成とコントロールの追加このクイックスタートの最初の手順では ASP.NET Web アプリケーションプロジェクトを作成して C1ProgressBar と 2 つの Button コントロールをページに追加します 1. 新しい ASP.NET Web アプリケーションを作成します 2. デザインボタンをクリックしてデザインビューに入ります 3. Visual Studio ツールボックスでC1ProgressBar アイコンをダブルクリックしコントロールをページに追加します 4. 2つの標準 Button コントロールを追加し Text プロパティをそれぞれスタートとストップに設定しますページは次の例のようになります手順 2: : 各コントロールの設定この手順ではプログレスバーの更新プロセスを開始および停止するボタンとしてボタンコントロールを指定する StartTaskButton と StopTaskButton を指定します 1. Visual Studio プロパティウィンドウで C1ProgressBar コントロールを選択し StartTaskButton の横にあるドロップダウン矢印をクリックして Button1 を選択します 2. StopTaskButton プロパティを Button2 に設定します 3. プロパティウィンドウでイベントボタンをクリックし C1ProgressBar1 コントロールのイベントをすべてリストします RunTask イベントの横に ProgressBar1_RunTask と入力しますこれによりコードビューにイベントが作成されここで以下のコードを入力できますこれによりイベントは次のようになります 4 Copyright GrapeCity Inc. All rights reserved.

6 Protected Sub ProgressBar1_RunTask(sender As Object, e As C1.Web.Wijmo.Controls.C1ProgressBar.C1ProgressBarTaskEventArgs) For i As Integer = 0 To 99 System.Threading.Thread.Sleep(500) e.updateprogress(i) Next End Sub コードの書き方 protected void ProgressBar1_RunTask(object sender, C1.Web.Wijmo.Controls.C1ProgressBar.C1ProgressBarTaskEventArgs e) { for (int i = 0; i < 100; i++) { System.Threading.Thread.Sleep(500); e.updateprogress(i); } } スタートボタンをクリックすると RunTask イベントが発生し UpdateProgress メソッドを呼び出して 500 ミリ秒ごとに1ずつプログレスバーを更新します手順 3: : プロジェクトの実行 [F5] を押してプロジェクトを実行しスタートボタンをクリックします C1ProgressBar は 0.5 秒ごとに1% の割合で更新を開始します更新を停止するにはストップボタンをクリックします 5 Copyright GrapeCity Inc. All rights reserved.

デザイン時のサポート C1ProgressBar はスマートタグおよび充実したデザイン時のサポートを提供するデザイナを備えておりオブジェクトモデルの操作が簡単になっています次のトピックでは C1ProgressBar のデザイン時環境を使用して C1ProgressBar コントロールを設定する方法を説明しますスマートタグとタスクメニュー Visual Studio では

7 デザイン時のサポート C1ProgressBar はスマートタグおよび充実したデザイン時のサポートを提供するデザイナを備えておりオブジェクトモデルの操作が簡単になっています次のトピックでは C1ProgressBar のデザイン時環境を使用して C1ProgressBar コントロールを設定する方法を説明しますスマートタグとタスクメニュー Visual Studio では C1ProgressBar コントロールにスマートタグが含まれますスマートタグは C1ProgressBar で最もよく使用されるプロパティを提供するショートカットタスクメニューです [C1ProgressBar タスク ] メニューにアクセスするには C1ProgressBar コントロールの右上端にあるスマートタグをクリックしますこれによって [C1ProgressBar タスク ] メニューが開きます [C1ProgressBar タスク ] メニューは次のように動作します進行方向を取得進捗インジケータによるプログレスバーの進行方向ラベル文字配置プログレスバーのプログレスラベルの配置値進捗インジケータの値この値は MinValue プロパティと MaxValue プロパティの間のどこかに設定する必要がありますテーマコントロールの Wijmo テーマ 6 種類の組み込みテーマの1つを選択するかこのボックスにカスタムテーマの場所を入力できます新しいテーマの作成 [ 新しいテーマの作成 ] オプションをクリックすると ThemeRoller for Visual Studio が開きますしたがって開発環境内でテーマをカスタマイズすることができますアプリケーションで ThemeRoller for Visual Studio を使用する方法については ThemeRoller for Visual Studio を参照してください CDN の使用 [CDN の使用 ] チェックボックスを ON にすると CDN からクライアントリソースがロードされますこれはデフォルトで OFF です CDN パス 6 Copyright GrapeCity Inc. All rights reserved.

CDN の URL パスを表示します Bootstrap の使用 [Bootstrap の使用 ] オプションを選択するとコントロールに Bootstrap テーマを適用することができますアプリケーションで Bootstrap テーマを使用する方法については Bootstrap for ASP.

8 CDN の URL パスを表示します Bootstrap の使用 [Bootstrap の使用 ] オプションを選択するとコントロールに Bootstrap テーマを適用することができますアプリケーションで Bootstrap テーマを使用する方法については Bootstrap for ASP.NET Web Forms クイックスタートを参照してくださいバージョン情報 [ バージョン情報 ] をクリックすると製品のバージョン情報を確認できるダイアログボックスが表示されますコンテキストメニュー C1ProgressBar には Visual Studio がすべての.NET コントロールや ASP.NET コントロールに提供しているコンテキストメニューで利用できる追加的なコマンドがあります C1ProgressBar コントロール上の任意の場所を右クリックしコンテキストメニューを表示します C1ProgressBar のコンテキストメニューは次のように動作しますスマートタグの表示 [ スマートタグの表示 ] をクリックすると [C1ProgressBar タスク ] メニューが開きます 7 Copyright GrapeCity Inc. All rights reserved.

C1ProgressBar の要素 C1ProgressBar コントロールはユーザーに処理の進捗状況を視覚的に示すグラフィカルユーザーインタフェース要素です C1ProgressBar コントロールはインタラクティブではないという点で ComponentOne for ASP.

9 C1ProgressBar の要素 C1ProgressBar コントロールはユーザーに処理の進捗状況を視覚的に示すグラフィカルユーザーインタフェース要素です C1ProgressBar コントロールはインタラクティブではないという点で ComponentOne for ASP.NET Web Forms の他の大部分のコントロールとは異なりますこのコントロールは処理が実行中であることを示すだけです C1ProgressBar はデフォルトでトラック進捗インジケータおよびラベルという 3 つの異なる要素で構成されます次の図にこれらの要素を示しますトラック : トラックはコントロールの全長にわたって実行されラベルコントロールを含んでいます処理が開始されるとトラックには進捗インジケータが表示されます進捗インジケータ : 進捗インジケータは進行中のタスクの完了状況を視覚的に表現したものですラベル : ラベルコントロールは進捗状況を英数字で表現するために使用されますラベルは6 種類の値を表示できますまたオーバーライドして静的なテキストや静的な数値を表示することもできます次のトピックでは C1ProgressBar の各要素について説明しますトラック C1ProgressBar コントロールのトラックはコントロールの全長にわたりますデフォルトではトラックは単色 ( 通常は灰色 ) で表示されその状態では処理はまだ開始されていません処理が開始されるとトラックは 2 つの対照的な色で表示されます一方は完了した処理量を示しもう一方は残っている処理量を示します C1ProgressBar のトラックのサイズは Width プロパティと Height プロパティを使用して設定しますトラックは向きを垂直または水平に設定できます進捗インジケータ進捗インジケータは最小値と最大値の間で現在の進捗状況を視覚的に表現します進捗インジケータは FillDirection プロパティを使用して右左上または側面から進行するように設定できます FillDirection プロパティは次のように設定できます設定説明 North 進捗インジケータはコントロールの下から上へ進行しますこれによりコントロールの向きが垂直位置に切り替わります South 進捗インジケータはコントロールの上から下へ進行しますこれによりコントロールの向きが垂直位置に切り替わります East West 進捗インジケータはコントロールの左から右へ進行します進捗インジケータはコントロールの右から左へ進行します進捗インジケータは Value プロパティの値と MinValue プロパティおよび MaxValue プロパティの値の比較に基づいたパーセンテージまでトラックを満たしますたとえば MinValue プロパティが 0 に設定され MaxValue が 100 に設定され Value プロパティが 25 に設定されている場合進捗インジケータはトラックの 25% を満たします MinValue プロパティ 8 Copyright GrapeCity Inc. All rights reserved.

10 が 100 に設定され MaxValue が 300 に設定され Value プロパティが 200 に設定されている場合進捗インジケータはトラックの 50% を満たします進捗インジケータは処理が進行中であることを固定的に示したり最新の進捗状況を表示したりできますラベルプログレスバーのラベルは進捗状況を英数字で表現するために使用されますラベルには以下の 6 つの書式のいずれかを表示できますトピック説明 {0} または {ProgressValue} 現在の進捗量を表示します {1} または {PercentProgress} 現在の進捗の割合を表示します {2} または {RemainingProgress} タスク完了までに必要な進捗量を表示します {3} または {PercentageRemaining} 残りの進捗の割合を表示します {4} または {Min} MinValue プロパティの値を表示します {5} または {Max} MaxValue プロパティの値を表示しますラベルをこれらの書式の 1 つに設定するには LabelFormatString プロパティを設定します中カッコの外側には任意のテキストを追加できますたとえば {ProgressValue} % 完了と入力すればタスク完了までに残されている処理の割合が示されますまたツールチップ全体を独自の文字列で上書きすることもできますレベルの配置ラベル要素は LabelAlign プロパティの設定によって複数の異なる配置が可能です以下の設定が使用可能です設定 East West Center North South Running 説明ラベルはコントロールの右側に配置されますラベルはコントロールの左側に配置されますラベルはコントロールの中央に配置されますラベルはコントロールの上部に配置されますラベルはコントロールの下部に配置されますラベルはマーキーとして動作します 9 Copyright GrapeCity Inc. All rights reserved.

11 C1ProgressBar の動作と外観次のトピックでは C1ProgressBar の外観と動作に関連する機能について説明しますこれらの機能の中にはロード時のコントロールの動作に影響を与えるものやユーザーによるコントロールのインタラクティブ操作に影響を与えるものがありますテーマ C1ProgressBar コントロールには 6 種類の組み込みテーマが含まれていますこれらのテーマの 1 つを選択するとページ上の他のすべての ComponentOne for ASP.NET Web Forms コントロールはそれに応じてスキンされますテーマは C1ProgressBar コントロールに次のように表示されます arctic aristo cobalt midnight rocket sterling C1ProgressBar コントロールのテーマを設定するには単に Theme プロパティをいずれかの組み込みテーマに設定しますツールチップ ToolTip プロパティを使用して使いやすいインタフェースを作成できますツールチップは UI 要素に関してユーザーに情報提供できるグラフィカルユーザーインタフェース要素ですユーザーが要素上にマウスポインタを置くと追加的な情報が記載されたボックスが表示されます C1ProgressBar コントロールのツールチップは実行中の処理についてユーザーに情報提供するために使用するのが普通ですそれによってユーザーはその処理がどれくらい続くのかを知ることができます C1ProgressBar コントロールのツールチップには以下の 6 つの書式のいずれかを表示できますトピック説明 {0} または {ProgressValue} 現在の進捗量を表示します {1} または {PercentProgress} 現在の進捗の割合を表示します {2} または {RemainingProgress} タスク完了までに必要な進捗量を表示します {3} または {PercentageRemaining} 残りの進捗の割合を表示します {4} または {Min} MinValue プロパティの値を表示します {5} または {Max} MaxValue プロパティの値を表示しますイージング効果の説明 C1ProgressBar には移動時のプログレスバーの反応を変更する 30 種類以上のアニメーション効果が組み込まれていますデフォルトのイージング効果は Swing ですが Easing プロパティを使用して別の効果に設定できます Animation.Disabled プロパティを True に設定することでアニメーションをすべて OFF にすることもできます 10 Copyright GrapeCity Inc. All rights reserved.

12 下の表で各アニメーション効果について説明します名前 Linear Swing( デフォルト ) EaseInQuad EaseOutQuad EaseInOutQuad EaseInCubic EaseOutCubic EaseInOutCubic EaseInQuart EaseOutQuart EaseInOutQuart EaseInQuint EaseOutQuint EaseInOutQuint EaseInSine EaseOutSine EaseInOutSine EaseInExpo EaseOutExpo EaseInOutExpo EaseInCirc EaseOutCirc EaseInOutCirc EaseInElastic EaseOutElastic EaseInOutElastic EaseInBack EaseOutBack EaseInOutBack EaseInBounce EaseOutBounce EaseInOutBounce 説明直線的なイージング加速も減速もなく滑らかに移動しますこれはデフォルトのアニメーション効果です 2 次型のイージングイン開始は遅くそれから加速します 2 次型のイージングアウト開始は速くそれから減速します 2 次型のイージングインとイージングアウト開始は遅く途中で加速しそれから減速します 3 次型のイージングイン開始は遅くそれから加速します 3 次型のイージングアウト開始は速くそれから減速します 3 次型のイージングインとイージングアウト開始は遅く途中で加速しそれから減速します 4 次型のイージングイン開始は遅くそれから加速します 4 次型のイージングアウト開始は速くそれから減速します 4 次型のイージングインとイージングアウト開始は遅く途中で加速しそれから減速します 5 次型のイージングイン開始は遅くそれから加速します 5 次型のイージングアウト開始は速くそれから減速します 5 次型のイージングインとイージングアウト開始は遅く途中で加速しそれから減速します正弦型のイージングイン開始は遅くそれから加速します正弦型のイージングアウト開始は速くそれから減速します正弦型のイージングインとイージングアウト開始は遅く途中で加速しそれから減速します級数的なイージングイン開始は遅くそれから加速します級数的なイージングアウト開始は速くそれから減速します級数的なイージングインとイージングアウト開始は遅く途中で加速しそれから減速します円形のイージングイン開始は遅くそれから加速します円形のイージングアウト開始は速くそれから減速します円形のイージングインとイージングアウト開始は遅く途中で加速しそれから減速しますしなやかなイージングイン開始は遅くそれから加速しますしなやかなイージングアウト開始は速くそれから減速しますしなやかなイージングインとイージングアウト開始は遅く途中で加速しそれから減速しますバックのイージングイン開始は遅くそれから加速しますバックのイージングアウト開始は速くそれから減速しますバックのイージングインとイージングアウト開始は遅く途中で加速しそれから減速しますバウンドしながらのイージングイン開始は遅くそれから加速しますバウンドしながらのイージングアウト開始は速くそれから減速しますバウンドしながらのイージングインとイージングアウト開始は遅く途中で加速しそれから減速します 11 Copyright GrapeCity Inc. All rights reserved.

13 アニメーションの持続時間 C1ProgressBar のアニメーション効果の長さは Duration プロパティを使用して設定できますアニメーション効果の持続時間の指定に使用される時間の単位はミリ秒であり Duration プロパティのデフォルト設定値は 500 ミリ秒 (0.5 秒 ) ですアニメーション効果を長くするにはこの値を増加させ短くするにはこの値を減少させます 12 Copyright GrapeCity Inc. All rights reserved.

14 タスク別ヘルプタスク別ヘルプのセクションは Visual Studio ASP.NET 環境でのプログラミングに精通し C1ProgressBar コントロールを全般的に理解しているユーザーを対象としています各トピックでは C1ProgressBar コントロールを使用した特定のタスクのソリューションを示します各トピックで説明されている手順に従うことによってさまざまな C1ProgressBar 機能を使用したプロジェクトを作成できますタスク別ヘルプの各トピックでは新しい ASP.NET プロジェクトを既に作成していることを前提としていますラベルのカスタマイズ次のトピックでは C1ProgressBar コントロールのラベル要素をカスタマイズする方法を説明しますラベルの配置デフォルトでは C1ProgressBar コントロールのラベルはコントロールの中央に配置されますこのトピックではデザインビューソースビューおよびコードでラベルの配置を変更する方法を学びますデザインビューでのラベルの配置 1. デザインボタンをクリックしてデザインビューに入ります 2. C1ProgressBar コントロールを右クリックしてそのコンテキストメニューを開き [ プロパティ ] を選択しますプロパティウィンドウが開いて C1ProgressBar コントロールのプロパティがフォーカス状態になります 3. LabelAlign プロパティを指定しそのドロップダウン矢印をクリックしてリストから East を選択します 4. [F5] を押してプロジェクトを実行しラベルがコントロールの右側に表示されることを確認しますソースビューでのラベルの配置 1. ソースボタンをクリックしてソースビューに入ります 2. LabelAlign = East を <cc1:c1progressbar> タグに追加してマークアップを次のように記述しますソースビュー <cc1:c1progressbar ID="C1ProgressBar1" runat="server" LabelAlign="East" /> 3. [F5] を押してプロジェクトを実行しラベルがコントロールの右側に表示されることを確認しますコードでのラベルの配置 1. Visual Studio ツールバーで [ 表示 ] [ コード ] をクリックしてコードビューに入ります 2. 以下の名前空間をプロジェクトにインポートします Imports C1.Web.Wijmo.Controls.C1ProgressBar コードの書き方 13 Copyright GrapeCity Inc. All rights reserved.

15 using C1.Web.Wijmo.Controls.C1ProgressBar; 3. 以下のコードを Page_Load イベントに追加してラベルを配置します C1ProgressBar1.LabelAlign = LabelAlign.East コードの書き方 C1ProgressBar1.LabelAlign = LabelAlign.East; 4. [F5] を押してプロジェクトを実行しラベルがコントロールの右側に表示されることを確認しますこのトピックの作業結果このトピックでは C1ProgressBar コントロールのラベルを右側に配置しましたこのトピックの結果は次のようになりますラベルの書式設定デフォルトでは C1ProgressBar コントロールのラベルには現在の進捗の割合が表示されますこのトピックでは修正された文字列とコントロールの最大値設定が表示されるようにラベルをカスタマイズしますこのトピックは C1ProgressBar コントロールを含む ASP.NET プロジェクトを作成済みであることが前提となりますデザインビューでのラベルの書式設定 1. デザインボタンをクリックしてデザインビューに入ります 2. C1ProgressBar コントロールを右クリックしてそのコンテキストメニューを開きリストから [ プロパティ ] を選択しますプロパティウィンドウが開いて C1ProgressBar コントロールのプロパティがフォーカス状態になります 3. LabelFormatString プロパティを最大値 :{5} に設定します 4. [F5] を押してプロジェクトを実行しマウスポインタを C1ProgressBar コントロール上に置きますラベルにその文字列として最大値 :100 が表示されることを確認してくださいソースビューでのラベルの書式設定 1. ソースボタンをクリックしてソースビューに入ります 2. LabelFormatString = 最大値 :{5} を <cc1:c1progressbar> タグに追加してマークアップを次のように記述しますソースビュー <cc1:c1progressbar ID="C1ProgressBar1" runat="server" Height="22px" LabelFormatString=" 最大値 :{5}" Width="288px> 3. [F5] を押してプロジェクトを実行しマウスポインタを C1ProgressBar コントロール上に置きますラベルにその文字列として最大値 :100 が表示されることを確認してください 14 Copyright GrapeCity Inc. All rights reserved.

16 コードでのラベルの書式設定 1. Visual Studio ツールバーで [ 表示 ] [ コード ] をクリックしてコードビューに入ります 2. 以下の名前空間をプロジェクトにインポートします Imports C1.Web.Wijmo.Controls.C1ProgressBar コードの書き方 using C1.Web.Wijmo.Controls.C1ProgressBar; 3. 以下のコードを Page_Load イベントに追加してラベルをカスタマイズします C1ProgressBar1.LabelFormatString = " 最大値 :{5}" コードの書き方 C1ProgressBar1.LabelFormatString = " 最大値 :{5}"; 4. [F5] を押してプロジェクトを実行しマウスポインタを C1ProgressBar コントロール上に置きますラベルにその文字列として最大値 :100 が表示されることを確認してくださいこのトピックの作業結果このトピックでは C1ProgressBar コントロールのカスタムラベルを作成しました次の図は LabelFormatString プロパティを最大値 :{5} に設定した場合のプログレスバーを示していますテーマの利用このセクションのトピックは組み込みテーマとカスタムテーマを利用する方法を示します組み込みテーマの使用 C1ProgressBar コントロールにはほんの数クリックで適用できる 6 種類の組み込みテーマが用意されていますこのトピックではデザインビューソースビューおよびコードでテーマを変更する方法を説明しますテーマについての詳細はテーマを参照してくださいデザインビューでのテーマの変更 15 Copyright GrapeCity Inc. All rights reserved.

17 1. C1ProgressBar のスマートタグ ( ) をクリックして [C1ProgressBar タスク ] メニューを開きます 2. [ テーマ ] ドロップダウン矢印をクリックしてリストからテーマを選択しますこの例では rocket を選択します rocket テーマが C1ProgressBar コントロールに適用されますソースビュー <cc1:c1progressbar ID="C1ProgressBar1" runat="server" Theme="rocket"/> ソースビューでのテーマの変更ソースビューで C1ProgressBar のテーマを変更するには Theme="rocket" を <cc1:c1progressbar> タグに追加しますその結果次のようになりますソースビュー <cc1:c1progressbar ID="C1ProgressBar1" runat="server" Theme="rocket"/> コードでのテーマの変更 1. 以下の名前空間をプロジェクトにインポートします Imports C1.Web.Wijmo.Controls コードの書き方 using C1.Web.Wijmo.Controls; 2. Theme プロパティを設定する次のコードを Page_Load イベントに追加します C1ProgressBar1.Theme = "rocket" コードの書き方 C1ProgressBar1.Theme = "rocket"; 3. プログラムを実行しますこのトピックの作業結果次の図は rocket テーマが設定された C1ProgressBar コントロールを示していますツールチップの書式設定 16 Copyright GrapeCity Inc. All rights reserved.

18 実行時にユーザーがマウスポインタを C1ProgressBar コントロール上に置いた場合このコントロールはツールチップを表示しますデフォルトではこのツールチップには現在の進捗の割合が表示されますこのトピックでは修正された文字列とコントロールの最大値設定が表示されるようにツールチップをカスタマイズしますこのトピックは C1ProgressBar コントロールを含む ASP.NET Web サイトを作成済みであることが前提となりますデザインビューでのツールチップの書式設定 1. デザインボタンをクリックしてデザインビューに入ります 2. C1ProgressBar コントロールを右クリックしてそのコンテキストメニューを開きリストから [ プロパティ ] を選択しますプロパティウィンドウが開いて C1ProgressBar コントロールのプロパティがフォーカス状態になります 3. ToolTip プロパティを最大値 :{5} に設定します 4. [F5] を押してプロジェクトを実行しマウスポインタを C1ProgressBar コントロール上に置きますツールチップにその文字列として最大値 :100 が表示されることを確認してくださいソースビューでのツールチップの書式設定 1. ソースボタンをクリックしてソースビューに入ります 2. ToolTip = 最大値 :{5} を <cc1:c1progressbar> タグに追加してマークアップを次のように記述しますソースビュー <cc1:c1progressbar ID="C1ProgressBar1" runat="server" Width="288px" Height="22px" Theme="Arctic" ToolTip=" 最大値 :{5}" /> 3. [F5] を押してプロジェクトを実行しマウスポインタを C1ProgressBar コントロール上に置きますツールチップにその文字列として最大値 :100 が表示されることを確認してくださいコードでのツールチップの書式設定 1. Visual Studio ツールバーで [ 表示 ] [ コード ] をクリックしてコードビューに入ります 2. 以下の名前空間をプロジェクトにインポートします Imports C1.Web.Wijmo.Controls.C1ProgressBar コードの書き方 using C1.Web.Wijmo.Controls.C1ProgressBar; 3. 以下のコードを Page_Load イベントに追加してツールチップをカスタマイズします 17 Copyright GrapeCity Inc. All rights reserved.

19 C1ProgressBar1.ToolTip = 最大値 :{5} コードの書き方 C1ProgressBar1.ToolTip = 最大値 :{5} ; 4. [F5] を押してプロジェクトを実行しマウスポインタを C1ProgressBar コントロール上に置きますツールチップにその文字列として最大値 :100 が表示されることを確認してくださいこのトピックの作業結果このトピックでは C1ProgressBar コントロールのカスタムツールチップを作成しました次の図は ToolTip プロパティを最大値 :{5} に設定した場合のプログレスバーを示しています進捗インジケータの進行方向の変更デフォルトでは進捗インジケータはコントロールの左側からトラックを進行します進行方向は FillDirection という 1 つのプロパティを設定することで右下または上から進行するように変更できますこのトピックではデザインビューソースビューおよびコードで FillDirection プロパティを設定しますデザインビューでの進行方向の変更 1. デザインボタンをクリックしてデザインビューに入ります 2. C1ProgressBar コントロールを右クリックしてそのコンテキストメニューを開き [ プロパティ ] を選択しますプロパティウィンドウが開いて C1ProgressBar コントロールのプロパティがフォーカス状態になります 3. プロパティウィンドウで FillDirection プロパティを設定しますこの例では West に設定しますソースビューでの進行方向の変更 1. ソースボタンをクリックしてソースビューに入ります 2. FillDirection="West" を <cc1:c1progressbar> のタグに追加しますマークアップは次のような表示になります Title Text <cc1:c1progressbar ID="C1ProgressBar1" runat="server" FillDirection = "West" Value="100" AnimationDuration="6000"/> コードでの進行方向の変更 1. Visual Studio ツールバーで [ 表示 ] [ コード ] をクリックしてコードビューに入ります 2. 以下の名前空間をプロジェクトにインポートします 18 Copyright GrapeCity Inc. All rights reserved.

20 Imports C1.Web.Wijmo.Controls.C1ProgressBar コードの書き方 using C1.Web.Wijmo.Controls.C1ProgressBar; 3. 次のコードを Page_Load イベントに追加します FillDirection プロパティを FromRightOrBottom に設定 C1ProgressBar1.FillDirection = FillDirection.West コードの書き方 // FillDirection プロパティを FromRightOrBottom に設定 C1ProgressBar1.FillDirection = FillDirection.West; アニメーションの設定 C1ProgressBar コントロールは 31 種類の組み込みアニメーションを備えていますこのトピックではデザインビューソースビューおよびコードでアニメーションアニメーションの持続時間およびアニメーションの遅延時間を設定しますデザインビューでのアニメーションの設定 1. デザインボタンをクリックしてデザインビューに入ります 2. C1ProgressBar コントロールを右クリックしてそのコンテキストメニューを開き [ プロパティ ] を選択しますプロパティウィンドウが開いて C1ProgressBar コントロールのプロパティがフォーカス状態になります 3. プロパティウィンドウで以下のプロパティを設定します AnimationOptions.Easing プロパティを EaseOutBounce に設定しますこれによってアニメーション効果が設定されます AnimationOptions.Duration プロパティを 6000 に設定しますこれによってアニメーションの長さが設定されます AnimationDelay プロパティを 500 に設定しますこれによりアニメーションが始まるまでの経過時間が設定されます Value プロパティを 100 に設定しますこれによって実行時に進捗インジケータがトラック上を進行するようになります 4. [F5] を押してプロジェクトを実行しますアニメーションの開始までに約 0.5 秒かかり完了には6 秒かかることを確認してくださいアニメーション EaseOutBounce が設定されると進捗インジケータはトラックの終端に当たってバウンドしてから安定した状態に落ち着きますソースビューでのアニメーションの設定 1. ソースボタンをクリックしてソースビューに入ります 2. AnimationDelay="500" を <cc1:c1progressbar> タグに追加してマークアップを次のように記述します 19 Copyright GrapeCity Inc. All rights reserved.

21 ソースビュー <cc1:c1progressbar ID="C1ProgressBar1" runat="server" AnimationDelay="500"> </cc1:c1progressbar> 3. <cc1:c1progressbar> タグの間に次のマークアップを置きますソースビュー <AnimationOptions Duration="6000" Easing="EaseOutBounce" /> 4. [F5] を押してプロジェクトを実行しますアニメーションの開始までに約 0.5 秒かかり完了には 6 秒かかることを確認してくださいアニメーション EaseOutBounce が設定されると進捗インジケータはトラックの終端に当たってバウンドしてから安定した状態に落ち着きますコードでのアニメーションの設定 1. Visual Studio ツールバーで [ 表示 ] [ コード ] をクリックしてコードビューに入ります 2. 次のコードを Page_Load イベントに追加しますアニメーションのプロパティを設定 C1ProgressBar1.AnimationDelay = 500; C1ProgressBar1.AnimationOptions.Duration = 6000; C1ProgressBar1.AnimationOptions.Easing = C1.Web.Wijmo.Controls.Easing.EaseOutBounce; 進捗インジケータが実行時に自動的に進行するように Value プロパティを設定 C1ProgressBar1.Value = 100 コードの書き方 // アニメーションのプロパティを設定 C1ProgressBar1.AnimationDelay = 500; C1ProgressBar1.AnimationOptions.Duration = 6000; C1ProgressBar1.AnimationOptions.Easing = C1.Web.Wijmo.Controls.Easing.EaseOutBounce; // 進捗インジケータが実行時に自動的に進行するように Value プロパティを設定 C1ProgressBar1.Value = 100; 3. [F5] を押してプロジェクトを実行しますアニメーションの開始までに約 0.5 秒かかり完了には 6 秒かかることを確認してくださいアニメーション EaseOutBounce が設定されると進捗インジケータはトラックの終端に当たってバウンドしてから安定した状態に落ち着きます値の設定 C1ProgressBar コントロールには最小値最大値および値がありますこのトピックではデザインビューソースビューおよびコードで MinValue MaxValue Value の各プロパティの値をデフォルト値 ( それぞれ ) から変更しますデザインビューでの値の設定 20 Copyright GrapeCity Inc. All rights reserved.

22 1. デザインボタンをクリックしてデザインビューに入ります 2. C1ProgressBar コントロールを右クリックしてそのコンテキストメニューを開き [ プロパティ ] を選択しますプロパティウィンドウが開いて C1ProgressBar コントロールのプロパティがフォーカス状態になります 3. プロパティウィンドウで以下のプロパティを設定します MaxValue プロパティを 300 に設定します MinValue プロパティを 100 に設定します Value プロパティを 150 に設定します 4. [F5] を押してプロジェクトを実行し進捗インジケータがプログレスバーの4 分の1だけ進行していることを確認しますこれはコントロールの値 (150) が最小値 (100) と最大値 (300) の間隔の4 分の1であるためですソースビューでの値の設定 1. ソースボタンをクリックしてソースビューに入ります 2. MinimumValue= 100 MaximumValue= 300 および Value= 150 を <cc1:c1progressbar> タグに追加してマークアップを次のように記述しますソースビュー <cc1:c1progressbar ID="C1ProgressBar1" runat="server" ToolTip=" 最大値 :{5}" LabelFormatString="{0}" MaximumValue="300" MinimumValue="100" Value="150" /> 3. [F5] を押してプロジェクトを実行し進捗インジケータがプログレスバーの 4 分の 1 だけ進行していることを確認しますこれはコントロールの値 (150) が最小値 (100) と最大値 (300) の間隔の 4 分の 1 であるためですコードでの値の設定 1. アニメーションを設定するには 2. Visual Studio ツールバーで [ 表示 ] [ コード ] をクリックしてコードビューに入ります 3. MaxValue プロパティを設定するには次のコードを Page_Load イベントに追加します C1ProgressBar1.MaxValue = 300 コードの書き方 C1ProgressBar1.MaxValue = 300; 4. MinValue プロパティを設定するには次のコードを Page_Load イベントに追加します C1ProgressBar1.MinValue = 100 コードの書き方 C1ProgressBar1.MinValue = 100; 21 Copyright GrapeCity Inc. All rights reserved.

23 5. Value プロパティを設定するには次のコードを Page_Load イベントに追加します C1ProgressBar1.Value = 150 コードの書き方 C1ProgressBar1.Value = 150; 6. [F5] を押してプロジェクトを実行し進捗インジケータがプログレスバーの 4 分の 1 だけ進行していることを確認しますこれはコントロールの値 (150) が最小値 (100) と最大値 (300) の間隔の 4 分の 1 であるためです 22 Copyright GrapeCity Inc. All rights reserved.

Expander for ASP.NET Web Forms

Expander for ASP.NET Web Forms 2018.04.12 更新グレープシティ株式会社目次製品の概要 2 ComponentOne for ASP.NET Web Forms のヘルプ 2 主な特長 3 クイックスタート 4 手順 1: ページへのコントロールの追加 4-5 手順 2: コントロールへのコンテンツの追加 5-6 手順 3: コントロールの外観と動作のカスタマイズ 6-7 C1Expander の要素 8 ヘッダー要素