Ombres de composition

La classe DropShadow fournit des moyens de créer une ombre configurable qui peut être appliquée à une instance SpriteVisual ou LayerVisual (sous-arborescence de visuels). Comme c’est le cas pour les objets de la couche visuelle, toutes les propriétés de DropShadow peuvent être animées à l’aide de CompositionAnimations.

Ombre déroulante de base

Pour créer une ombre de base, créez simplement un dropShadow et associez-le à votre visuel. L’ombre est rectangulaire par défaut. Un ensemble standard de propriétés est disponible pour ajuster l’apparence de votre ombre.

var basicRectVisual = _compositor.CreateSpriteVisual();
basicRectVisual.Brush = _compositor.CreateColorBrush(Colors.Blue);
basicRectVisual.Offset = new Vector3(100, 100, 20);
basicRectVisual.Size = new Vector2(300, 300);

var basicShadow = _compositor.CreateDropShadow();
basicShadow.BlurRadius = 25f;
basicShadow.Offset = new Vector3(20, 20, 20);

basicRectVisual.Shadow = basicShadow;

Mise en forme de l’ombre

Il existe plusieurs façons de définir la forme de votre DropShadow :

• Utilisez la valeur par défaut : par défaut, la forme DropShadow est définie par le mode « Default » sur CompositionDropShadowSourcePolicy. Pour SpriteVisual, la valeur par défaut est rectangulaire, sauf si un masque est fourni. Pour LayerVisual, La valeur par défaut consiste à hériter d’un masque à l’aide de l’alpha du pinceau du visuel.
• Définir un masque : vous pouvez définir la propriété Mask pour définir un masque d’opacité pour l’ombre.
• Spécifiez l’utilisation du masque hérité : définissez la propriété SourcePolicy pour utiliser CompositionDropShadowSourcePolicy. InheritFromVisualContent pour utiliser le masque généré à partir de l’alpha du pinceau du visuel.

Masquage pour correspondre à votre contenu

Afin que votre ombre corresponde au contenu du visuel, vous pouvez utiliser la brosse du visuel pour votre propriété Masque d’ombre ou définir l'ombre pour hériter automatiquement du masque du contenu. Si vous utilisez un LayerVisual, l’ombre héritera du masque par défaut.

var imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/myImage.png"));
var imageBrush = _compositor.CreateSurfaceBrush(imageSurface);

var imageSpriteVisual = _compositor.CreateSpriteVisual();
imageSpriteVisual.Size = new Vector2(400,400);
imageSpriteVisual.Offset = new Vector3(100, 500, 20);
imageSpriteVisual.Brush = imageBrush;

var shadow = _compositor.CreateDropShadow();
shadow.Mask = imageBrush;
// or use shadow.SourcePolicy = CompositionDropShadowSourcePolicy.InheritFromVisualContent;
shadow.BlurRadius = 25f;
shadow.Offset = new Vector3(20, 20, 20);

imageSpriteVisual.Shadow = shadow;

Utilisation d’un autre masque

Dans certains cas, vous souhaiterez peut-être mettre en forme l’ombre afin qu’elle ne corresponde pas au contenu de votre visuel. Pour atteindre cet effet, vous devez définir explicitement la propriété Mask à l’aide d’un pinceau avec alpha.

Dans l’exemple ci-dessous, nous chargeons deux surfaces : une pour le contenu visuel et une pour le masque d’ombre :

var imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/myImage.png"));
var imageBrush = _compositor.CreateSurfaceBrush(imageSurface);

var circleSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/myCircleImage.png"));
var customMask = _compositor.CreateSurfaceBrush(circleSurface);

var imageSpriteVisual = _compositor.CreateSpriteVisual();
imageSpriteVisual.Size = new Vector2(400,400);
imageSpriteVisual.Offset = new Vector3(100, 500, 20);
imageSpriteVisual.Brush = imageBrush;

var shadow = _compositor.CreateDropShadow();
shadow.Mask = customMask;
shadow.BlurRadius = 25f;
shadow.Offset = new Vector3(20, 20, 20);

imageSpriteVisual.Shadow = shadow;

Animer

Comme c’est le cas dans la couche visuelle, les propriétés DropShadow peuvent être animées à l’aide d’animations de composition. Ci-dessous, nous modifions le code à partir de l’exemple de sprinkles ci-dessus pour animer le rayon flou de l’ombre.

ScalarKeyFrameAnimation blurAnimation = _compositor.CreateScalarKeyFrameAnimation();
blurAnimation.InsertKeyFrame(0.0f, 25.0f);
blurAnimation.InsertKeyFrame(0.7f, 50.0f);
blurAnimation.InsertKeyFrame(1.0f, 25.0f);
blurAnimation.Duration = TimeSpan.FromSeconds(4);
blurAnimation.IterationBehavior = AnimationIterationBehavior.Forever;
shadow.StartAnimation("BlurRadius", blurAnimation);

Ombres dans WinUI XAML

Si vous souhaitez ajouter une ombre à des éléments de framework plus complexes, il existe quelques façons d’interagir avec des ombres entre le code XAML WinUI et la composition :

1. Utilisez attachedCardShadow disponible dans le package CommunityToolkit.WinUI.Media .
2. Créez un visuel à utiliser comme hôte d’ombre, puis liez-le au visuel de transfert XAML.
3. Utilisez le contrôle CompositionShadow personnalisé de SamplesCommon de la Composition Sample Gallery. Consultez l’exemple ici pour l’utilisation.

Efficacité

Bien que la couche visuelle ait de nombreuses optimisations en place pour rendre les effets efficaces et utilisables, la génération d’ombres peut être une opération relativement coûteuse en fonction des options que vous définissez. Vous trouverez ci-dessous des « coûts » élevés pour différents types d’ombres. Notez que même si certaines ombres peuvent être coûteuses, elles peuvent toujours être appropriées pour être utilisées avec parcimonie dans certains scénarios.

Ressources additionnelles

• Composition DropShadow API
• Dépôt GitHub WindowsCompositionSamples