Silverlight 4.0 Tutorial (8 of N): Fluid Layouts

Read Previous Posts: Part1, Part2, Part3, Part4, Part5, Part6, Part7

In our last post we implemented visual states for our application, you may have noticed in the States tab in Blend the Default Transition section

Default Transition

the default transition is applied when moving from any state to any other state.

- You can create transitions between any pair of states, for each transition you specify how long it will take (transition duration) and the easing function to be used.

State Transitions

the easing function makes the animations look real, so instead of the linear interpolations of the values that change between states you can choose the appropriate easing function to interpolate the values, there are many easing functions in Blend (quadratics, cubic, bounce, elastic, etc.) and you can even code your own easing function.

Easing Functions

- You can see a preview of the state transitions by turning on the transition preview (click on the icon highlighted in the below image)

Transition Preview

by turning on the transition preview whenever you change the selected state in the states tab the corresponding transition will be played.

- We can employ these transitions in our application, but the problem is that the properties we change in the different states (Visibility, RowSpan) are discrete properties that cannot be smoothly interpolated. the solution Microsoft offers for this is Fluid Layout, what is Fluid Layout? according to The Expression team blog ” an engine that would take a layout snapshot before the state change, take another layout snapshot after the state change, and create a smooth morph between the start and end positions, employing the duration and EasingFunction of the user’s choosing.”

Fluid Layout

You can turn on the Fluid Layout by clicking the icon highlighted in the image above.

- Let’s use this new feature in our application, we will turn the fluid layout on, and change the default transition to use BackInOut easing function with duration one second

BackInOut Easing Function

- If you turn the transition preview on, you can see the transition effect immediately while you change the selected state in the States tab.

- Run the application to see the transition in action.

8

See you in the next post.

Download the source code from here.

Comments

Post a Comment

Popular posts from this blog

Documentum DQL Query Custom Data Extension For SQL Server Reporting Services

When it comes to Reporting SQL Reporting Services is my favorite choice. SQL Reporting Services has a plenty of data source types but unfortunately Documentum is not one of them, whenever we have to develop some reports based on the data in Documentum we first develop a web service that contains the necessary DQL queries and returns the result in a Data Set, then we create an XML data source that consumes this web service and use it in our reports. Fortunately SQL Reporting Services allows you to extend its data access capabilities by developing a custom data extension (CDE)that retrieves data from your custom data source. I developed a Custom Data Extension for Documentum that allows you to specify a Documentum Repository as a data source and provide your DQL query that will populate your report, I used the Reporting Services SDK Sample (FsiDataExtension) and this Article as starting points You can download the extension from here To install the extension: you have to install the ex
Read more

Using taco to create Ionic projects for the Windows platform

Image
Recently Microsoft released Tools for Apache Cordova Command Line Interface (TACO CLI), by using TACO, you can quickly start building awesome Apache Cordova apps really and leave all the plumbing of the different platforms dependencies, plugins, etc. to the tools to take care of. For example the following few commands create a cordova project based on the ionic base template, add the android platform to the project, install the platform requirements, build the app, and run it in the emulator: $ taco create sampleApp --template https://github.com/driftyco/ionic-app-base $ cd sampleApp $ taco platform add android $ taco install-reqs android $ taco build android $ taco emulate android Check the TACO home page of for installation instructions and more information http://taco.tools/ . I ran into a problem when i created a new project based on the ionic base template and tried to run it on a windows 8.1 emulator, to reproduce the issue use the following taco commands to cr
Read more

Portable Class Library Projects and MVVM Light

Image
With Portable Class Library Projects you can create a single library that can target different platforms (e.g. Windows Phone, .Net, Windows Store Apps). For most of the modern apps it’s kind of mandatory to use the MVVM pattern, a famous MVVM library is Laurent Bugnion MVVM Light library. In this post we will walk through the steps needed to create a Portable Class Library that uses the MVVM Light library and targets the Windows Phone 8 and .Net for Windows Store Apps frameworks. I will be using Visual Studio 2012 with Update 3. - Let’s create a new Portable Class Library project and name it MyApp.Core, the solution name will be MyApp - We will target the Windows Phone 8 and .Net for Windows Store Apps - We will create two applications, the first is a Windows Store Blank Application named MyApp.Win8 and the second is a Windows Phone 8 named MyApp.WP8 - We will add a reference to the Portable Class Library Project MyApp.Core to the Windows Store Project and the
Read more