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.
Single Page Master Details Full Example using compositon
In this example I have created the following structure
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.
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.
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.
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