Today we are proud to release the newest addition to the Action Component Suite for the Xamarin platform and Visual Studio, Action Tiles.

Action Tiles provides a highly customizable, cross platform tile collection manager for both iOS and Android. Action Tiles allows you to organize several different types, sizes and styles of tiles into collections of groups that the user can scroll through and tap to interact with.

Action Tiles provide several different types of automatic UI updates, such as changing color, images or text at a given time interval. In many cases the same code used to work with an Action Tiles on one platform can be used virtually unchanged on another which not only saves time, but improves code maintainability:

You can select either Horizontal or Vertical scrolling and the Action Tile Controller will reflow the tiles to fill the opposite direction and allow the user to scroll in the desired direction:

The Action Tile Controller includes a built-in Navigation Bar that can optionally be displayed at the top of the controller. You have the option of including buttons (UIButton on iOS or Button on Android) on the left or right hand side of the Navigation Bar to provide added functionality:

With the Action Tile Controller added to the app User Interface, you can use the following code to add one or more Tile Groups. For example,:

<span class="token comment" spellcheck="true">// Add new group</span>
<span class="token keyword">var</span> scenes <span class="token operator">=</span> tileController<span class="token punctuation">.</span><span class="token function">AddGroup</span><span class="token punctuation">(</span>ACTileGroupType<span class="token punctuation">.</span>ExpandingGroup<span class="token punctuation">,</span> <span class="token string">"Favorite Scenes"</span><span class="token punctuation">,</span> <span class="token string">"Add your favorite scenes here"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

With a Tile Group created, you can now insert one or more Tile into the group. For example, in iOS:

<span class="token comment" spellcheck="true">// Add tile to group</span>
group1<span class="token punctuation">.</span><span class="token function">AddTile</span><span class="token punctuation">(</span>ACTileStyle<span class="token punctuation">.</span>DescriptionBlock<span class="token punctuation">,</span> ACTileSize<span class="token punctuation">.</span>Quad<span class="token punctuation">,</span> <span class="token string">"Message"</span><span class="token punctuation">,</span> <span class="token string">"Welcome!"</span><span class="token punctuation">,</span> <span class="token string">"We hope that you are enjoying your ActionTile View. Look around and see what all I can do!"</span><span class="token punctuation">,</span> <span class="token string">"OpenMail"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

The Action Tile Controller provides a built-it Live Update system where you can specify that a given Tile or Tile Group automatically updates its content or appearance based on a specified time interval. For example, randomly picking a different hue of a base color:

<span class="token comment" spellcheck="true">// Assign a live update action to this group</span>
group1<span class="token punctuation">.</span>liveUpdateAction <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">ACTileLiveUpdateGroupChromaKey</span><span class="token punctuation">(</span>group1<span class="token punctuation">,</span> ACColor<span class="token punctuation">.</span>Purple<span class="token punctuation">,</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token number">250</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

Responding to user interaction events couldn’t be easier with Action Tiles. You have the option of responding to TileTouched events for an individual Tile, a Tile Group or the Tile Controller. Additionally, you can use any combination of the above interactions:

<span class="token comment" spellcheck="true">// Display touched tile</span>
tileController<span class="token punctuation">.</span>TileTouched <span class="token operator">+</span><span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">group</span><span class="token punctuation">,</span> tile<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    Console<span class="token punctuation">.</span><span class="token function">WriteLine</span><span class="token punctuation">(</span><span class="token string">"Touched tile {0} in group {1}"</span><span class="token punctuation">,</span> tile<span class="token punctuation">.</span>title<span class="token punctuation">,</span> <span class="token keyword">group</span><span class="token punctuation">.</span>title<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

Visit the Action Components Developer Center and read the Action Tile Quick Start Guide to find out more.

Trial Version

Examples of implementing an Action Tiles are available for both iOS and Android from our GitHub site. The Trial version of Action Tiles is fully functional but includes a Toast style popup. The fully licensed version removes this popup.