diff --git a/wpf-toc.html b/wpf-toc.html index 3218cc8878..0c51383ca6 100644 --- a/wpf-toc.html +++ b/wpf-toc.html @@ -67,7 +67,6 @@
  • Toolbox Configuration
  • Download and Installation
  • Template Studio
    • -
  • Create Project
  • Add Item
  • Troubleshooting
  • Add References
    • @@ -135,6 +134,7 @@
  • Typing Indicator
  • Stop Responding
  • Response Toolbar
    • +
  • Input Toolbar
  • diff --git a/wpf/AI-AssistView/Input-Toolbar.md b/wpf/AI-AssistView/Input-Toolbar.md new file mode 100644 index 0000000000..21250281fa --- /dev/null +++ b/wpf/AI-AssistView/Input-Toolbar.md @@ -0,0 +1,123 @@ +--- +layout: post +title: Input Toolbar in WPF AI AssistView control | Syncfusion +description: Learn about the input toolbar feature in the AI AssistView control, which enables users to access quick actions to input textbox responses through toolbar items. +platform: wpf +control: SfAIAssistView +documentation: ug +--- + +# Input Toolbar in WPF AI AssistView + +The [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control includes a toolbar feature inside the input textbox. This toolbar allows users to add custom toolbar items directly within the text input area, providing quick access to frequently used actions and tools. + +## InputToolbarItem + +The **InputToolbarItem** class is used to define and add items to the input textbox toolbar in the SfAIAssistView. The following properties are available in this class: + +- **IsEnabled**: Specifies whether the toolbar item is enabled (interactive) or disabled (non-interactive). +- **Tooltip**: Sets the tooltip text displayed when the user hovers over the toolbar item. +- **Visible**: Indicates whether the toolbar item is visible. +- **ItemTemplate**: Allows you to set a custom template for rendering the toolbar item. + +## Adding an input toolbar item to the input toolbar + +The **InputToolbarItem** in [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) the text area does not include built-in toolbar items like the response toolbar (e.g., Copy, Like, Dislike, Regenerate). However, you can add custom items using the InputToolbarItem class. + +Use the ItemTemplate property to define the appearance and behavior of each toolbar item. This allows you to display icons, buttons, text, or even complex UI elements such as Path, Image, or TextBlock within the toolbar. + +{% tabs %} +{% highlight xaml %} + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +![Adding an input toolbar item using ItemTemplate in WPF SfAIAssistView control](aiassistview_images/wpf_aiassistview_input_toolbar_items.png) + +## Input toolbar position + +The **InputToolbarPosition** property of the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control specifies the placement of the input toolbar within the control. By default, the toolbar is positioned on the right side of the control. + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} +{% highlight C# %} + +SfAIAssistView aiAssistView = new SfAIAssistView(); +aiAssistView.InputToolbarPosition = ToolbarPosition.Left; + +{% endhighlight %} +{% endtabs %} + +![Input toolbar position in WPF SfAIAssistView control](aiassistview_images/wpf_aiassistview_input_toolbar_Left.png) + +## Input toolbar visibility + +The **IsInputToolbarVisible** property of the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control determines whether the input toolbar is displayed in the SfAIAssistView. When set to true, the input toolbar becomes visible. By default, this property is set to false. + +{% tabs %} +{% highlight xaml %} + + + + +{% endhighlight %} +{% highlight C# %} + +SfAIAssistView aiAssistView = new SfAIAssistView(); +aiAssistView.IsInputToolbarVisible = True; + +{% endhighlight %} +{% endtabs %} + +![Input toolbar visibility in WPF SfAIAssistView control](aiassistview_images/wpf_aiassistview_input_toolbar_visibility.png) + +## Item clicked event + +The **InputToolbarItemClicked** event is triggered whenever a toolbar item in the InputToolbarItems collection is clicked by the user. You can handle this event to perform custom actions based on which item was clicked. + +{% tabs %} +{% highlight xaml %} + + + +{% endhighlight %} +{% highlight C# %} + +SfAIAssistView sfAIAssistView = new SfAIAssistView(); +sfAIAssistView.InputToolbarItemClicked += AiAssistView_InputToolbarItemClicked; + +private void AiAssistView_InputToolbarItemClicked(object sender, InputToolbarItemClickedEventArgs e) +{ + // Call your actions based on the toolbar item clicked. +} + +{% endhighlight %} +{% endtabs %} diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_gettingstarted.png b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_gettingstarted.png index bc1bc3a736..001157e982 100644 Binary files a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_gettingstarted.png and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_gettingstarted.png differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_items.png b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_items.png new file mode 100644 index 0000000000..3405f378a3 Binary files /dev/null and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_items.png differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_left.png b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_left.png new file mode 100644 index 0000000000..b042dfb4e4 Binary files /dev/null and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_left.png differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_visibility.png b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_visibility.png new file mode 100644 index 0000000000..3405f378a3 Binary files /dev/null and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_input_toolbar_visibility.png differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_openai.gif b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_openai.gif index 335a147a56..a529be2dfd 100644 Binary files a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_openai.gif and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_openai.gif differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding.gif b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding.gif index 9777eca69c..4997744b19 100644 Binary files a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding.gif and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding.gif differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding_template.gif b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding_template.gif index 171d853017..5ff02938ea 100644 Binary files a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding_template.gif and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_stopresponding_template.gif differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_suggestions.png b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_suggestions.png index 27e7296f79..3751146b14 100644 Binary files a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_suggestions.png and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_suggestions.png differ diff --git a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_typing_indicator.gif b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_typing_indicator.gif index 335a147a56..a529be2dfd 100644 Binary files a/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_typing_indicator.gif and b/wpf/AI-AssistView/aiassistview_images/wpf_aiassistview_typing_indicator.gif differ diff --git a/wpf/Chromeless-Window/Getting-Started.md b/wpf/Chromeless-Window/Getting-Started.md index 2184a85499..e6edce4854 100644 --- a/wpf/Chromeless-Window/Getting-Started.md +++ b/wpf/Chromeless-Window/Getting-Started.md @@ -109,7 +109,6 @@ You can customize the background of the title bar by setting the [TitleBarBackgr xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" TitleBarBackground="Red" - syncfusion:SkinStorage.VisualStyle="Metro" Title="ChromelessWindow Sample" Height="350" Width="525"> @@ -133,7 +132,6 @@ The font of the caption in the title bar can be customized using the [TitleFontS xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" TitleFontSize="15" - syncfusion:SkinStorage.VisualStyle="Metro" Title="ChromelessWindow Sample" Height="350" Width="525"> @@ -158,7 +156,6 @@ You can customize the caption height by setting the [TitleBarHeight](https://hel xmlns:syncfusion="http://schemas.syncfusion.com/wpf" xmlns:local="clr-namespace:WPF_CalendarEdit" TitleBarHeight="50" - syncfusion:SkinStorage.VisualStyle="Metro" Title="ChromelessWindow Sample" Height="350" Width="525"> @@ -186,8 +183,6 @@ The text alignment of the title can be set using the [`TitleTextAlignment`](http xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Chromeless_Window_Sample" mc:Ignorable="d" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" - xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF" - skin:SfSkinManager.VisualStyle="Office2016Colorful" TitleTextAlignment="Center" Title="Chromeless Window Sample" Height="350" Width="550"> @@ -214,7 +209,6 @@ You can set the caption icon by setting the [Icon](https://learn.microsoft.com/d xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" Icon="App.ico" - syncfusion:SkinStorage.VisualStyle="Metro" Title="ChromelessWindow Sample" Height="350" Width="525"> @@ -240,8 +234,6 @@ The title bar icon can be aligned to `Left` or `Right` using the [`IconAlignment xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:Chromeless_Window_Sample" mc:Ignorable="d" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" - xmlns:skin="clr-namespace:Syncfusion.SfSkinManager;assembly=Syncfusion.SfSkinManager.WPF" - skin:SfSkinManager.VisualStyle="Office2016Colorful" TitleTextAlignment="Center" Title="Chromeless Window Sample" IconAlignment="Left" Height="350" Width="550"> @@ -264,7 +256,6 @@ You can change the border color of the chromeless window by setting the [ResizeB xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" - syncfusion:SkinStorage.VisualStyle="Metro" xmlns:syncfusion="http://schemas.syncfusion.com/wpf" ResizeBorderBrush="Red" Title="ChromelessWindow Sample" Height="350" Width="525"> diff --git a/wpf/Chromeless-Window/Getting-Started_images/TitleTextAlignment.png b/wpf/Chromeless-Window/Getting-Started_images/TitleTextAlignment.png index 56dffef6e1..257735223f 100644 Binary files a/wpf/Chromeless-Window/Getting-Started_images/TitleTextAlignment.png and b/wpf/Chromeless-Window/Getting-Started_images/TitleTextAlignment.png differ diff --git a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-border-color.png b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-border-color.png index 6311720f1b..4308238e39 100644 Binary files a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-border-color.png and b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-border-color.png differ diff --git a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon-alignment.png b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon-alignment.png index 05fbc738e4..257735223f 100644 Binary files a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon-alignment.png and b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon-alignment.png differ diff --git a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon.png b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon.png index 01216c66f3..4c430f9df8 100644 Binary files a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon.png and b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-icon.png differ diff --git a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-back-color.png b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-back-color.png index feef2cd9d7..5733d03e4b 100644 Binary files a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-back-color.png and b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-back-color.png differ diff --git a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-font-size.png b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-font-size.png index bda88d7126..0495b9ab0c 100644 Binary files a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-font-size.png and b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-font-size.png differ diff --git a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-height.png b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-height.png index c15cb6e7eb..6d0bff1dcb 100644 Binary files a/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-height.png and b/wpf/Chromeless-Window/Getting-Started_images/wpf-chromeless-window-title-height.png differ diff --git a/wpf/Kanban-Board/Getting-started.md b/wpf/Kanban-Board/Getting-started.md index 0e884d5a17..3df898eb5e 100644 --- a/wpf/Kanban-Board/Getting-started.md +++ b/wpf/Kanban-Board/Getting-started.md @@ -19,19 +19,11 @@ The following section provides an assistance to create a simple Kanban applicati N> This window differs for the Visual Basic project. -## Create a simple Kanban +## Create a simple Kanban Board -In this walk through, you will create a new application that contains the SfKanban which includes the below topics. - -* Adding SfKanban -* Create data model -* Binding data -* Defining columns -* Working with Workflows -* Work In-Progress Limit - -#### Adding SfKanban +In this section, we'll demonstrate how to build a new WPF application that integrates the `SfKanban` control. +### Adding SfKanban 1. Add the required assembly references to the project as discussed in the Reference Essential Studio Components in your Solution section. 2. Add the “Syncfusion.UI.Xaml.Kanban” namespace to the application as shown below. @@ -71,239 +63,257 @@ SfKanban kanban = new SfKanban(); {% endcapture %} {{ codesnippet2 | OrderList_Indent_Level_1 }} -#### Adding SfKanban from toolbox +### Adding SfKanban from toolbox Drag and drop the Kanban control from the toolbox to your application. ![Adding SfKanban from toolbox](sfkanban_images/wpf-kanban-board-toolbox.png) - Now the Syncfusion.SfKanban.WPF reference is added to the application references and the xmlns namespace code is generated in MainWindow.xaml as below. ![Adding SfKanban from toolbox Assembly Included](sfkanban_images/wpf-kanban-board-assembly-included.png) - ![Adding SfKanban from toolbox Xaml Reference](sfkanban_images/wpf-kanban-board-xaml-reference.png) +### Populate WPF Kanban item source -#### Create data model - -You need to create a collection of KanbanModel objects for populating SfKanban. - -{% highlight c# %} - - public class TaskDetails - { - public TaskDetails() - { - - Tasks = new ObservableCollection(); - - Tasks.Add(new KanbanModel() - { - - Title = "Universal App", - - ID = "27654", - - Description = "Incorporate feedback into functional specifications", - - Category = "Open", - - ColorKey = "Low", - - Tags = new string[] { "Deployment" }, - - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - }); - - - Tasks.Add(new KanbanModel() - { - - Title = "Universal App", - - ID = "29477", - - Description = "Design functional specifications", - - Category = "In Progress", - - ColorKey = "Normal", - - Tags = new string[] { "Design" }, - - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - }); - - - Tasks.Add(new KanbanModel() - { - Title = "Universal App", - - ID = "25678", +This section explains how to populate the WPF Kanban control's `ItemSource` by creating and binding both default and custom task data models. - Description = "Review preliminary software specifications", +#### Creating the default model tasks - Category = "Done", +* **Define the View Model:** - ColorKey = "Low", +Create a view model class to set values for the properties listed in the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class as shown in the following example code. Each [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) instance represent a card in Kanban control. - Tags = new string[] { "Analysis" }, +* **Bind item source for Kanban:** - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - }); +To populate the kanban card items, utilize the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). +* **Defining columns in the Kanban Board:** The columns are generated automatically based on the different values of the [`Category`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html#Syncfusion_UI_Xaml_Kanban_KanbanModel_Category) in the [`KanbanModel`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanModel.html) class from the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource). However, you can manually define the columns by setting the [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to `false` and adding [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html) instances to the [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html). You can define the column categories using the [`Categories`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html#Syncfusion_UI_Xaml_Kanban_KanbanColumn_Categories) property of [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html), and the cards will be added to their respective columns. - Tasks.Add(new KanbanModel() - { - Title = "Universal App", +The following sample code demonstrates this process in action: - ID = "6593", - - Description = "Draft preliminary software specifications", - - Category = "Review", - - ColorKey = "High", - - Tags = new string[] { "Analysis" }, - - ImageURL = new Uri("/images/icon.jpg", UriKind.RelativeOrAbsolute ) - - }); - } - public ObservableCollection Tasks { get; set; } - } +{% tabs %} +{% highlight XAML hl_lines="3, 4, 5, 6, 7, 8, 91, 11, 12, 13" %} + + + + + + + + + + + {% endhighlight %} +{% highlight C# hl_lines="1, 3, 4, 7, 9, 10, 11, 12, 15, 17, 18, 19, 20, 23, 25, 26, 27, 28, 31" %} -#### Binding data +SfKanban kanban = new SfKanban() +{ + AutoGenerateColumns = false, + ItemsSource = new ViewModel().Tasks +}; -In order to bind the data source of the SfKanban, set ItemsSource property as shown below. +kanban.Columns.Add(new KanbanColumn() +{ + Categories = "Open", + Title = "To Do" +}); -{% tabs %} +kanban.Columns.Add(new KanbanColumn() +{ + Categories = "In Progress", + Title = "Progress" +}); -{% highlight xaml %} +kanban.Columns.Add(new KanbanColumn() +{ + Categories = "Review,Done", + Title = "Done" +}); - +this.grid.Children.Add(kanban); {% endhighlight %} +{% highlight C# tabtitle="ViewModel" %} -{% highlight c# %} +using Syncfusion.UI.Xaml.Kanban; -SfKanban kanban = new SfKanban() +public class ViewModel { - ItemsSource = new TaskDetails().Tasks -}; + public ObservableCollection Tasks { get; set; } + public ViewModel() + { + Tasks = new ObservableCollection(); + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "27654", + Description = "Incorporate feedback into functional specifications", + Category = "Open", + ColorKey = "Low", + Tags = new string[] { "Deployment" }, + }); + + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "29477", + Description = "Design functional specifications", + Category = "In Progress", + ColorKey = "Normal", + Tags = new string[] { "Design" }, + }); + + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "25678", + Description = "Review preliminary software specifications", + Category = "Done", + ColorKey = "Low", + Tags = new string[] { "Analysis" }, + }); + + Tasks.Add(new KanbanModel() + { + Title = "Universal App", + ID = "6593", + Description = "Draft preliminary software specifications", + Category = "Review", + ColorKey = "High", + Tags = new string[] { "Analysis" }, + }); + } +} {% endhighlight %} - - {% endtabs %} -#### Defining columns +View the sample in [`GitHub`](https://github.com/SyncfusionExamples/Getting-started-in-SfKanban-WPF). -By default, we need to define the columns manually by adding the KanbanColumn object to the [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) collection property in SfKanban. +#### Creating the custom model tasks with data mapping -ItemsSource which was bound to the Kanban will be added to the respective columns using ColumnMappingPath property in SfKanban and Categories property in KanbanColumn. +You can also map custom data model to our Kanban control. The following steps demonstrate how to render tasks using the [WPF Kanban](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control with respective custom data properties. -We need to set the required property name to ColumnMappingPath which will be essential to add the data to the respective columns. +* **Create a data model for kanban:** Create a simple data model in a new class file as shown in the following example code. -In this example, the data whose Category property’s value is set as Open will be added to the ‘To Do’ Column and other data will be added to the respective columns. +* **Create view model:** Create a view model class to set values for the properties listed in the model class as shown in the following example code. -The following code example illustrates how this can be done. +* **Bind item source for Kanban:** -{% tabs %} +To populate the Kanban card items, utilize the [`ItemsSource`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ItemsSource) property of [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control. Additionally, ensure that the following property of `SfKanban` are mapped from corresponding properties in the `ItemsSource` while initializing the kanban control. -{% highlight xaml %} +The [ColumnMappingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath) specifies the name of the property within the data object that is used to generate columns in the Kanban control when [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) is set to `true`. - +* **Defining columns in the Kanban Board:** - +The [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) in the Kanban board are mapped based on the values of a specified property (e.g., "Status") from your custom data model. The [`ColumnMappingPath`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath) specifies the name of the property within the data object that is used to generate columns in the Kanban control when [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) is set to `true`. - +Alternatively, you can manually define columns by setting [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) to `false` and adding instances of [`KanbanColumn`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.KanbanColumn.html) to the [`Columns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_Columns) collection of the [`SfKanban`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html) control. Based on the property specified in [ColumnMappingPath](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_ColumnMappingPath), the Kanban control will generate the columns and render the corresponding cards accordingly. - +Let’s look at the practical code example: +{% tabs %} +{% highlight XAML hl_lines="2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27" %} + + + + + + + + + + + + + + + + + + - {% endhighlight %} +{% highlight C# hl_lines="1, 2" %} -{% highlight c# %} - -SfKanban kanban = new SfKanban() - -{ - - AutoGenerateColumns = false, - - ItemsSource = new TaskDetails().Tasks - -}; - -kanban.Columns.Add(new KanbanColumn() - -{ - - Categories = "Open", - - Title = "To Do", +this.kanban.ItemsSource = new ViewModel().Tasks; +this.kanban.ColumnMappingPath = "Status"; - MinimumLimit = 1, - - MaximumLimit = 2, - -}); - -kanban.Columns.Add(new KanbanColumn() +{% endhighlight %} +{% highlight C# tabtitle="TaskDetails.cs" %} +public class TaskDetails { + public string Title { get; set; } + public string Description { get; set; } + public object Status { get; set; } +} - Categories = "In Progress", - - Title = "Progress", - - MinimumLimit = 1, - - MaximumLimit = 2 - -}); +{% endhighlight %} -kanban.Columns.Add(new KanbanColumn() +{% highlight C# tabtitle="ViewModel.cs" %} +public class ViewModel { + public ObservableCollection Tasks { get; set; } + public ViewModel() + { + Tasks = new ObservableCollection(); + Tasks.Add(new TaskDetails() + { + Title = "Universal App", + Description = "Incorporate feedback into functional specifications", + Status = "Open", + }); - Categories = "Review,Done", - - Title = "Done", - - MinimumLimit = 1, - - MaximumLimit = 2 + Tasks.Add(new TaskDetails() + { + Title = "Universal App", + Description = "Design functional specifications", + Status = "In Progress", + }); -}); + Tasks.Add(new TaskDetails() + { + Title = "Universal App", + Description = "Review preliminary software specifications", + Status = "Done", + }); -grid.Children.Add(kanban); + Tasks.Add(new TaskDetails() + { + Title = "Universal App", + Description = "Draft preliminary software specifications", + Status = "Review", + }); + } +} {% endhighlight %} - {% endtabs %} -![Defining columns for SfKanban](sfkanban_images/wpf-kanban-board-column.png) - - You can also set [`AutoGenerateColumns`](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Kanban.SfKanban.html#Syncfusion_UI_Xaml_Kanban_SfKanban_AutoGenerateColumns) property to true in which you don’t need to define the columns as mentioned in the above example. This will create columns depending on the ColumnMappingPath property for all the distinct values in ItemsSource. -You can find the complete getting started sample from this [`link`](https://github.com/SyncfusionExamples/Getting-started-in-SfKanban-WPF). - N> When the columns are auto-generated, you can handle the ColumnsGenerated event to customize the columns. ## Theme diff --git a/wpf/Release-notes/v31.1.17.md b/wpf/Release-notes/v31.1.17.md index c3522bb109..cae14e6161 100644 --- a/wpf/Release-notes/v31.1.17.md +++ b/wpf/Release-notes/v31.1.17.md @@ -1,13 +1,13 @@ --- title: Essential Studio® for WPF Release Notes - v31.1.17 -description: Essential Studio® for WPF 2025 Volume 3 Main Release Release Notes - v31.1.17 +description: Essential Studio® for WPF 2025 Volume 3 Main Release - Release Notes - v31.1.17 platform: WPF documentation: ug --- -# Essential Studio® for WPF Release Notes - v31.1.17 +# Essential Studio® for WPF - v31.1.17 Release Notes -{% include release-info.html date="September 01, 2025" version="v31.1.17" passed="177494" failed="0" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="177494" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} diff --git a/wpf/Ribbon/DealingWithRibbon.md b/wpf/Ribbon/DealingWithRibbon.md index 8e34afe0a7..705e2a8151 100644 --- a/wpf/Ribbon/DealingWithRibbon.md +++ b/wpf/Ribbon/DealingWithRibbon.md @@ -2908,7 +2908,7 @@ End Sub ## Customizing the Header in RibbonTab -The Ribbon control allows customization of the tab headers using The ContentTemplate property. This enables users to enhance the visual appearance of tabs by adding icons and styled caption text. +The Ribbon control allows customization of the tab headers using The CaptionTemplate property. This enables users to enhance the visual appearance of tabs by adding icons and styled caption text. Below is an example where the Home, Send / Receive, and Folder tabs are customized with an icon and caption text: @@ -2918,7 +2918,7 @@ Below is an example where the Home, Send / Receive, and Folder tabs are customiz - + - + @@ -2936,7 +2936,7 @@ Below is an example where the Home, Send / Receive, and Folder tabs are customiz - + - + - + - + diff --git a/wpf/Visual-Studio-Integration/Create-Project.md b/wpf/Visual-Studio-Integration/Create-Project.md deleted file mode 100644 index 73cd35a692..0000000000 --- a/wpf/Visual-Studio-Integration/Create-Project.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -layout: post -title: Create Project | Wpf | Syncfusion -description: Syncfusion provides the Visual Studio Project Templates for the Syncfusion WPF platform to create Syncfusion WPF Application by addiing the required assemblies -platform: wpf -control: Syncfusion Extensions -documentation: ug ---- - - -# Create WPF application - -The Visual Studio Project Templates for the Syncfusion® WPF platform allow you to quickly develop a Syncfusion WPF application by just adding the appropriate Syncfusion® assemblies and XAML. - -I> The Syncfusion WPF templates are available from v16.1.0.24. - -> WPF Project Template works seamlessly with Visual Studio 2015 or lower. For the Visual Studio 2017 or later versions, it is recommended to use a [WPF Template Studio](https://help.syncfusion.com/wpf/visual-studio-integration/template-studio). - -Create the Syncfusion® WPF project using the Visual Studio Project Template by following the steps below: - -> Check whether the **WPF Extensions - Syncfusion** are installed or not in Visual Studio 2015 or lower by going to **Tools -> Extensions and Updates -> Installed**. If this extension is not installed, please install the extension by following the steps from the [download and installation](https://help.syncfusion.com/wpf/visual-studio-integration/download-and-installation) help topic. - -1. To create a Syncfusion® WPF project, follow either one of the options below: - - **Option 1:** - Click **Syncfusion** Menu and choose **Essential Studio® for WPF > Create New Syncfusion Project…** in **Visual Studio**. - - ![Choose Syncfusion WPF Application from Visual Studio new project dialog via Syncfusion menu](Project-Template-images/Syncfusion-Menu.png) - - N> In Visual Studio 2015 or lower, you can see the Syncfusion menu directly in the Visual Studio menu. - - **Option 2:** - Choose **File -> New -> Project**. Opens a new dialog to create a new project. By filtering the project type with Syncfusion or using the Syncfusion keyword in the search option, you can get the templates offered by Syncfusion for WPF. - - ![Choose Syncfusion WPF Application from Visual Studio new project dialog](Project-Template-images/Syncfusion-Project-Template-Gallery2019-1.png) - - In Visual Studio 2015 or lower, Select **File > New > Project** and navigate to **Syncfusion > Windows > Syncfusion WPF Application** in Visual Studio. - - ![Choose Syncfusion WPF Application from Visual Studio new project dialog](Project-Template-images/Syncfusion-Project-Template-Gallery-1.png) - -2. Name the **Project**, select the destination location when required, and specify the Framework of the project, then click **OK**. - - N> For Syncfusion® WPF project templates, the minimum target Framework is 4.0. - -3. Using the following Project Configuration Wizard, choose the options to configure the Syncfusion WPF Application. - - ![Syncfusion WPF project configuration wizard](Project-Template-images/Syncfusion-Project-Template-Gallery2019-2.png) - - In Visual Studio 2015 or lower, Syncfusion WPF Application project configuration wizard. - - ![Syncfusion WPF project configuration wizard](Project-Template-images/Syncfusion-Project-Template-Gallery-2.png) - - **Project Configurations** - - **Language:** Select the language, either CSharp or VB. - - N> VB language is available only when you choose .NET Framework from option in Visual Studio. - - **Choose Theme:** Select the required theme. - - **Reference From:** Choose the assembly location such as NuGet, GAC Location, or Essential Studio® installed location, from where the assembly is added to the project. - - N> The **Installed Location** and **GAC** options will be available only after the Syncfusion® Essential WPF setup has been installed. You can use the NuGet option instead of installing the Syncfusion® Essential WPF setup. - - **Installed ES Build Version:** To add the appropriate version assemblies to the project, choose the build version. - - N> Installed ES build version option will be available only if you install the Syncfusion® Essential WPF setup and select Installed Location or GAC as the assembly location. - - **Size Mode:** Select the Size Mode either Default or Touch. - - **Select Window:** Choose the window as required for application. - - N> Project create option will be enabled only if you have selected the window - -4. After choosing the above project configuration options in the Project Configuration Wizard, click the Create button, and then the Syncfusion® WPF project is created with the necessary XAML files and required Syncfusion® WPF assemblies/NuGet packages. - - ![Syncfusion WPF project created with required Syncfusion WPF assemblies](Project-Template-images/Syncfusion-Project-Template-Gallery-7.png) - - ![Syncfusion WPF project created with required Syncfusion XAML files](Project-Template-images/Syncfusion-Project-Template-Gallery-8.png) - - ![Syncfusion WPF project created with readme](Project-Template-images/Syncfusion-Project-Template-Gallery-10.png) - -5. Then, Syncfusion® licensing registration required message box will be shown if you installed the trial setup or NuGet packages since Syncfusion® introduced the licensing system from 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the [help topic](https://help.syncfusion.com/common/essential-studio/licensing/overview#how-to-generate-syncfusion-license-key), which is shown in the licensing message box to generate and register the Syncfusion® license key to your project. Refer to this [blog](https://www.syncfusion.com/blogs/post/whats-new-in-2018-volume-2.aspx) post for understanding the licensing changes introduced in Essential Studio®. - - ![Syncfusion license registration required information dialog in Syncfusion WPF project](Project-Template-images/Syncfusion-Project-Template-Gallery-9.png) \ No newline at end of file diff --git a/wpf/Visual-Studio-Integration/Template-Studio-Images/WPFTemplate-6.png b/wpf/Visual-Studio-Integration/Template-Studio-Images/WPFTemplate-6.png index 15ebe129b1..faf51dc4a4 100644 Binary files a/wpf/Visual-Studio-Integration/Template-Studio-Images/WPFTemplate-6.png and b/wpf/Visual-Studio-Integration/Template-Studio-Images/WPFTemplate-6.png differ