ここでは、次の手順を実行して、BinaryImage コントロールで画像をロードして設定する方法を学びます。
以下の手順は、Visual Studio 2012 で作成されたアプリケーション用です。使用する Visual Studio のバージョンによっては、手順が多少異なる場合があります。
手順１/３：Web フォームへの BinaryImage の追加
- Visual Studio で、新しい ASP.Net Web アプリケーションを作成し、新しい Web フォームを追加します。
- ツールボックスで BinaryImage コントロールを見つけ、Web フォームにドラッグします。ツールボックスでコントロールが見つからない場合は、右クリックして［項目の選択］を選択し、［ツールボックス項目の選択］ダイアログボックスで BinaryImage を見つけます。
手順２/３：コントロールへの画像の追加
この手順では、ロードする画像が埋め込みリソースとしてプロジェクトに含まれていることを前提としています。
- BinaryImage コントロールで、スマートタグ
をクリックして［BinaryImage Tasks］メニューを開きます。 - ImageUrl プロパティの横にあるボタン
をクリックします。［イメージの選択］ダイアログボックスが表示されます。 - ［イメージの選択］ダイアログボックスで、ロードする画像を選択し、［OK］をクリックします。
ヒント：ImageUrl フィールドで URL を指定して画像をロードすることもできます。詳細については、「外部画像の追加」を参照してください。
ソースビューの場合
ImageUrl プロパティを <cc1:C1BinaryImage> タグ内で設定して、BinaryImage コントロールに画像を追加します。
<cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="~/C1.png" />
コードの場合
次のコードを Page_Load イベントに追加して、BinaryImage コントロールに画像を追加します。
C# でコードを書く場合
| C# |
コードのコピー
|
|---|---|
| C1BinaryImage1.ImageUrl = "C1.png"; |
|
Visual Basic でコードを書く場合
| Visual Basic |
コードのコピー
|
|---|---|
| C1BinaryImage1.ImageUrl = "C1.png" |
|
ここまでの成果
プロジェクトを実行し、画像が元のサイズで表示されることを確認します。
手順３/３：画像の設定
- BinaryImage コントロールで、スマートタグ をクリックして［BinaryImage Tasks］メニューを開きます。
- ［高さ］を "300px" に、［幅］ を "400px" に設定します。
- [サイズ変更モード] を "Fit" に設定します。
ソースビューの場合
Height（高さ）、Width（幅）、および ResizeMode（サイズ変更モード）を <cc1:C1BinaryImage> タグ内で設定して、BinaryImage コントロール内の画像の設定を行います。
<cc1:C1BinaryImage ID="C1BinaryImage1" runat="server" ImageUrl="~/C1.png" Height="100px" ResizeMode="Fit" Width="100px" />
コードの場合
次のコードを Page_Load イベントに追加して、BinaryImage コントロールを設定します。
C# でコードを書く場合
| C# |
コードのコピー
|
|---|---|
| C1BinaryImage1.Height = 300; C1BinaryImage1.Width = 400; C1BinaryImage1.ResizeMode = C1.Web.Wijmo.Controls.C1BinaryImage.ImageResizeMode.Fit; |
|
Visual Basic でコードを書く場合
| Visual Basic |
コードのコピー
|
|---|---|
| C1BinaryImage1.Height = 300 C1BinaryImage1.Width = 400 C1BinaryImage1.ResizeMode = C1.Web.Wijmo.Controls.C1BinaryImage.ImageResizeMode.Fit |
|
ここまでの成果
プロジェクトを実行すると、画像が希望の高さと幅にサイズ変更されて、Web ページに収まります。
