Loading...
Loading...
Compare original and translation side by side
<Window xmlns:kanban="using:Syncfusion.UI.Xaml.Kanban">
<kanban:SfKanban x:Name="kanban"
ItemsSource="{Binding TaskDetails}">
<kanban:SfKanban.DataContext>
<local:ViewModel/>
</kanban:SfKanban.DataContext>
</kanban:SfKanban>
</Window><Window xmlns:kanban="using:Syncfusion.UI.Xaml.Kanban">
<kanban:SfKanban x:Name="kanban"
ItemsSource="{Binding TaskDetails}">
<kanban:SfKanban.DataContext>
<local:ViewModel/>
</kanban:SfKanban.DataContext>
</kanban:SfKanban>
</Window>using Syncfusion.UI.Xaml.Kanban;
public class ViewModel
{
public ObservableCollection<KanbanModel> TaskDetails { get; set; }
public ViewModel()
{
TaskDetails = new ObservableCollection<KanbanModel>
{
new KanbanModel
{
Title = "UWP Issue",
Id = "651",
Description = "Fix crosshair label template issue",
Category = "Open",
IndicatorColorKey = "High",
Tags = new List<string> { "Bug Fixing" }
},
new KanbanModel
{
Title = "Kanban Feature",
Id = "25678",
Description = "Implement drag and drop support",
Category = "In Progress",
IndicatorColorKey = "Normal",
Tags = new List<string> { "New Feature" }
}
};
}
}using Syncfusion.UI.Xaml.Kanban;
public class ViewModel
{
public ObservableCollection<KanbanModel> TaskDetails { get; set; }
public ViewModel()
{
TaskDetails = new ObservableCollection<KanbanModel>
{
new KanbanModel
{
Title = "UWP Issue",
Id = "651",
Description = "Fix crosshair label template issue",
Category = "Open",
IndicatorColorKey = "High",
Tags = new List<string> { "Bug Fixing" }
},
new KanbanModel
{
Title = "Kanban Feature",
Id = "25678",
Description = "Implement drag and drop support",
Category = "In Progress",
IndicatorColorKey = "Normal",
Tags = new List<string> { "New Feature" }
}
};
}
}<kanban:SfKanban AutoGenerateColumns="False"
ItemsSource="{Binding TaskDetails}">
<kanban:KanbanColumn HeaderText="To Do" Categories="Open" />
<kanban:KanbanColumn HeaderText="In Progress" Categories="In Progress" />
<kanban:KanbanColumn HeaderText="Done" Categories="Done" />
</kanban:SfKanban><kanban:SfKanban AutoGenerateColumns="False"
ItemsSource="{Binding TaskDetails}">
<kanban:KanbanColumn HeaderText="To Do" Categories="Open" />
<kanban:KanbanColumn HeaderText="In Progress" Categories="In Progress" />
<kanban:KanbanColumn HeaderText="Done" Categories="Done" />
</kanban:SfKanban>// Columns automatically generated from Category property values
kanban.AutoGenerateColumns = true;
kanban.ItemsSource = viewModel.TaskDetails;// 列会自动从Category属性值生成
kanban.AutoGenerateColumns = true;
kanban.ItemsSource = viewModel.TaskDetails;<kanban:KanbanColumn HeaderText="In Progress"
Categories="In Progress"
MinimumCount="2"
MaximumCount="5" /><kanban:KanbanColumn HeaderText="In Progress"
Categories="In Progress"
MinimumCount="2"
MaximumCount="5" /><kanban:SfKanban.CardTemplate>
<DataTemplate>
<Border Background="#F3CFCE"
BorderThickness="1"
CornerRadius="3">
<StackPanel Margin="10">
<TextBlock Text="{Binding Title}"
FontWeight="Bold"
FontSize="14" />
<TextBlock Text="{Binding Description}"
FontSize="12"
TextWrapping="Wrap" />
</StackPanel>
</Border>
</DataTemplate>
</kanban:SfKanban.CardTemplate><kanban:SfKanban.CardTemplate>
<DataTemplate>
<Border Background="#F3CFCE"
BorderThickness="1"
CornerRadius="3">
<StackPanel Margin="10">
<TextBlock Text="{Binding Title}"
FontWeight="Bold"
FontSize="14" />
<TextBlock Text="{Binding Description}"
FontSize="12"
TextWrapping="Wrap" />
</StackPanel>
</Border>
</DataTemplate>
</kanban:SfKanban.CardTemplate><kanban:SfKanban SwimlaneKey="Assignee"
ItemsSource="{Binding TaskDetails}">
<!-- Cards grouped by Assignee property -->
</kanban:SfKanban><kanban:SfKanban SwimlaneKey="Assignee"
ItemsSource="{Binding TaskDetails}">
<!-- 卡片按Assignee属性分组 -->
</kanban:SfKanban><kanban:SfKanban.Workflows>
<kanban:KanbanWorkflow Category="Open">
<kanban:KanbanWorkflow.AllowedTransitions>
<x:String>In Progress</x:String>
</kanban:KanbanWorkflow.AllowedTransitions>
</kanban:KanbanWorkflow>
<kanban:KanbanWorkflow Category="In Progress">
<kanban:KanbanWorkflow.AllowedTransitions>
<x:String>Done</x:String>
<x:String>Won't Fix</x:String>
</kanban:KanbanWorkflow.AllowedTransitions>
</kanban:KanbanWorkflow>
</kanban:SfKanban.Workflows><kanban:SfKanban.Workflows>
<kanban:KanbanWorkflow Category="Open">
<kanban:KanbanWorkflow.AllowedTransitions>
<x:String>In Progress</x:String>
</kanban:KanbanWorkflow.AllowedTransitions>
</kanban:KanbanWorkflow>
<kanban:KanbanWorkflow Category="In Progress">
<kanban:KanbanWorkflow.AllowedTransitions>
<x:String>Done</x:String>
<x:String>Won't Fix</x:String>
</kanban:KanbanWorkflow.AllowedTransitions>
</kanban:KanbanWorkflow>
</kanban:SfKanban.Workflows>// Custom model
public class TaskDetails
{
public string Title { get; set; }
public string Description { get; set; }
public string Status { get; set; }
}
// XAML
<kanban:SfKanban ItemsSource="{Binding Tasks}"
ColumnMappingPath="Status">
<kanban:SfKanban.CardTemplate>
<!-- Define custom template -->
</kanban:SfKanban.CardTemplate>
</kanban:SfKanban>// 自定义模型
public class TaskDetails
{
public string Title { get; set; }
public string Description { get; set; }
public string Status { get; set; }
}
// XAML
<kanban:SfKanban ItemsSource="{Binding Tasks}"
ColumnMappingPath="Status">
<kanban:SfKanban.CardTemplate>
<!-- 定义自定义模板 -->
</kanban:SfKanban.CardTemplate>
</kanban:SfKanban>| Property | Type | Purpose | When to Use |
|---|---|---|---|
| object | Data source for cards | Always (required) |
| bool | Auto-create columns from Category | Quick setup vs custom control |
| Collection | Manual column definitions | When AutoGenerateColumns = false |
| string | Property for column categorization | Custom models (default: "Category") |
| string | Property for swim lane grouping | Organizing by teams/projects |
| DataTemplate | Custom card appearance | Custom data models or styling |
| DataTemplate | Custom column header | Branding or additional info |
| DataTemplate | Custom swim lane header | Custom swim lane display |
| double | Minimum column width | Responsive layouts |
| double | Maximum column width | Controlling column size |
| double | Fixed column width | Uniform column sizing |
| string | Property for sorting cards | Ordering cards by priority/date |
| enum | Ascending or Descending | Sort direction |
| Collection | Allowed card transitions | Workflow validation |
| Collection | Color mapping for indicators | Priority/status colors |
| bool | Enable card tooltips | Additional card info on hover |
| 属性 | 类型 | 用途 | 适用场景 |
|---|---|---|---|
| object | 卡片的数据源 | 所有场景(必填) |
| bool | 从Category自动生成列 | 快速配置与自定义控件切换 |
| 集合 | 手动定义列 | 当AutoGenerateColumns = false时 |
| string | 列分类对应的属性 | 自定义模型(默认值:"Category") |
| string | 泳道分组对应的属性 | 按团队/项目组织内容 |
| DataTemplate | 自定义卡片外观 | 自定义数据模型或样式定制 |
| DataTemplate | 自定义列表头 | 品牌定制或展示额外信息 |
| DataTemplate | 自定义泳道表头 | 自定义泳道展示 |
| double | 最小列宽 | 响应式布局 |
| double | 最大列宽 | 控制列尺寸 |
| double | 固定列宽 | 统一列尺寸 |
| string | 卡片排序对应的属性 | 按优先级/日期排序卡片 |
| 枚举 | 升序或降序 | 排序方向 |
| 集合 | 允许的卡片流转规则 | 工作流校验 |
| 集合 | 标识的颜色映射 | 优先级/状态颜色配置 |
| bool | 启用卡片提示框 | hover时展示额外卡片信息 |
| Property | Type | Purpose | When to Use |
|---|---|---|---|
| string | Column display name | Custom column titles |
| string | Comma-separated categories | Mapping data to column |
| int | WIP minimum limit | Workflow management |
| int | WIP maximum limit | Preventing overload |
| bool | Enable dragging from column | Controlling card movement |
| bool | Enable dropping to column | Restricting drops |
| bool | Column collapsed/expanded state | UI state control |
| 属性 | 类型 | 用途 | 适用场景 |
|---|---|---|---|
| string | 列展示名称 | 自定义列标题 |
| string | 逗号分隔的类别 | 将数据映射到对应列 |
| int | WIP最小限制 | 工作流管理 |
| int | WIP最大限制 | 避免工作过载 |
| bool | 允许从该列拖拽 | 控制卡片移动 |
| bool | 允许放置到该列 | 限制放置行为 |
| bool | 列收起/展开状态 | UI状态控制 |
| Property | Type | Purpose |
|---|---|---|
| string | Card title |
| object | Unique identifier |
| string | Card description |
| object | Column assignment |
| string | Person assigned (swim lane default) |
| object | Priority/status indicator |
| List<string> | Card labels |
| Image | Card avatar/icon |
| 属性 | 类型 | 用途 |
|---|---|---|
| string | 卡片标题 |
| object | 唯一标识 |
| string | 卡片描述 |
| object | 所属列 |
| string | 负责人(泳道默认字段) |
| object | 优先级/状态标识 |
| List<string> | 卡片标签 |
| Image | 卡片头像/图标 |
<kanban:SfKanban ItemsSource="{Binding Issues}">
<kanban:KanbanColumn HeaderText="Backlog" Categories="Open,New" />
<kanban:KanbanColumn HeaderText="In Development"
Categories="In Progress"
MaximumCount="3" />
<kanban:KanbanColumn HeaderText="Testing"
Categories="Testing"
MaximumCount="5" />
<kanban:KanbanColumn HeaderText="Done"
Categories="Closed,Resolved" />
</kanban:SfKanban><kanban:SfKanban ItemsSource="{Binding Issues}">
<kanban:KanbanColumn HeaderText="Backlog" Categories="Open,New" />
<kanban:KanbanColumn HeaderText="In Development"
Categories="In Progress"
MaximumCount="3" />
<kanban:KanbanColumn HeaderText="Testing"
Categories="Testing"
MaximumCount="5" />
<kanban:KanbanColumn HeaderText="Done"
Categories="Closed,Resolved" />
</kanban:SfKanban><kanban:SfKanban SwimlaneKey="Assignee"
ItemsSource="{Binding ProjectTasks}">
<kanban:SfKanban.SwimlaneHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Width="30" Height="30"/>
<TextBlock Text="{Binding Title}" Margin="10,0"/>
</StackPanel>
</DataTemplate>
</kanban:SfKanban.SwimlaneHeaderTemplate>
</kanban:SfKanban><kanban:SfKanban SwimlaneKey="Assignee"
ItemsSource="{Binding ProjectTasks}">
<kanban:SfKanban.SwimlaneHeaderTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding Image}" Width="30" Height="30"/>
<TextBlock Text="{Binding Title}" Margin="10,0"/>
</StackPanel>
</DataTemplate>
</kanban:SfKanban.SwimlaneHeaderTemplate>
</kanban:SfKanban><kanban:SfKanban SortingMappingPath="Priority"
SortingOrder="Descending"
ItemsSource="{Binding Tasks}"
CardDrop="OnCardDrop">
<!-- Columns -->
</kanban:SfKanban>private void OnCardDrop(object sender, KanbanCardDropEventArgs e)
{
kanban.RefreshKanbanColumn(e.TargetColumn.AllowedTransitionCategory.ToString());
}<kanban:SfKanban SortingMappingPath="Priority"
SortingOrder="Descending"
ItemsSource="{Binding Tasks}"
CardDrop="OnCardDrop">
<!-- 列配置 -->
</kanban:SfKanban>private void OnCardDrop(object sender, KanbanCardDropEventArgs e)
{
kanban.RefreshKanbanColumn(e.TargetColumn.AllowedTransitionCategory.ToString());
}kanban.CardTapped += (s, e) => {
var card = e.SelectedCard.Content as KanbanModel;
var dialog = new TaskDetailsDialog(card);
await dialog.ShowAsync();
};kanban.CardTapped += async (s, e) => {
var card = e.SelectedCard.Content as KanbanModel;
var dialog = new TaskDetailsDialog(card);
await dialog.ShowAsync();
};Categories="Open,New,Backlog"Categories="Open,New,Backlog"