影

.NET マルチプラットフォーム アプリ UI (.NET MAUI) Shadow クラスは、レイアウトまたはビューの周囲に影を描画します。 VisualElement クラスには、任意のレイアウトまたはビューにシャドウを追加できるようにする、Shadow型の Shadow バインド可能なプロパティがあります。

Shadow クラスは、次のプロパティを定義します。

• Radiusは、floatタイプの影を生成する際に使用されるぼかしの半径を定義します。 このプロパティの既定値は 10 です。
• float型の Opacityは、影の不透明度を示します。 このプロパティの既定値は 1 です。
• Brush型の Brushは、影の色付けに使用されるブラシを表します。
• Offset、Point型の場合は、影を作成する光源の位置を表す影のオフセットを指定します。

これらのプロパティは、BindableProperty オブジェクトによってサポートされます。つまり、データ バインディングのターゲットとしてスタイルを設定できます。

大事な

Brush プロパティは現在、SolidColorBrushのみをサポートしています。

影を作成する

コントロールに影を追加するには、コントロールの Shadow プロパティを、影を定義する書式設定された文字列に設定します。 サポートされている文字列形式は 3 つあります。

• color, offset X, offset Y:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="#000000 4 4" />
  

• offset X, offset Y, radius, color:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="5 8 8 rgb(6, 201, 198)" />    
  

• offset X, offset Y, radius, color, opacity:

  <Image Source="dotnet_bot.png"
         WidthRequest="250"
         HeightRequest="310"
         Shadow="4 4 16 AliceBlue 0.5" />
  

色は、次の形式で指定できます。

形式	例	コメント
16進数	#rgb、 #argb、 #rrggbb、 #aarrggbb
RGB	rgb(255,0,0)、rgb(100%,0%,0%)	有効な値は、0から255または0%-100%の範囲です。
RGBA	rgba(255, 0, 0, 0.8)、rgba(100%, 0%, 0%, 0.8)	有効な不透明度の値は 0.0 から 1.0 です。
HSL	hsl(120, 100%, 50%)	h の有効な値は 0 から 360、s と l の場合は 0%-100%です。
HSLA	hsla(120, 100%, 50%, .8)	有効な不透明度の値は 0.0 から 1.0 です。
HSV	hsv(120, 100%, 50%)	h の有効な値は 0 から 360、s と v の場合は 0%-100%です。
HSVA	hsva(120, 100%, 50%, .8)	有効な不透明度の値は 0.0 から 1.0 です。
定義済みの色	fuchsia、AquaMarine、limegreen	色の文字列では大文字と小文字が区別されません。

または、プロパティ要素構文を使用して、コントロールの Shadow プロパティを Shadow オブジェクトに設定し、そのプロパティで外観を定義することもできます。

次の XAML の例は、プロパティ要素の構文を使用して Image にシャドウを追加する方法を示しています。

<Image Source="dotnet_bot.png"
       WidthRequest="250"
       HeightRequest="310">
    <Image.Shadow>
        <Shadow Brush="Black"
                Offset="20,20"
                Radius="40"
                Opacity="0.8" />
    </Image.Shadow>
</Image>

この例では、イメージの輪郭の周囲に黒い影が描画され、そのオフセットは画像の右側と下部に表示されることを指定します。

次の例に示すように、クリップされたオブジェクトにシャドウを追加することもできます。

<Image Source="https://aka.ms/campus.jpg"
       Aspect="AspectFill"
       HeightRequest="220"
       WidthRequest="220"
       HorizontalOptions="Center">
    <Image.Clip>
        <EllipseGeometry Center="220,250"
                         RadiusX="220"
                         RadiusY="220" />
    </Image.Clip>
    <Image.Shadow>
        <Shadow Brush="Black"
                Offset="10,10"
                Opacity="0.8" />
    </Image.Shadow>
</Image>

この例では、イメージをクリップする EllipseGeometry の輪郭の周囲に黒い影が描画されます。

要素をクリッピングする方法の詳細については、「を Geometryでクリップする」を参照してください。