Tips & Tricks en Universal App

Mise en situation

Pour les besoins de cet exemple, j’ai réalisé une petite application dessin toute bête qui permet de dessiner dans 4 couleurs différentes et ensuite de partager le dessin (Le but n’étant pas de faire une app utile et jolie, mais de faire un exemple un peu fonctionnel pour démontrer certaines fonctionnalités) (Voir l’article en entier).

Exemple

Voici 2 petites astuces utilisées lors de cette démo.

1) Conversion RenderTargetBitmap -> InMemoryRandomAccessStream

Pour convertir le screenshot qui a été généré et pouvoir le partager via le share contract, il fallait le convertir en stream

    var memoryStream = await renderTargetBitmap.ToMemoryStreamAsync();
    
Voici la petite méthode d’extension qui permet de le faire :
    public async static Task<InMemoryRandomAccessStream> ToMemoryStreamAsync(this RenderTargetBitmap renderTargetBitmap)
    {
        InMemoryRandomAccessStream stream = new InMemoryRandomAccessStream();
        var encoder = await BitmapEncoder.CreateAsync(BitmapEncoder.PngEncoderId, stream);
        var pixels = await renderTargetBitmap.GetPixelsAsync();
        encoder.SetPixelData(BitmapPixelFormat.Bgra8, BitmapAlphaMode.Ignore, (uint)renderTargetBitmap.PixelWidth, (uint)renderTargetBitmap.PixelHeight, DisplayInformation.GetForCurrentView().LogicalDpi, DisplayInformation.GetForCurrentView().LogicalDpi, pixels.ToArray()); await encoder.FlushAsync(); return stream;
    }
    
2) TemplateBinding

Pour ce second example, je vais parler un peu xaml. Dans mon UI, j’ai 4 boutons qui permettent de choisir la couleur du dessin.

<Button Style="{StaticResource ButtonPaintStyle}" Background="Red" Width="50" Height="50" Click="ChangePenClick" />             
<Button Style="{StaticResource ButtonPaintStyle}" Background="Blue" Width="50" Height="50" Click="ChangePenClick" />             
<Button Style="{StaticResource ButtonPaintStyle}" Background="Green" Width="50" Height="50" Click="ChangePenClick" />             
<Button Style="{StaticResource ButtonPaintStyle}" Background="Black" Width="50" Height="50" Click="ChangePenClick" />
    
Comme on peut le voir, ils utilisent tous le même template, seul le background est différent. Dans le controltemplate de mon style, j’ai modifié le style classique du bouton par une ellipse et j’ai pris la propriété Background qui est settée pour la mettre dans le Fill de l’ellipse

Snippet

 <Ellipse x:Name="BtnEllipse" Fill="{TemplateBinding Background}" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}"/>
    
On peut donc voir que j’ai récupéré via le TemplateBinding, la propriété du control.
Pour voir tout le code, je vous invite à télécharger le code exemple via la partie Liens

Liens

 

No Comments

Post a Comment