このページは役に立ちましたか。
このページのコンテンツについての ご意見をお待ちしております
その他にご意見はありますか。
残り 1500 文字
エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

クイックスタート: Windows Phone のイメージ

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 | Windows Phone OS 7.1

Windows Phone では、画像やダイアグラムなどのイメージを表示する方法が複数あります。このクイックスタートでは、Windows Phone アプリにイメージを統合する方法について説明します。

このトピックは、次のセクションで構成されています。

イメージを表示するには、Image オブジェクトまたは ImageBrush オブジェクトを使用します。Image オブジェクトを使用して licorice.jpg というイメージを表示する例を次に示します。

<Image Source="licorice.JPG" />

エミュレーターで実行している例を次の図に示します。

Image display

この例では、Source プロパティを使用して、表示するイメージの場所を指定しています。Source を設定するには、絶対的 URL (たとえば http://contoso.com/myPicture.jpg など) を指定するか、またはアプリの XAP ファイルに含まれるファイルの URL を指定します。アプリにイメージ ファイルを追加するには、Visual Studio で次のアクションを実行します。

  1. [プロジェクト] メニューの [既存項目の追加] をクリックします。

  2. 必要なイメージ ファイルを選択し、[追加] をクリックします。

  3. ソリューション エクスプローラーで、追加されたイメージ ファイルを選択します。

  4. [プロパティ] ウィンドウで、[ビルド アクション] プロパティを [コンテンツ] に変更します。

アプリがビルドされる時点で、XAP にイメージ ファイルが組み込まれます。

メモメモ:

Windows Phone では、すべてのイメージ形式がサポートされるわけではありません。BitmapImage クラスを使用すると、JPEG および PNG ファイル形式のイメージを参照できます。Image で使用できるイメージ ソースの種類とファイル形式の詳細については、BitmapImage を参照してください。

ImageBrush オブジェクトを使用すると、イメージを使用して Brush オブジェクトで領域を塗りつぶすことができます。たとえば、ImageBrush は、Background プロパティの値が Panel である場合に使用できます。Windows Phone でのブラシの詳細については、「クイックスタート: Windows Phone のブラシ」を参照してください。

テキストの内側をリコリスのイメージで塗りつぶす例を次に示します。

<!-- TextBlock with an image brush applied to the text. -->
<TextBlock Margin="20"
    Text="LICORICE"
    FontFamily="Verdana"
    FontSize="80"
    FontWeight="Bold">
    <TextBlock.Foreground>
        <ImageBrush ImageSource="licorice.JPG"/>
    </TextBlock.Foreground>
</TextBlock>

エミュレーターで実行している例を次の図に示します。

Image display

ImageWidth 値または Height 値を設定しない場合、Source で指定されている寸法を使ってイメージが表示されます。Width および Height を設定すると、イメージを取り囲む四角形の領域が作成され、その中にイメージが表示されます。この領域をイメージで塗りつぶす方法は、Stretch プロパティで指定します。Stretch プロパティは、Stretch 列挙体によって定義された次の値を受け入れます。

  • None: イメージを引き伸ばさずに出力サイズの領域を塗りつぶします。

  • Uniform: イメージは、出力サイズに合わせてスケーリングされます。ただし、コンテンツの縦横比は保持されます。これが既定値です。

  • UniformToFill: イメージは、コンテンツの元の縦横比を維持しながら、出力領域を完全に覆うようにスケーリングされます。

  • Fill: イメージは、出力サイズに合わせてスケーリングされます。コンテンツの高さと幅は別々にスケーリングされるため、イメージの元の縦横比が維持されない場合があります。つまり、出力領域を完全に覆うために、イメージがゆがんだ形になる可能性があります。

次の図に、Stretch のさまざまな設定を示します。

Image Stretch enum

Clip プロパティを使用して、Image 出力から特定の領域をトリミングすることができます。Clip プロパティを Geometry に設定すると、さまざまなジオメトリック形状 (楕円パス、線分、複雑なパスなど) を使って Image をトリミングすることができます。

EllipseGeometryImage のクリップ領域として使用する方法を次の例に示します。この例では、Image オブジェクトの定義で Source プロパティをイメージ ファイルに設定しています。RadiusX 値を 125RadiusY 値を 100、および Center 値を 225,175 に指定した EllipseGeometry を、ImageClip プロパティに設定します。イメージの楕円の領域内の部分だけが表示されます。

<Image Source="Licorice.JPG">
    <Image.Clip>
        <EllipseGeometry RadiusX="125" RadiusY="100" Center="225,175"/>
    </Image.Clip>
</Image>

エミュレーターで実行している例を次の図に示します。

Image Clipping

ImageOpacityMask を適用することで、次の図に示すビネット効果などの不透明度を利用した写真マスク手法を使用できます。

エッジ部分でのフェード アウト (ビネット効果) を使用するため、Image に放射状グラデーションを適用する例を次に示します。

<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>

エミュレーターで実行している例を次の図に示します。

Image OpacityMask
メモメモ:

さまざまな Brush オブジェクトを不透明マスクとして使用できます。Windows Phone でのブラシの詳細については、「クイックスタート: Windows Phone のブラシ」を参照してください。

WriteableBitmap は、変更可能な BitmapSource を提供します。これにより、イメージをすばやく変更して更新後のイメージを再描画できます。

BitmapSource、新しいビットマップの寸法、または UIElementWriteableBitmap コンストラクターに渡すことができます。UIElement を渡すことにより、ビジュアル要素のビットマップ イメージが作成されます。たとえば、ビジュアル ツリー全体のビットマップが必要な場合、ルートの UIElement をコンストラクターに渡します。

WriteableBitmapPixels プロパティは、ビットマップの 2D テクスチャを表す配列です。この配列内のピクセル値を変更することにより、ビットマップ イメージを変更できます。

メモメモ:

WriteableBitmap で使用される形式は ARGB32 (前乗算された RGB) です。したがって、WriteableBitmap の Pixel 配列内のピクセルは、プリマルチプライ済みの色として保存されます。各カラー チャネルは、アルファ値でプリマルチプライされます。

メモメモ:

MediaElement オブジェクトは、WriteableBitmap キャプチャで表示されません。これは、Windows Phone では MediaElement が完全にハードウェアで描画されるためです。

次のコード例で、Image オブジェクトから WriteableBitmap イメージを作成し、WriteableBitmap を変更する方法を示します。WriteableBitmap を作成するため、Image オブジェクトの Source プロパティを BitmapSource にキャストし、WriteableBitmap コンストラクターに渡します。Modify Pixels ボタンがクリックされると、イベント ハンドラーがビットマップの Pixels 配列を反復処理し、4 番目の各ピクセルをそれぞれ黒に設定します。Image オブジェクトが変更後のビットマップに設定され、再描画されます。

<StackPanel>
    <Image Name="ImageToModify" Source="licorice.jpg" />
    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="30" >
        <Button Name="ButtonModify" Content="Modify Pixels" Click="ButtonModify_Click" />
        <Button Name="ButtonReset" Content="Reset Image" Click="ButtonReset_Click" />
    </StackPanel>
</StackPanel>
Private Sub ButtonModify_Click(sender As Object, e As RoutedEventArgs)
    Dim pixelTarget As Integer = 4
    If ImageToModify.Source IsNot Nothing Then
        ' Get WriteableBitmap. ImageToModify is defined in MainPage.xaml
        Dim bitmap As New WriteableBitmap(TryCast(ImageToModify.Source, BitmapSource))
        ' Iterate through each pixel.
        For x As Integer = 0 To bitmap.Pixels.Length - 1
            ' Set every 4th pixel.
            If x Mod pixelTarget = 0 Then
                bitmap.Pixels(x) = 0
            End If
        Next
        ' Set Image object, defined in XAML, to the modified bitmap.
        ImageToModify.Source = bitmap
    End If
End Sub

Private Sub ButtonReset_Click(sender As Object, e As RoutedEventArgs)
    Dim licoriceImage As New BitmapImage(New Uri("licorice.jpg", UriKind.Relative))
    ImageToModify.Source = licoriceImage
End Sub

BitmapImageImageSource として使用すると、イメージのリソース要件とパフォーマンスをより詳細に制御できます。

縮小したサイズでイメージを読み込むには、イメージの DecodePixelWidth プロパティおよび DecodePixelHeight プロパティを設定してからイメージを読み込みます。これらのプロパティを使用しないと、イメージは表示されるときの小さいサイズではなく元のサイズでキャッシュされるため、アプリケーションは不必要なリソースを消費します。縦横比を維持するには、これらのプロパティの両方ではなくいずれか 1 つを設定します。

パフォーマンスを向上させるには、BackgroundCreation を指定してバックグラウンド スレッドでイメージをデコードし、UI スレッドをブロックしないようにします。

表示:
© 2015 Microsoft