Shadow

.NET Multi-platform App UI (.NET MAUI) Shadow クラスは、レイアウトまたはビューの周囲に影を描画します。 VisualElement クラスには、任意のレイアウトまたはビューに影を追加できる、バインド可能な Shadow プロパティ (Shadow 型) があります。

Shadow クラスでは、次のプロパティが定義されます。

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

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

重要

Brush プロパティは、現時点では SolidColorBrush にのみ対応しています。

影を作成する

コントロールに影を追加するには、コントロールの 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 を使用してクリップする」をご覧ください。