Bienvenue !

Bonjour !
Samuel Blanchard
Responsable
Développement & Innovation
NavisoDev
@samoteph
Benjamin Launay
Designer UI/UX
NavisoDev
@AieAieEye

Sous Vista (Aéro)
• bord des fenêtres transparents et flou
• Desktop Windows Manager (DWM)
• Une fenêtre = buffer vidéo (GPU)
Sous Windows 8
• DirectComposition = Api de DWM
• Un élément = buffer vidéo (GPU)
Sous Windows 10
• Composition pour UWP (Accès aux elements)

• Des Transformations (=RenderTransform)
• Des animations (=Storyboard++)
• Des scrollings
• Des effets (blur,…)
• Des lumières

Passer de XAML à Composition :
Visual elementVisual =
ElementCompositionPreview.GetElementVisual(elementXAML);

Visual : Element de base de Composition
ContainerVisual : un Visual avec des enfants (une sorte de Canvas)
SpriteVisual : Un ContainerVisual avec un Brush (couleur image)

Compositor : Usine à d’objet Composition (Visual, Animation,
Brush, Light,…)
Offset : déplace le Visual
Scale : Zoom
RotationAngleInDegrees: rotation 2D ou 3D
RotationAxis : axe de rotation en 3D
Size : Taille du Visual

Effet de surprise + admiration = WAOUH
L’effet Waouh est généralement obtenu par une caractéristique forte et innovante du produit.
||
INNOVATION
||
FINITION DESIGN

• Séduction de l’utilisateur
• Marquer l’esprit
• Recommandation
• Viralité

Alien, Ridley Scott, 1979 Flash Gordon, Mike Hodges, 1980

A oublier :
Le montage
Les situations
Les dialogues
…
A retenir :
L’ambiance graphique
• Les lumières
• L’étalonnage
• Les effets (filtres)
La bande originale
Les accessoires
…

LES PER SON N A GES
C r é d i t s B a n n o n R u d i s - @ b a n n o n r u d i s

Storyboard ? Naaaan
CompositionAnimation ! OUI !
• Rapide et fluide
• Non lié à un thread (pas sur le thread UI)
• S’applique à une propriété ou un enfant d’une propriété (« Scale » ou
« Offset.X »)
• StartAnimation pour lancer, StopAnimation pour stopper
• Possibilité de faire des groupes d’animation: Compositor.CreateAnimationGroup()
• 2 types disponibles : par durée et par Expression

• Semblable au Storyboard
• Storyboard  Composition dans les futures versions
• Completed ? Compositor.CreateScopedBatch

var animation =
rootVisual.Compositor.CreateScalarKeyFrameAnimation();
animation.InsertKeyFrame(0f, 0f);
animation.InsertKeyFrame(1f, 90f);
animation.Duration = TimeSpan.FromMilliseconds(500);
rootVisual.StartAnimation("Offset.X", animation);

• CreateScalarKeyFrameAnimation : float
• CreateColorKeyFrameAnimation : Color
• CreateVector2KeyFrameAnimation : Vector2
• CreateVector3KeyFrameAnimation : Vector3
• CreateVector4KeyFrameAnimation : Vector4
• CreateQuaternionKeyFrameAnimation : Quaternion

• Pas de durée
• Correspond à une fonction

var animation = compositor.CreateExpressionAnimation();
animation.SetReferenceParameter("hostVisual", hostVisual);
animation.Expression = "hostVisual.Size / 2";
glassVisual.StartAnimation(« Size", animation);

On peut injecter des :
• Réference à des CompositionObjets : SetReferenceParameter
• Constantes :
• Float: SetScalarParameter
• Color : SetColorParameter
• Bool : SetBooleanParameter
• Vectors : SetVectorNParameter ou N=2,3,4
• Propriétés notifiables

• Paramètres externes
• Condition (if) => condition ? resultatTrue : resultatFalse
• Fonction mathématique : % Abs Ceil
• Exemple d’expression (TileControl)
((scroller.Translation.X + tileOffsetX) * speed) < 0 ? -
(Abs(((scroller.Translation.X + tileOffsetX) * speed) -
Ceil(((scroller.Translation.X + tileOffsetX) * speed) / imageWidth) *
imageWidth) % imageWidth) : -(imageWidth - (((scroller.Translation.X +
tileOffsetX) * speed) % imageWidth))

LES D EC OR S

FlipView
TileControl
TileControl
TileControl
TileControl

• Var scroller =
ElementCompositionPreview.GetScrollViewerManipulationPropertySet(scrollviewer);
• Dans l’expression :
• Expression.SetReferenceParameter(« scroller », scroller);
• expression.Expression = « scroller.Translation.X * 1.5»

• Var container = rootVisual.Compositor.CreateContainerVisual();
• ElementCompositionPreview.SetElementChildVisual(rootElement,
container);
• Chargement d’une image : nuget
Robmikh.Util.CompositionImageLoader
• Creation de SpriteVisuals puis dans le container

Contrôle : 100px
ContainerVisual
(2 + 1) x SpriteVisual
(50px par image)

The Fog, John Carpenter, 1980 ET, Steven Spielberg, 1982

• Win2D (nuget Win2D.uwp) pour dessiner
• Tous les effets Win2D ne sont pas disponibles
https://msdn.microsoft.com/fr-
fr/windows/uwp/graphics/composition-
effects?f=255&MSPPError=-2147217396
• Couplé à Composition pour l’appliquer
• Affichage en temps réels des effets

Icônes Tags
Cover
Avatar
Description

var glassEffect = new GaussianBlurEffect
{
BlurAmount = 15.0f,
BorderMode = EffectBorderMode.Hard,
Source = new ArithmeticCompositeEffect
{
MultiplyAmount = 0,
Source1Amount = 0.5f,
Source2Amount = 0.5f,
Source1 = new CompositionEffectSourceParameter("backdropBrush"),
Source2 = new ColorSourceEffect
{
Color = Color.FromArgb(0xFF, 0x30, 0x30, 0x30)
}
}
};

var effectFactory = compositor.CreateEffectFactory(glassEffect);
var effectBrush = effectFactory.CreateBrush();
var backdropBrush = compositor.CreateBackdropBrush(); // C’est le fond
effectBrush.SetSourceParameter("backdropBrush", backdropBrush);
var glassVisual = compositor.CreateSpriteVisual();
glassVisual.Brush = effectBrush;
ElementCompositionPreview.SetElementChildVisual(glassHost,
glassVisual);

• Ajoute une lumière ou un spot à une image, un TextBlock…
• Animable !
Compositor.CreateSpotLight
Compositor.CreateAmbientLight

• ImplicitCollection : Animation automatique liée à une propriété
• AlphaMask et Shadow : Ombrage en perfect pixel !
• Clipping : Clipping animable !
• Bonus : Gif animé supporté dans Anniversary !

N° 46

@microsoftfrance @Technet_France @msdev_fr
N° 47

Notez cette session
Et tentez de gagner un Surface Book
Doublez votre chance en répondant aussi au
questionnaire de satisfaction globale
* Le règlement est disponible sur demande au commissariat général de l’exposition. Image non-contractuelle