情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

クイックスタート: Windows Phone のブラシ

2014/06/18

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

Windows Phone では、画面にオブジェクトを描画するには Brush オブジェクトを使用します。このクイックスタートでは、Windows Phone のさまざまなブラシとその使い方を紹介します。

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

領域を単色、グラデーション、またはイメージで塗りつぶすには、 Brush オブジェクトを使用します。ブラウザーで実行する Windows Phone アプリでのブラシの動作をよく知っているユーザーにとって、Windows Phone でブラシの動作がまったく同じであることは大変便利です。ただし例外として、Windows Phone は VideoBrush ではサポートされていません。

画面に ShapeControl などのオブジェクトを描画するには、Brush を使用します。Shape または BackgroundFill プロパティ、および ControlForeground プロパティを、希望する Brush に設定します。

Windows Phone のブラシの種類には、SolidColorBrushLinearGradientBrushRadialGradientBrush、および ImageBrush があります。

SolidColorBrush は、領域を 1 つの Color (赤、青など) でペイントします。XAML で SolidColorBrush および色を定義するには、3 通りの方法があります。定義済みのカラー名、16 進数のカラー値、またはプロパティ要素の構文を使用できます。

定義済みのカラー名

定義済みのカラー名 (YellowSlateBlue など) を使用して、ShapeFill プロパティまたは ControlBackground および Foreground プロパティを設定できます。XAML パーサーにより、カラー名が正しいカラー チャネルを含む Color 構造体に変換されます。

メモメモ:

定義済みのカラー名および対応する 16 進数値の一覧については、Color 構造体を参照してください。

RectangleFill プロパティを定義済みのカラー Red に設定する例を次に示します。

<StackPanel>
    <Rectangle Width="100" Height="100" Fill="Red" />
</StackPanel>

16 進数のカラー値

16 進数のカラー値を使用して、ShapeFill プロパティまたは ControlBackground および Foreground プロパティを設定できます。16 進数値の構造は、alpha チャネル (不透明度)、red チャネル、green チャネル、および blue チャネルです。たとえば、16 進数値 #FFFF0000 は、完全に不透明な赤 (alpha=FF、red=FF、green=00、blue=00) を定義します。

RectangleFill プロパティを、16 進数値 #FFFF0000 に設定する例を次に示します。

<StackPanel>
    <Rectangle Width="100" Height="100" Fill="#FFFF0000" />
</StackPanel>

プロパティ要素の構文

プロパティ要素の構文を使用して SolidColorBrush を定義することができます。この構文は、上記の方法よりも記述は冗長になりますが、ブラシの Opacity などの追加の設定を指定できます。プロパティ要素の構文も含めて XAML 構文の詳細については、「クイックスタート: XAML での Windows Phone 8 のユーザー インターフェイスの作成」を参照してください。

Rectangle を作成し、Fill プロパティの SolidColorBrush を明示的に作成する例を次に示します。SolidColorBrushColorBlue に設定され、Opacity0.5 に設定されます。

Brushes - SolidColorBrush
<Grid>
    <Rectangle Width="200" Height="150">
        <Rectangle.Fill>
            <SolidColorBrush Color="Blue" Opacity="0.5" />
        </Rectangle.Fill>
    </Rectangle>
</Grid>

LinearGradientBrush は、グラデーション軸という線に沿って定義されたグラデーションで領域を塗りつぶします。GradientStop オブジェクトを使用して、グラデーションの色、およびグラデーション軸に沿った位置を指定します。グラデーション軸を変更することもでき、これによって、横グラデーションと縦グラデーションの作成、およびグラデーション方向の反転が可能になります。

GradientStop はグラデーション ブラシの基本的なビルド ブロックです。グラデーション終了位置は、グラデーション軸に沿った Offset 位置の Color を指定します。

グラデーション終了位置の Color プロパティは、グラデーション終了位置の色を指定します。色の設定には、定義済みのカラー名を使用するか、16 進数形式の ARGB 値を指定できます。

グラデーション終了位置の Offset プロパティは、グラデーション軸上のグラデーション終了位置の色の位置を指定します。Offset は 0 ~ 1 の Double 値です。グラデーション終了位置のオフセット値が 0 に近づくにつれて、色はグラデーションの始点に近づきます。グラデーションのオフセット値が 1 に近づくほど、色はグラデーションの終点に近づきます。

4 色の線形グラデーションを作成し、それを使用して Rectangle を塗りつぶす例を次に示します。

<StackPanel>
    <!-- This rectangle is painted with a diagonal linear gradient. -->
    <Rectangle Width="400" Height="200">
        <Rectangle.Fill>
            <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                <GradientStop Color="Yellow" Offset="0.0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1.0" />
            </LinearGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</StackPanel>

次のイメージは Windows Phone でのグラデーションの外見を示しています。

Brushes - LinearGradient

グラデーション終了位置の間の各点の色は、2 つの境界グラデーション終了位置によって指定された色の組み合わせとして線形に補間されます。次の図は、前の例のグラデーション終了位置を示しています。円はグラデーション終了位置の位置を示し、破線はグラデーション軸を示しています。

Brushes - Linear gradients stops

ブラシの StartPoint および EndPoint プロパティを設定することにより、グラデーションの終了位置を指定する線を変更できます。ブラシの StartPoint および EndPoint を操作することによって、横グラデーションおよび縦グラデーションの作成、グラデーション方向の反転、グラデーションの拡散の縮小などを行うことができます。

LinearGradientBrushFill として含む Rectangle を作成する例を次に示します。LinearGradientBrush は、2 つの GradientStops (1 つは赤、もう 1 つは青) を作成します。赤の GradientStops は、Offset0 に設定され、青の GradientStops は、Offset.75 に設定されています。StartPoint は (0,0) に設定され、EndPoint は (1,1) に設定されています (どちらも既定値)。GradientSpreadMethod は、グラデーションを描画する別の方法を表します。この例のスライダーを使用して、さまざまなプロパティ値を試すことができます。

LinearGradientBrush と同様に、LinearGradientBrush は軸に沿ってブレンドしあう複数の色で領域を塗りつぶします。放射状グラデーション ブラシの軸は、円によって定義されます。色は原点から外側に向かって放射されます。放射状グラデーションの定義には、GradientOriginCenterRadiusX、および RadiusY プロパティを使用します。

<StackPanel>
    <!-- This rectangle is painted with a radial gradient. -->
    <Rectangle Width="400" Height="200">
        <Rectangle.Fill>
            <RadialGradientBrush GradientOrigin="0.5,0.5" Center="0.5,0.5" RadiusX="0.5" RadiusY="0.5">
                <GradientStop Color="Yellow" Offset="0" />
                <GradientStop Color="Red" Offset="0.25" />
                <GradientStop Color="Blue" Offset="0.75" />
                <GradientStop Color="LimeGreen" Offset="1" />
            </RadialGradientBrush>
        </Rectangle.Fill>
    </Rectangle>
</StackPanel>

4 つの GradientStop 設定値を使用して放射状グラデーションを作成する例を次に示します。

Brushes - Radial Gradient

前の例で作成したグラデーションを次の図に示します。ブラシのグラデーション終了位置が示されています。結果は異なりますが、この例のグラデーション終了位置は前の線形グラデーション ブラシの例のグラデーション終了位置と同じであることに注意してください。

Brushes - Radial Gradient - callouts

さまざまな GradientOriginCenterRadiusX、および RadiusY の設定を使用した複数の放射状グラデーションを次の図に示します。

Brushes - Radial Gradient - Brush setting

RadialGradientBrushFill として含む Rectangle を作成する例を次に示します。RadialGradientBrush は、2 つの GradientStops (1 つは赤、もう 1 つは青) を作成します。赤の GradientStops は、Offset0 に設定され、青の GradientStops は、Offset.75 に設定されています。GradientOriginCenter は、すべて (0.5, 0.5) に設定され、RadiusXRadiusY は、既定値の 0.5 に設定されています。この例のスライダーを使用して、さまざまなプロパティ値を試すことができます。

ImageBrush は、イメージで領域を塗りつぶします。ImageSource プロパティで指定する JPEG イメージまたは PNG イメージで領域が塗りつぶされます。ImageSource プロパティには、読み込むイメージのパスを設定します。

ImageBrush の既定の設定では、対象の領域を完全に塗りつぶすようにイメージが引き伸ばされるので、塗りつぶす領域の縦横比がイメージの縦横比と異なる場合にイメージがゆがむことがあります。この動作を変更するには、Stretch プロパティを既定値の Fill から NoneUniform、または UniformToFill に変更します。

ImageBrush を作成し、ImageSource を flower.jpg というイメージ (アプリにリソースとして格納済み) に設定する例を次に示します。

Brushes - ImageBrush

表示: