Silverlight では、写真や図などのイメージを表示するためのオプションが用意されています。このクイックスタートでは、イメージを Silverlight ベースのアプリケーションに統合する方法について説明します。
このクイックスタートは、次のセクションで構成されています。
詳細については、MSDN の Silverlight ドキュメントの「グラフィックス」を参照してください。
Image と ImageBrush
イメージを描画するには、Image オブジェクトまたは ImageBrush オブジェクトを使用します。次に Image オブジェクトを使用してイメージを作成する例を示します。
XAML
<Image Width="400" Source="licorice.JPG" />
この例では、Source プロパティを使用して、表示したいイメージの場所を指定しています。Source を設定するには、絶対 URL (例: http://contoso.com/myPicture.jpg) を指定するか、アプリケーションの XAP ファイルを起点とする相対 URL を指定します。前の例では、XAP ファイルを licorice.jpg と同じフォルダーに格納しています。
メモ
Silverlight でサポートされないイメージ形式もあります。Image で使用できるイメージ ソースの種類とファイル形式の詳細については、「BitmapImage クラス」を参照してください。
ImageBrush オブジェクトを使用すると、Brush オブジェクトが使用可能な領域をイメージで塗りつぶすことができます。たとえば、ImageBrush は、Panel の Background プロパティの値として使用できます。ブラシの詳細については、MSDN の Silverlight ドキュメントの「ブラシ」を参照してください。
次の例は、リコリス キャンデーのイメージを使用してテキストの内側を塗りつぶしたものです。
XAML
<!-- TextBlock with an image brush applied to the text. --> <TextBlock Margin="20" FontFamily="Verdana" FontSize="86" FontWeight="Bold"> LICORICE <TextBlock.Foreground> <ImageBrush ImageSource="licorice.JPG"/> </TextBlock.Foreground> </TextBlock>
イメージの引き伸ばし
Image の Width または Height を設定しない場合、Source に指定したイメージのサイズで表示されます。Width と Height を設定すると、イメージが表示される四角形の領域が作成されます。この領域をイメージで塗りつぶす方法は、Stretch プロパティで指定できます。Stretch プロパティには、Stretch 列挙体によって定義された次の値を指定できます。
- None: イメージを引き延ばさずに出力サイズの領域を塗りつぶします。
- Uniform: イメージは、出力サイズに合わせてスケーリングされます。ただし、コンテンツの縦横比は保持されます。これが既定値です。
- UniformToFill: イメージは、コンテンツの元の縦横比を維持しながら、出力領域を完全に覆うようにスケーリングされます。
- Fill: イメージは、出力サイズに合わせてスケーリングされます。コンテンツの高さと幅は別々にスケーリングされるため、イメージの元の縦横比が維持されない場合があります。つまり、出力領域を完全に覆うために、イメージがゆがんだ形になる可能性があります。
次の図に、さまざまな状態の Stretch 設定を示します。
イメージのトリミング
Clip プロパティを使用して、イメージの出力の一部をトリミングして切り出すことができます。Clip プロパティを Geometry に設定すると、さまざまなジオメトリック形状 (楕円、線分、複雑なパスなど) を使用してイメージをトリミングすることができます。ジオメトリの作成に関する詳細については、MSDN の Silverlight ドキュメントの「ジオメトリ」を参照してください。
EllipseGeometry をイメージのクリップ領域として使用する方法を次の例に示します。この例では、Width が 200、Height が 150 の Image オブジェクトを定義します。RadiusX 値が 100、RadiusY 値が 75 、Center 値が 100,75 の EllipseGeometry をイメージの Clip プロパティに設定します。イメージは、楕円の領域内にある部分だけが表示されます。
XAML
<Grid x:Name="LayoutRoot" Background="White"> <Image Source="Water_lilies.jpg" Width="200" Height="150"> <Image.Clip> <EllipseGeometry RadiusX="100" RadiusY="75" Center="100,75"/> </Image.Clip> </Image> </Grid>
この例の出力を次の図に示します。
OpacityMask の適用
OpacityMask をイメージに適用することで、ビネット効果などの不透明度を利用したさまざまな写真マスク手法を使用できます。放射状のグラデーションをイメージに適用して、エッジをフェードアウトさせる方法 (ビネット効果) を、次の例に示します。
XAML
<Image Source="licorice.jpg" > <Image.OpacityMask> <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5"> <!-- These Gradient Stop colors are only changing the alpha values so the image fades out toward the edges. --> <GradientStop Color="#ffffffff" Offset="0.5" /> <GradientStop Color="#00ffffff" Offset="0.8" /> </RadialGradientBrush>
</Image.OpacityMask> </Image>
メモ
不透明マスクには、さまざまな Brush オブジェクトを使用できます。詳細については、MSDN の Silverlight ドキュメントの「ブラシ」を参照してください。
イメージのズームとパン
Deep Zoom というテクノロジを使用して、大きなイメージや高解像度イメージのコレクションのズームやパンを実行できます。
Deep Zoom の使用例については、Hard Rock Memorabilia のサイトを参照してください。イメージを拡大および縮小するにはマウス ホイールを使用し、イメージを移動するにはマウスでドラッグします。
Deep Zoom の詳細については、「クイックスタート: Deep Zoom」を参照してください。
参照
フィードバックを送信する