‘Remember Build 2015’ Composition Example

I decided before continuing with my apps to dig more into Composition and make some kind of clean layout to make some experiments with Composition API.

Sooner than later will be the next Build and I usually rewatch cool videos from it so I decided to make this example around the 2015 edition.

build2015

gallery

sessions

In this case I set the Composition animations in another library to begin having it ready for an app. The animations that are called to my previous demo (id software demo) are NOT equals so please be careful about this.

One important thing I wanted in an app is the idea to change the focus visually so I make the things appear at different times and I consider that the implementation looks great!

NOTE1: I have added waits in some of the attached properties, might be more solid code if the logic is in the loaded event, in order to have all the attached properties on time including the binding, because in this example I had to set in order from left to right the attached properties to had them when is needed!

NOTE2: I use attached properties because are inline and visually more clean, that makes if you need to read more properties before act a bit more complex so if you consider you can use behaviors too.

It is recommended to run the app without debugging to watch all times right!!

Properties

In this example we have the following Attached Properties:

DoubleEffectParameter, BoolEffectParameter

These are generic attached properties to use joined with other attached properties to adjust the values of the other properties.

Delay

Use it in conjunction with an Effect Property to make transitions one before another is in seconds of double.

FadeOut

Allows a control go from Composition Opacity 0 to one using the previous parameters, as example:

<Grid Background="{StaticResource GradientSky}" a:Effects.DoubleEffectParameter="10"  a:Effects.FadeOut="True" />

Appear

It makes an offset and opacity appearing effect animation at the same time.

<Grid Width="1600" a:Effects.Delay="3.5" a:Effects.DoubleEffectParameter="2" a:Effects.Appear="True" HorizontalAlignment="Left" IsHitTestVisible="False"/>

Disappear

It takes the height of an element and animates it until disappears to the top.

<StackPanel  a:Effects.Delay="1" a:Effects.BoolEffectParameter="False" a:Effects.Disappear="True"/>

Blend

It is a cool one that makes a transition among images, I use it in the example for the gallery, move the mouse around images and it will make a transition. Being GalleryImage a Grid:

GalleryImage.SetValue(Effects.BlendForegroundProperty, newuri);

I have not tested by using binding to a property, theorically should work.

Column

columns

In this case the Column Attached Property makes the appear effect begin when the scrollviewer arrives to the column value position.

Parallax

You need to specify which is one the scroller to get its Composition Layer and then the factor of parallax you want to apply. The effect is interesting because shows that you are scrolling even when the main content has not appear (eg. column 1 appearing).

Easy to use as the following example:

<Image x:Name="Background0"  a:Effects.ElementParameter="{Binding ElementName=Scroller}" a:Effects.Parallax="0.2"/ 

NOTE: I wanted to create a color Composition transition from blue to orange, that’s why exists Gradient but at this moment it has to be with Win2D, so to focus in Composition I omitted it.

Animating Scrolling

I did not test this feature until this example and works great, the idea is emulate a Pivot or a Hub Control with just simply a scrollviewer and grids, you can do it by using:

  #region Scroller
        private void Scroll()
        {
            Scroller.ChangeView(screenWidth * currentgrid, null, null);
        }
        #endregion

        #region Button Events
        private void InitializeEvents()
        {
            FirstButton.Tapped += ScrollButton_Tapped;
            SecondButton.Tapped += ScrollButton_Tapped;
            ThirdButton.Tapped += ScrollButton_Tapped;
        }

        int currentgrid = 0;
        private void ScrollButton_Tapped(object sender, TappedRoutedEventArgs e)
        {
            if (sender.Equals(FirstButton))
                currentgrid = 1;
            else if (sender.Equals(SecondButton))
                currentgrid = 2;
            else if (sender.Equals(ThirdButton))
                currentgrid = 3;
            Scroll();
        }

NOTE: If you can you can hide the bar and lock the scroll, it makes the scroll method still working so it is a really interesting option!

Behaviors

I tested the tilt effect behavior from r2d2rigo and works cool! so I decided to use it in the example for the list.

Html Processing

If you never have processed html using htmlagilitypack, this is a good example, might be there is a better thing to extract values from attributes, if you know it, would you give me a clue?

Issues

I have some odd behaviors that I want to comment

  • I had to force a height in the ItemsControl of the sessions because the margin was impossible to force to make it a relative height.
  • Because something odd between Github and Nuget the code I had to use of HtmlAgilityPack is not perfect, there are methods that do not appear to me.
  • The Scroll method works pretty well except sometimes when go again to HorizontalOffset Zero, but I understand might be a bug.

And finally the source code:
Composition Examples inside the Parallax Project Folder

Hope enjoy @juanpaexpedite

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s