Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Using ImageTile Control From Coding4Fun v1.6

DZone's Guide to

Using ImageTile Control From Coding4Fun v1.6

· Mobile Zone
Free Resource

Launching an app doesn’t need to be daunting. Whether you’re just getting started or need a refresher on mobile app testing best practices, this guide is your resource! Brought to you in partnership with Perfecto

New version of Coding4Fun Toolkit was released three days ago, you can grab it at Codeplex. One control immediately grabbed my interest – ImageTile. It offers a variation of standard hub tile and looks similar to the people hub tile, although you can easily customize it. The following screenshot shows the ImageTile control in action.

You can add toolkit via Nuget or you can download the source or the binaries. Once you add the necessary references to the project, use the following namespace:

xmlns:c4f="clr-namespace:Coding4Fun.Phone.Controls;assembly=Coding4Fun.Phone.Controls"

I strongly recommend that you open XAML view only, do not open the design view. The easiest way to do that is to right click on the MainPage.xaml and choose the Open With… context menu item. Select Source Code (Text) Editor and click OK. Now edit the XAML directly instead by dragging controls in the design mode. The version you get with the Nuget will freeze Visual Studio. It will freeze once you add the control which is very frustrating. Please note that if you are building binaries yourself from the source code, the issue has been fixed and applies only to 1.6 version.

Let’s analyse the control created using the following markup:

<c4f:ImageTile AnimationDuration="1500"
                AnimationType="VerticalExpand"
                ImageCycleInterval="3000"
                                
                Width="173" Height="173"
                                
                Rows="3"
                Columns="3"
                LargeTileColumns="2"
                LargeTileRows="2"
 
                ItemsSource="{Binding Images}"
                                
                IsFrozen="False" />

The above markup will create a ImageTile control with the same size as the standard HubTile. It should look like the left tile on the image above. Let’s explore each property:

  • AnimationDuration – specifies how long does animating new image take. The default value is 500 ms which is too fast in my opinion, set it to something comfortable to you.
  • AnimationType – Specifies how new images come into existence. The default value is None. You have three additional options here:
    1. HorizontalExpand – new image will expand from vertical middle line
    2. VerticalExpand – new image will expand from horizontal middle line
    3. Fade – new image will slowly fade into existence.

    VerticalExpand is the one used by the People Hub tile, but at least you have additional options here. If the animation type is set to None, the image will quickly appear and simply replace previous image instantly. You can compare three types of animation on the following image (from left to right: vertical, horizontal, fade).

  • ImageCycleInterval – duration between image cycles. Default value is 1000.
  • Width and Height are set to 173 which is the default size for HubTile. You can omit it.
  • Rows and Columns properties specify how many rows and columns will your tile have. Default values are 3 for both, but you can customize it if you want to create smaller, larger or wider/higher tiles. Here is an example of a large tile (the Columns property is set to 6:
  • LargeTileColumns and LargeTileRows – People Hub displays some images as 2×2 blocks. If you set these two properties to 2, you will get the same effect. Note that the default value already is 2. Keep in mind that you can customize it for your specific scenario. Works well if you want to do something special for your application.
  • ItemsSource – if you are binding to property in the view model, make sure that it is List or something that inherits that class. This means that you cannot use ObservableCollection which is fine since the ImageTile control won’t react to changes anyway. Since it uses URIs instead of Strings, add them as relative URIs to your images added to project as Content.
  • IsFrozen – defines whether the ImageTile is static or animated. Since the default value is False, you must explicitly set it to True if you want ImageTile to be animated. Please note that this has been fixed and if you are building binaries yourself, it will work.

Since lots of properties have default values already set to make control appear similar to the People Hub tile, you can create it with this minimal fragment:

<c4f:ImageTile ItemsSource="{Binding Images}"
                  IsFrozen="False" />

Freely omit the IsFrozen property if you are using more recent build (after 1.6).

Also note that there is a small problem with transparent images as seen in the image below. It is recommended that you use non transparent images with this control. Also make sure that you do not have duplicate URIs in the ItemsSource collection. If you do have duplicates, the application will probably freeze.

All images used in this post can be downloaded from http://www.iconspedia.com/. You can download the source code for the sample from here (SkyDrive).

Keep up with the latest DevTest Jargon with the latest Mobile DevTest Dictionary. Brought to you in partnership with Perfecto.

Topics:

Published at DZone with permission of Toni Petrina, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}