using DevExpress.Utils.Svg;
using DevExpress.XtraGrid.Views.Tile;
using System.ComponentModel;

namespace DXKanbanBoard {
    public partial class Form1 : DevExpress.XtraEditors.XtraForm {
        TileView tileView;
        public Form1() {
            InitializeComponent();
            // Create a new TileView instance and assign it to the grid control.
            tileView = new TileView(gridControl1);
            gridControl1.MainView = tileView;

            // Bind the grid control to a task list.
            gridControl1.DataSource = LoadTasks();
        }

        // Creates a collection of task records and returns it as a binding list.
        public BindingList<TaskRecord> LoadTasks() {
            return new BindingList<TaskRecord>() {
                new TaskRecord {
                    Caption = "Task 1",
                    Description = "Description for Task 1",
                    Status = TaskStatus.ToDo,
                    // svgImageCollection1 is created in the designer and contains SVG images.
                    AttachedImage = svgImageCollection1[0] 
                },
                new TaskRecord {
                    Caption = "Task 2",
                    Description = "Description for Task 2",
                    Status = TaskStatus.Planned,
                    AttachedImage = svgImageCollection1[1]
                },
                new TaskRecord {
                    Caption = "Task 3",
                    Description = "Description for Task 3",
                    Status = TaskStatus.Testing,
                    AttachedImage = svgImageCollection1[2]
                }
            };
        }

    }
    // Defines task status options.
    public enum TaskStatus { ToDo, Planned, Doing, Testing, Done }
    public class TaskRecord {
        public string Caption { get; set; } // Task title.
        public string Description { get; set; } // Task description.
        public SvgImage AttachedImage { get; set; } // Associated SVG icon.
        public TaskStatus Status { get; set; } // Task status.
    }
}

Imports DevExpress.Utils.Svg
Imports DevExpress.XtraGrid.Views.Tile
Imports System.ComponentModel

Namespace DXKanbanBoard
    Public Partial Class Form1
        Inherits DevExpress.XtraEditors.XtraForm

        Private tileView As TileView

        Public Sub New()
            InitializeComponent()
            ' Create a new TileView instance and assign it to the grid control.
            tileView = New TileView(gridControl1)
            gridControl1.MainView = tileView

            ' Bind the grid control to a task list.
            gridControl1.DataSource = LoadTasks()
        End Sub

        ' Creates a collection of task records and returns it as a binding list.
        Public Function LoadTasks() As BindingList(Of TaskRecord)
            Return New BindingList(Of TaskRecord) From {
                New TaskRecord With {
                    .Caption = "Task 1",
                    .Description = "Description for Task 1",
                    .Status = TaskStatus.ToDo,
                    ' svgImageCollection1 is created in the designer and contains SVG images.
                    .AttachedImage = svgImageCollection1(0)
                },
                New TaskRecord With {
                    .Caption = "Task 2",
                    .Description = "Description for Task 2",
                    .Status = TaskStatus.Planned,
                    .AttachedImage = svgImageCollection1(1)
                },
                New TaskRecord With {
                    .Caption = "Task 3",
                    .Description = "Description for Task 3",
                    .Status = TaskStatus.Testing,
                    .AttachedImage = svgImageCollection1(2)
                }
            }
        End Function

    End Class

    ' Defines task status options.
    Public Enum TaskStatus
        ToDo
        Planned
        Doing
        Testing
        Done
    End Enum

    Public Class TaskRecord
        Public Property Caption As String ' Task title.
        Public Property Description As String ' Task description.
        Public Property AttachedImage As SvgImage ' Associated SVG icon.
        Public Property Status As TaskStatus ' Task status.
    End Class
End Namespace

tileView.OptionsTiles.LayoutMode = TileViewLayoutMode.Kanban;

tileView.OptionsTiles.LayoutMode = TileViewLayoutMode.Kanban

tileView.ColumnSet.GroupColumn = tileView.Columns["Status"];

tileView.ColumnSet.GroupColumn = tileView.Columns("Status")

// Enable drag-and-drop functionality.
tileView.OptionsDragDrop.AllowDrag = true;

' Enable drag-and-drop functionality.
tileView.OptionsDragDrop.AllowDrag = True

tileView.OptionsBehavior.EditingMode = TileViewEditingMode.EditForm;

tileView.OptionsBehavior.EditingMode = TileViewEditingMode.EditForm

using System.IO;
using System.Collections.Generic;
using DevExpress.XtraGrid.Views.Tile;

Dictionary<string, Image> imageCache = new Dictionary<string, Image>();
private void TileView1_ItemCustomize(object sender, TileViewItemCustomizeEventArgs e) {
    TileView view = sender as TileView;
    object cellValue = view.GetRowCellValue(e.RowHandle, "ImagePath");
    string imagePath = cellValue != null ? cellValue.ToString() : string.Empty;
    e.Item.Elements[2].Text = "";
    e.Item.Elements[2].ImageOptions.ImageSize = new Size(16, 16);
    e.Item.Elements[2].ImageOptions.Image = LoadImage(imagePath);
}
Image LoadImage(string path) {
    Image img;
    if(!imageCache.TryGetValue(path, out img)) {
        if(File.Exists(path))
            img = Image.FromFile(path);
        imageCache.Add(path, img);
    }
    return img;
}

Imports System.IO
Imports System.Collections.Generic
Imports DevExpress.XtraGrid.Views.Tile

Private imageCache As New Dictionary(Of String, Image)()
Private Sub TileView1_ItemCustomize(ByVal sender As Object, ByVal e As TileViewItemCustomizeEventArgs)
    Dim view As TileView = TryCast(sender, TileView)
    Dim cellValue As Object = view.GetRowCellValue(e.RowHandle, "ImagePath")
    Dim imagePath As String = If(cellValue IsNot Nothing, cellValue.ToString(), String.Empty)
    e.Item.Elements(2).Text = ""
    e.Item.Elements(2).ImageOptions.ImageSize = New Size(16, 16)
    e.Item.Elements(2).ImageOptions.Image = LoadImage(imagePath)
End Sub
Private Function LoadImage(ByVal path As String) As Image
    Dim img As Image = Nothing
    If Not imageCache.TryGetValue(path, img) Then
        If File.Exists(path) Then
            img = Image.FromFile(path)
        End If
        imageCache.Add(path, img)
    End If
    Return img
End Function

void TileView_CustomColumnDisplayText(object sender, Views.Base.CustomColumnDisplayTextEventArgs e) {
    if(e.IsForGroupRow) {
        var kanbanGroup = tileView.GetKanbanGroupByValue(e.Value);
        int count = tileView.GetChildRowCount(kanbanGroup);
        string cards = count == 1 ? " card" : " cards";
        e.DisplayText += "
<size=-2><r>" + count.ToString() + cards;
    }
}

Private Sub TileView1_CustomColumnDisplayText(sender As Object, e As DevExpress.XtraGrid.Views.Base.CustomColumnDisplayTextEventArgs) Handles TileView1.CustomColumnDisplayText
    If e.IsForGroupRow Then
        Dim kanbanGroup = TileView1.GetKanbanGroupByValue(e.Value)
        Dim count As Integer = TileView1.GetChildRowCount(kanbanGroup)
        Dim cards As String
        If count = 1 Then
            cards = " card"
        Else
            cards = " cards"
        End If
        e.DisplayText &= "
<size=-2><r>" & count.ToString() & cards
    End If
End Sub

// Display the button in the group footer.
tileView.OptionsKanban.GroupFooterButton.Visible = DevExpress.Utils.DefaultBoolean.True;
// Set the text for the group footer button.
tileView.OptionsKanban.GroupFooterButton.Text = "Add Task";

' Display the button in the group footer.
tileView.OptionsKanban.GroupFooterButton.Visible = DevExpress.Utils.DefaultBoolean.True
' Set the text for the group footer button.
tileView.OptionsKanban.GroupFooterButton.Text = "Add Task"

tileView.ContextButtonOptions.TopPanelColor = Color.FromArgb(160, 0, 0, 0);
tileView.ContextButtonOptions.BottomPanelColor = Color.FromArgb(160, 0, 0, 0);

ContextButton cb_delete = new ContextButton();
cb_delete.AlignmentOptions.Panel = ContextItemPanel.Center;
cb_delete.AlignmentOptions.Position = ContextItemPosition.Center;
cb_delete.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\\cross.png");
cb_delete.Click += (o, e) =>
{
    if (XtraMessageBox.Show("Delete the item?", "Warning", MessageBoxButtons.YesNo) == DialogResult.Yes)
        tileView.DeleteSelectedRows();
};
tileView.ContextButtons.Add(cb_delete);

TrackBarContextButton cb_track = new TrackBarContextButton();
cb_track.AlignmentOptions.Panel = ContextItemPanel.Top;
tileView.ContextButtons.Add(cb_track);

RatingContextButton cb_rate = new RatingContextButton();
cb_rate.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\\Stars3_1.png");
cb_rate.ImageOptionsCollection.ItemChecked.Image = Image.FromFile(".\\Stars3_3.png");
cb_rate.Visibility = ContextItemVisibility.Visible;
cb_rate.AlignmentOptions.Panel = ContextItemPanel.Bottom;
tileView.ContextButtons.Add(cb_rate);

Imports System.Drawing
Imports DevExpress.XtraEditors
Imports DevExpress.XtraEditors.Controls

tileView.ContextButtonOptions.TopPanelColor = Color.FromArgb(160, 0, 0, 0)
tileView.ContextButtonOptions.BottomPanelColor = Color.FromArgb(160, 0, 0, 0)

Dim cb_delete As New ContextButton()
cb_delete.AlignmentOptions.Panel = ContextItemPanel.Center
cb_delete.AlignmentOptions.Position = ContextItemPosition.Center
cb_delete.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\cross.png")
AddHandler cb_delete.Click, Sub(o, e)
    If XtraMessageBox.Show("Delete the item?", "Warning", MessageBoxButtons.YesNo) = DialogResult.Yes Then
        tileView.DeleteSelectedRows()
    End If
End Sub
tileView.ContextButtons.Add(cb_delete)

Dim cb_track As New TrackBarContextButton()
cb_track.AlignmentOptions.Panel = ContextItemPanel.Top
tileView.ContextButtons.Add(cb_track)

Dim cb_rate As New RatingContextButton()
cb_rate.ImageOptionsCollection.ItemNormal.Image = Image.FromFile(".\Stars3_1.png")
cb_rate.ImageOptionsCollection.ItemChecked.Image = Image.FromFile(".\Stars3_3.png")
cb_rate.Visibility = ContextItemVisibility.Visible
cb_rate.AlignmentOptions.Panel = ContextItemPanel.Bottom
tileView.ContextButtons.Add(cb_rate)

using System.Windows.Forms;

// Set the orientation of tiles to vertical.
tileView.OptionsTiles.Orientation = Orientation.Vertical;

Imports System.Windows.Forms

' Set the orientation of tiles to vertical.
tileView.OptionsTiles.Orientation = Orientation.Vertical