Sdílet prostřednictvím

Stín

  • Článek

Třída .NET Multi-Platform App UI (.NET MAUI) Shadow maluje stín kolem rozložení nebo zobrazení. Třída VisualElement má Shadow bindable vlastnost typu Shadow, která umožňuje přidat stín do libovolného rozložení nebo zobrazení.

Třída Shadow definuje následující vlastnosti:

  • Radius, typu floatdefinuje poloměr rozostření použitého k vygenerování stínu. Výchozí hodnota této vlastnosti je 10.
  • Opacity, typu floatoznačuje neprůhlednost stínu. Výchozí hodnota této vlastnosti je 1.
  • Brush, typu Brush, představuje štětec použitý k obarvení stínu.
  • OffSet, typu Point, určuje posun pro stín, který představuje pozici zdroje světla, který vytváří stín.

Tyto vlastnosti jsou podporovány BindableProperty objekty, což znamená, že mohou být cíle datových vazeb a stylovány.

Důležité

Vlastnost Brush v současné době podporuje SolidColorBrushpouze .

Vytvoření stínu

Chcete-li přidat stín do ovládacího prvku, nastavte vlastnost ovládacího prvku Shadow na Shadow objekt, jehož vlastnosti definují jeho vzhled.

Následující příklad XAML ukazuje, jak přidat stín do 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>

V tomto příkladu se kolem obrysu obrázku maluje černý stín s jeho posunem, který určuje, že se zobrazí v pravém a dolním rohu obrázku:

Screenshot of an image with a shadow applied.

Stíny lze také přidat do oříznutých objektů, jak je znázorněno v následujícím příkladu:

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

V tomto příkladu se kolem obrysu EllipseGeometry obrázku vykreslí černý stín:

Screenshot of a clipped image with a shadow applied.

Další informace o oříznutí prvku naleznete v tématu Clip with a Geometry.