Getting Started with Windows Forms Tile Layout

18 Nov 201811 minutes to read

This section describes how to add the TileLayout control to a Windows Forms application and provides an overview of its basic functionalities.

Assembly deployment

Refer to the Control Dependencies section for the list of assemblies and NuGet packages required to use the Tile Layout control.

Refer to NuGet Packages to learn how to install NuGet packages in a Windows Forms application.

To install the required NuGet package using the NuGet Package Manager Console, run the following command:

Install-Package Syncfusion.Tools.Windows

Adding Tile Layout through the Designer

  1. Create a new Windows Forms application project in Visual Studio.

  2. Drag the TileLayout control from the Toolbox onto the Windows Form designer. The following required assembly references are added automatically:

    • Syncfusion.Grid.Base.dll
    • Syncfusion.Grid.Windows.dll
    • Syncfusion.Shared.Base.dll
    • Syncfusion.Shared.Windows.dll
    • Syncfusion.Tools.Base.dll
    • Syncfusion.Tools.Windows.dll

    Search WindowsForms Tile Layout control in toolbox

  3. Add a LayoutGroup through the Groups Collection option in the Smart Tag of the TileLayout control.

    WindowsForms Tile Layout control added by designer

  4. Add an ImageStreamer item to the LayoutGroup through the Items collection in the Properties window.

    Adding images streamer in WindowsForms Tile Layout

Adding TileLayout via Code

To add the TileLayout control programmatically, follow these steps:

  1. Add the required assembly references to the project.

    • Syncfusion.Grid.Base.dll
    • Syncfusion.Grid.Windows.dll
    • Syncfusion.Shared.Base.dll
    • Syncfusion.Shared.Windows.dll
    • Syncfusion.Tools.Base.dll
    • Syncfusion.Tools.Windows.dll

    Then include the Syncfusion.Windows.Forms.Tools namespace in the code.

    using Syncfusion.Windows.Forms.Tools;
    using System.Windows.Forms;
    using System.Drawing;
    using System.ComponentModel;
    Imports Syncfusion.Windows.Forms.Tools
    Imports System.Windows.Forms
    Imports System.Drawing
    Imports System.ComponentModel

  2. Create an instance of the TileLayout control in the Form1 constructor and add it to the form.

    public partial class Form1 : Form
    {
        private Syncfusion.Windows.Forms.Tools.TileLayout tileLayout1;
        public Form1()
        {
            InitializeComponent();
            this.tileLayout1 = new TileLayout();
            this.Controls.Add(this.tileLayout1);
        }
    }
    Public Partial Class Form1
        Inherits System.Windows.Forms.Form
   
        Private tileLayout1 As Syncfusion.Windows.Forms.Tools.TileLayout
   
        Public Sub New()
            InitializeComponent()
            Me.tileLayout1 = New TileLayout()
            Me.Controls.Add(Me.tileLayout1)
        End Sub
    End Class

  3. Create instances of LayoutGroup and add them to the TileLayout control.

    // Create instance of LayoutGroup
    LayoutGroup layoutGroup1 = new LayoutGroup();
    LayoutGroup layoutGroup2 = new LayoutGroup();
   
    layoutGroup1.BackColor = ColorTranslator.FromHtml("#f8c6f5");
    layoutGroup2.BackColor = ColorTranslator.FromHtml("#f8c6f5");
   
    // Add it to TileLayout
    this.tileLayout1.Groups.Add(layoutGroup1);
    this.tileLayout1.Groups.Add(layoutGroup2);
    ' Create instance of LayoutGroup
    Dim layoutGroup1 As New LayoutGroup()
    Dim layoutGroup2 As New LayoutGroup()
   
    layoutGroup1.BackColor = ColorTranslator.FromHtml("#f8c6f5")
    layoutGroup2.BackColor = ColorTranslator.FromHtml("#f8c6f5")
   
    ' Add it to TileLayout
    Me.tileLayout1.Groups.Add(layoutGroup1)
    Me.tileLayout1.Groups.Add(layoutGroup2)

    Adding group by code in WindowsForms Tile Layout

  4. Create instances of ImageStreamer and add them to the LayoutGroup through its Items collection.

    // Create instance of ImageStreamer (declared as fields in Form1)
    ImageStreamer imageStreamer1 = new ImageStreamer();
    ImageStreamer imageStreamer2 = new ImageStreamer();
    ImageStreamer imageStreamer3 = new ImageStreamer();
    ImageStreamer imageStreamer4 = new ImageStreamer();
    ImageStreamer imageStreamer5 = new ImageStreamer();
    ImageStreamer imageStreamer6 = new ImageStreamer();
    ImageStreamer imageStreamer7 = new ImageStreamer();
    ImageStreamer imageStreamer8 = new ImageStreamer();
   
    // Add images to ImageStreamer
    this.imageStreamer1.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer1.Images"))));
    this.imageStreamer2.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer2.Images"))));
    this.imageStreamer3.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer3.Images"))));
    this.imageStreamer4.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer4.Images"))));
    this.imageStreamer5.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer5.Images"))));
    this.imageStreamer6.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer6.Images"))));
    this.imageStreamer7.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer7.Images"))));
    this.imageStreamer8.Images.Add(((System.Drawing.Image)(resources.GetObject("imageStreamer8.Images"))));
   
    // Add it to LayoutGroup
    this.layoutGroup1.Items.Add(this.imageStreamer1);
    this.layoutGroup1.Items.Add(this.imageStreamer2);
    this.layoutGroup1.Items.Add(this.imageStreamer3);
    this.layoutGroup1.Items.Add(this.imageStreamer4);
   
    this.layoutGroup2.Items.Add(this.imageStreamer5);
    this.layoutGroup2.Items.Add(this.imageStreamer6);
    this.layoutGroup2.Items.Add(this.imageStreamer7);
    this.layoutGroup2.Items.Add(this.imageStreamer8);
    ' Create instance of ImageStreamer
    Dim imageStreamer1 As New ImageStreamer()
    Dim imageStreamer2 As New ImageStreamer()
    Dim imageStreamer3 As New ImageStreamer()
    Dim imageStreamer4 As New ImageStreamer()
    Dim imageStreamer5 As New ImageStreamer()
    Dim imageStreamer6 As New ImageStreamer()
    Dim imageStreamer7 As New ImageStreamer()
    Dim imageStreamer8 As New ImageStreamer()
   
    ' Add images to ImageStreamer
    Me.imageStreamer1.Images.Add(CType(resources.GetObject("imageStreamer1.Images"), System.Drawing.Image))
    Me.imageStreamer2.Images.Add(CType(resources.GetObject("imageStreamer2.Images"), System.Drawing.Image))
    Me.imageStreamer3.Images.Add(CType(resources.GetObject("imageStreamer3.Images"), System.Drawing.Image))
    Me.imageStreamer4.Images.Add(CType(resources.GetObject("imageStreamer4.Images"), System.Drawing.Image))
    Me.imageStreamer5.Images.Add(CType(resources.GetObject("imageStreamer5.Images"), System.Drawing.Image))
    Me.imageStreamer6.Images.Add(CType(resources.GetObject("imageStreamer6.Images"), System.Drawing.Image))
    Me.imageStreamer7.Images.Add(CType(resources.GetObject("imageStreamer7.Images"), System.Drawing.Image))
    Me.imageStreamer8.Images.Add(CType(resources.GetObject("imageStreamer8.Images"), System.Drawing.Image))
   
    ' Add it to LayoutGroup
    Me.layoutGroup1.Items.Add(Me.imageStreamer1)
    Me.layoutGroup1.Items.Add(Me.imageStreamer2)
    Me.layoutGroup1.Items.Add(Me.imageStreamer3)
    Me.layoutGroup1.Items.Add(Me.imageStreamer4)
   
    Me.layoutGroup2.Items.Add(Me.imageStreamer5)
    Me.layoutGroup2.Items.Add(Me.imageStreamer6)
    Me.layoutGroup2.Items.Add(Me.imageStreamer7)
    Me.layoutGroup2.Items.Add(Me.imageStreamer8)

    Adding images to Tile Layout Group in WindowsForms