Skip to content

Latest commit

 

History

History
84 lines (47 loc) · 3.8 KB

README.md

File metadata and controls

84 lines (47 loc) · 3.8 KB
Raw

News

06/07/2016: Outlined Text

Created a basic implementation using Composition to outline text, basically creates a textmask from the TextBlock and then draws it like when you create a Shadow. Example in AnimatedControls.MainPage.xaml.cs

01/07/2016: Busy Indicator - MS Productivity Future Vision Style

After learning about the great library from ratishphilip, CompositionExpressionToolkit now it is possible to create custom shapes and animations just using the Visual Layer.

In this case I created an outlined ellipsed masks with the exclusion of two ellipses, then I create four of them and I create several animations in order to add into a Busy Indicator control that animates really smooth using Composition. You can play with it in the AnimatedControls project.

MasterDetailsComposition

Single Page Master Details Full Example using compositon

Introduction

In this example I have created the following structure

Attached Properties

To keep XAML simple I created several attached properties that when are attached, they activate the composition layer:
  • EffectComposition: Is a dummy/tag property to save the Composition Effect using in a UIElement.
  • BlendForeground: Activates the effect in a Panel to change a background with the arithmetic effect.
  • DropText: Activates the effect that the Text falls and then appears the new one from the top.
  • Slide: Activates the effect having a Panel that appears from the right.
  • Fall: Activates the effect for UIElements to fall down and then you can fall 'up'.

With that you can have the following XAML:

 <Grid x:Name="TitleBackground" a:Effects.BlendForeground="Assets/Backgrounds/masterbackground.jpg" Background="Black" />
 
 <TextBlock Text="id Software Games" x:Name="TitleLabel" a:Effects.DropText="id Software Games"/>

and so on.

Notes

I have seen that setting

new PropertyMetadata(DependencyProperty.UnsetValue...)

does not fire the first time, that's why I keep the first slide on, to check if in a new SDK release is solved.

Apart, you have to be aware that when it enters in detail mode, the composition layer translates the items but there are still there, so you have to set the scrollviever collapsed to be able to touch the other parts.

Composition Manager

I have extracted the methods from the Composition Effects Editor Example to give everyone the chance to test it witouth struggling how to get it.

Notes

You cannot set the Children of the ContainerVisual of an Element directly you must use something like CreateContainerVisual. I simplify the method ResizeImage from the example setting Stretch UniformToFill in the SpriteVisual.

Animation Composition Manager

This is cool, I have setup several example that are linked to the attached properties in order to make easy to change animations depending your needs.

To Do

I would like to make an expansion when I tap an Image from the details and expand to the whole window.

Hope you find useful and fun, and remember Composition does not use Dependency Properties, that's is one of the many things that makes it bettar than Storyboards

@juanpaexpedite