How to Create WinForms Tile Layouts in Your Desktop App

If you want your app to look like the modern Windows Start Menu tiles, you are at the right place. There is a control in the ComponentOne WinForms Edition named C1TileControl, which is used in Windows Forms application development to create a tiled layout for displaying data or information.

It allows for the efficient organization and display of large amounts of information in a compact and easily navigable format. Additionally, it supports interaction with the user, such as the ability to drag and drop tiles along with smooth animations or click on them to access further information. You can make dynamic tiles of various sizes. It is also possible to make tiles both static and dynamic.

Live tiles change their content in an infinite loop with some animation effects. Read on to learn more about C1TileControl, or download a sample today.

Ready to Try It Out? Download ComponentOne Today!

How to use the C1TileControl

In this section, we will learn how to utilize the C1TileControl to build a simple .NET 6 Windows Form App and personalize it using the form designer.

1. Create a new Windows Forms app and set the project framework to .NET 6.0 using the project properties window.
2. Install the C1.Win.TileControl package using the NuGet Package Manager. The C1TileControl will be added to the Toolbox once the package gets installed.
3. Drag-drop the C1TileControl from the toolbox to Windows Form App.
4. To include more Groups in the C1TileControl, go to the Smart Tag button and select Edit Groups. It will open the Group Collection Editor, where you can add groups and tiles as required.
5. To edit the text of a Tile or Group, click on either one and access the C1TileControl Task pop-up, where you can make the desired changes.
6. If you want to respond to a click on a specific tile, double-click on that particular tile. This action will generate a click event handler in the code behind where you can execute the desired task.

Please refer to the following GIF, which demonstrates the implementation of all the aforementioned steps.

Connect the Tiles to a Data Source

The C1TileControl can be connected to a data source. We can generate a tile element for each row in the related data table. You can map data columns to the properties of the autogenerated Tile components. There are cryptic foreign key values in some columns, like Product.SupplierID that you can employ the PropertyMapping object's Lookup property to replace those values with understandable strings, such as Supplier.Country, from a different table or data source. You can find the complete implementation of this feature in the DataBound code files available in the Tile Explorer sample.

Create Custom Tiles Quickly with Templates

The primary components of the C1TileControl are tiles and templates. Tiles provide data, while templates dictate how that data is visualized. It is possible to switch between templates for the same tile, allowing for the display of different aspects of the data. Additionally, the same template can be used for multiple tiles.

Templates can contain three distinct elements: panels, text, and images. Panels can contain nested elements, including other panels. With numerous layout options available, there is significant flexibility in designing the template's visual arrangement. For a complete demonstration of these features, please refer to the TileLayout code files included in the Tile Explorer sample.

Animate the Tiles to Create a Live Dashboard

In the C1TileControl, you can implement different transitions to animate, replacing one tile's values with another. This sliding effect is reminiscent of the transition feature found in Microsoft PowerPoint. The C1TileControl can display data for a set duration with potential random variations before transitioning to another slide using the designated transition. The speed of the transition can be adjusted to be faster or slower.

Furthermore, you can designate fixed elements that appear on top of all slides. Additionally, tiles can be rearranged via a mouse or touch interface. For a complete implementation of these features, please refer to the MovingSlides code files included in the Tile Explorer sample.

Conclusion

Make your desktop application unique and noticeable. In addition to creating with a fresh perspective, strive to develop for the future. As Windows evolves, we at C1 believe your application should improve with our controls. To learn more, check out the C1TileControl Documentation or the Tile Explorer sample.

We hope that you will find the C1TileControl useful. Download ComponentOne now to experience it firsthand!

If you have any inquiries, please leave them in the comments section below. Happy coding!