SlateView, le contrôle UWP pour afficher une image avec élégance, très rapidement.

Slateview est un contrôle UWP qui permet d’afficher une image Bitmap et éventuellement un fond qui reprend l’image en la floutant.

On l’instancie en XAML de cette manière.

<Page 
    ...
    xmlns:my="using:SamuelBlanchard.Xaml.Controls.BlurPixelView" 
>
    <my:SlateView x:Name="slateView"/>
</Page>

Chargement d’une image

Pour charger une image par exemple en provenance d’une URI ou d’un StorageFile, on peut utiliser les méthodes suivantes :

await slateView.LoadImage(new Uri("ms-appx:///Assets/Images/House.jpg")); // par Uri
await slatView.LoadImage(myStorageFile); // avec un storageFile

Le chargement par Uri ne permet que l’utilisation des schemes ms-appx: et ms-data:

Il est possible également de charger une image par Uri en XAML (avec les mêmes contraintes que plus haut)

<my:SlateView 
  x:Name="slateView" 
  SourceUri="ms-appx:///Assets/Images/House.jpg"
/>

Affectation d’un bloc de pixels

Lorsque SlateView charge une image il écrit dans ces propriétés :

• Pixels : Les data bruts de l’image au format BGRA8
• PixelWidth : La longueur en pixel de l’image
• PixelHeight : La hauteur en pixel de l’image

Ces propriétés seront ensuite utilisées pour afficher l’image à l’aide de Win2D.

Il est possible d’utiliser d’autres méthodes que le chargement d’image pour affecter ces propriétés. Elles permettent de prendre en charge des paramètres comme un tableaux de byte, WriteableBitmap, SofwareBitmap en passant par la VideoFrame. Il est ainsi facile de connecté SlateView à une caméra ou à une vidéo.

// Affectation par tableau de byte BGRA8 et taille
public void SetPixels(byte[] pixels, int pixelWidth, int pixelHeight)
// Affectation par WriteableBitmap
public void SetPixels(WriteableBitmap bitmap)
// Affectation par VideoFrame
public void SetPixels(VideoFrame frame)
// Affectation par SoftwareBitmap
public void SetPixels(SoftwareBitmap bitmap)

La méthode SetPixels permet d’afficher une image à partir d’un tableau de pixels. Elle n’effectue pas de copie interne du tableau mais passe sa référence à un CanvasBitmap. C’est une méthode d’affichage très rapide sur lesquelles se repose toutes les autres méthodes d’affectation.

Créer un bloc de pixels vide

Si vous ne désirez pas charger une image il est possible de créer une image vide de taille quelconque en Code-Behind.

public void CreatePixels(int pixelWidth, int pixelHeight)
public void CreatePixels(int pixelWidth, int pixelHeight, Pixel clearPixel) // avec une couleur

Dessiner dans le tableau de pixels

SlateView est capable de lire ou d’écrire certaines pixels de l’image :

public bool SetPixel(int x, int y, byte r, byte g, byte b, byte a = 0xFF) // Ecriture d'une pixel en position x,y
public bool SetPixel(int x, int y, Pixel pixel) // Ecriture d'une pixel en position x,y
public Pixel GetPixel(int x, int y) // Lit une pixel composée des valeurs r,g,b,a à la position x,y.

Il est également possible de nettoyer l’image :

public void ClearPixels(byte r = 0x00, byte g = 0x00, byte b = 0x00, byte a = 0xFF) // nettoyage de l'image avec la couleur r,g,b,a
public void ClearPixels(Pixel pixel)

Convertir les pixels

SlateView autorise la convertion des Pixels en WriteableBitmap, SoftwareBitmap et SoftwareBitmapSource.

public WriteableBitmap GetWriteableBitmap()
public SoftwareBitmap GetSoftwareBitmap()
public async Task<SoftwareBitmapSource> GetSoftwareBitmapSourceAsync()

Fond et gestion du flou

Lorsque vous chargez une image ou affectez la propriété Pixels, une image de fond est automatiquement affiché sous l’image. L’image de premier plan est affiché en mode Uniform alors que celle du fond l’est en mode UniformToFill. Bien que l’image de fond soit allongé elle n’est pas pour autant affichée complètement. Les performances sont donc conservées.

Comme on le voit sur l’image ci-dessus, l’image de fond est floutée. Il est possible de faire varier le blur de l’image grâce ces paramètres :

<my:SlateView             
    AllowBlur="True"
    BlurEffectAmount="12"
    BlurEffectBorderMode="Hard"
    BlurEffectOptimization="Speed"
    />

Vous pouvez également faire varier la couleur de fond et l’opacité de l’image de fond pour encore plus de précision dans l’affichage.

<my:SlateView          
    BackgroundImageOpacity="0.5"
    Background="Black"
    />

Interpolation et marge

Il est possible également de gérer une marge pour l’image de premier plan (ImageMargin) et de changer l’interpolation des images (fond et premier plan) grâce à la propriété ImageInterpolation. Si l’image est zoomé, en utilisant la valeur NearestNeighbor pour ImageInterpolation vous obtiendrez un affichage pixelisé. Les autres permettront un affichage plus doux.

<my:SlateView 
    ImageInterpolation="NearestNeighbor"
    ImageMargin="30"
    />

Selection des elements à afficher

Vous pouvez sélectionner facilement les éléments de SlateView que vous désirez afficher grâce à la propriété ElementShown. Les valeurs possibles sont :

• None : Aucun element n’est affiché (à part la couleur de fond)
• FrontAndBack : L’image de premier plan et de fond sont affichées (valeur par défaut)
• FrontOnly : Seule l’image de premier plan est affichée
• BackOnly : Seule l’image de fond est affichée.

Evenements

SlateView repose sur Win2D et dispose des mêmes événements qu’un CanvasAnimatedControl classique. Une exception en revanche, l’événement Draw n’existe pas mais est remplacé par plusieurs événement permettant de prendre la main entre les phases de dessin des images pour un meilleur contrôle.

• CreateResources : Même que Win2D. Initialisation des ressources
• Update : Même que Win2D. On peut calculer les pixels de l’image si besoin. Si vous désirez affecter des pixels c’est l’événement à privilégier.
• DrawStart : Début du dessin
• DrawBack : L’image de fond vient d’être dessiné (avec le blur)
• DrawFront : L’image de premier plan est dessiné
• DrawStop : Fin de l’evenement Draw

Enjoy !

Grâce à SlateView, vous avez toutes les clés en main pour afficher des pixels rapidement et avec élégance !

Vous pouvez retrouver le code source de SlateView sur mon GitHub

https://github.com/samoteph/SlateView