You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Getting Started with WPF AI AssistView control | Syncfusion
4
+
description: Learn about getting started with the Syncfusion WPF AI AssistView (SfAIAssistView) control with its basic features.
5
+
platform: wpf
6
+
control: AI AssistView
7
+
documentation: ug
8
+
---
9
+
10
+
# Getting Started with WPF AI AssistView
11
+
12
+
This section explains the steps required to add the Wpf [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control with its basic features.
1. Create a [Wpf desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-9.0).
21
+
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
22
+
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
23
+
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
1. Create a [Wpf desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-9.0).
49
+
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
50
+
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
51
+
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
52
+
53
+
{% tabs %}
54
+
{% highlight C# %}
55
+
56
+
using Syncfusion.UI.Xaml.Chat;
57
+
58
+
namespace GettingStarted
59
+
{
60
+
/// <summary>
61
+
/// Interaction logic for MainWindow.xaml
62
+
/// </summary>
63
+
public partial class MainWindow : Window
64
+
{
65
+
public MainWindow()
66
+
{
67
+
this.InitializeComponent();
68
+
// Creating an instance of the AIAssistView control
69
+
SfAIAssistView assistView = new SfAIAssistView();
70
+
grid.Children.Add(assistView);
71
+
}
72
+
}
73
+
}
74
+
75
+
{% endhighlight %}
76
+
{% endtabs %}
77
+
78
+
79
+
## Creating ViewModel for AI AssistView
80
+
81
+
Create a simple chat collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.
82
+
83
+
{% tabs %}
84
+
{% highlight C# %}
85
+
86
+
public class ViewModel : INotifyPropertyChanged
87
+
{
88
+
private ObservableCollection<object> chats;
89
+
private Author currentUser;
90
+
public ViewModel()
91
+
{
92
+
this.Chats = new ObservableCollection<object>();
93
+
this.CurrentUser = new Author { Name="John"};
94
+
this.GenerateMessages();
95
+
}
96
+
97
+
private async void GenerateMessages()
98
+
{
99
+
this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WPF?" } );
100
+
await Task.Delay(1000);
101
+
this.Chats.Add( new TextMessage { Author = new Author { Name = "Bot" }, Text = "WPF is a user interface layer that contains modern controls and styles for building Windows apps." });
102
+
}
103
+
104
+
public ObservableCollection<object> Chats
105
+
{
106
+
get
107
+
{
108
+
return this.chats;
109
+
}
110
+
set
111
+
{
112
+
this.chats = value;
113
+
RaisePropertyChanged("Messages");
114
+
}
115
+
}
116
+
117
+
public Author CurrentUser
118
+
{
119
+
get
120
+
{
121
+
return this.currentUser;
122
+
}
123
+
set
124
+
{
125
+
this.currentUser = value;
126
+
RaisePropertyChanged("CurrentUser");
127
+
}
128
+
}
129
+
130
+
131
+
public void RaisePropertyChanged(string propName)
132
+
{
133
+
if (PropertyChanged != null)
134
+
{
135
+
PropertyChanged(this, new PropertyChangedEventArgs(propName));
136
+
}
137
+
}
138
+
139
+
140
+
public event PropertyChangedEventHandler PropertyChanged;
141
+
}
142
+
143
+
{% endhighlight %}
144
+
{% endtabs %}
145
+
146
+
## Bind Messages
147
+
148
+
Set the ViewModel as the DataContext for the AI AssistView or the parent window. This allows data binding between the UI and the ViewModel properties.
149
+
To populate AI AssistView, bind the chats in ViewModel to Messages property of AI AssistView.
Copy file name to clipboardExpand all lines: wpf/AI-AssistView/Getting-started.md
+72-33Lines changed: 72 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,24 +1,26 @@
1
1
---
2
2
layout: post
3
3
title: Getting Started with WPF AI AssistView control | Syncfusion
4
-
description: Learn about getting started with the Syncfusion WinUI AI AssistView (SfAIAssistView) control with its basic features.
4
+
description: Learn about getting started with the Syncfusion WPF AI AssistView (SfAIAssistView) control with its basic features.
5
5
platform: wpf
6
6
control: AI AssistView
7
7
documentation: ug
8
8
---
9
9
10
10
# Getting Started with WPF AI AssistView
11
11
12
-
This section explains the steps required to add the WinUI[SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control with its basic features.
12
+
This section explains the steps required to add the Wpf[SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control with its basic features.
13
13
14
-
## Creating an application with WPF AI AssistView
14
+
## Structure of SfAIAssistView
15
15
16
-
1. Create a [Wpf desktop app for C# and .NET 6](https://docs.microsoft.com/en-us/windows/apps/winui/winui3/get-started-winui3-for-desktop).
1. Create a [Wpf desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-9.0).
17
21
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
18
22
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
19
-
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/winui/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
20
-
21
-
## Initialize AI AssistView
23
+
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
22
24
23
25
{% tabs %}
24
26
{% highlight xaml %}
@@ -38,42 +40,47 @@ This section explains the steps required to add the WinUI [SfAIAssistView](https
38
40
</Grid>
39
41
</Page>
40
42
41
-
{% endhighlight %}
43
+
{% endhighlight %}
44
+
{% endtabs %}
42
45
46
+
## Adding WPF SfAIAssistview via C#
47
+
48
+
1. Create a [Wpf desktop app for C# and .NET 6](https://learn.microsoft.com/en-us/dotnet/desktop/wpf/get-started/create-app-visual-studio?view=netdesktop-9.0).
49
+
2. Add reference to [Syncfusion.SfChat.Wpf](https://www.nuget.org/packages/Syncfusion.SfChat.Wpf) NuGet.
50
+
3. Import the control namespace `Syncfusion.UI.Xaml.Chat` in XAML or C# code.
51
+
4. Initialize the [SfAIAssistView](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Chat.SfAIAssistView.html) control.
52
+
53
+
{% tabs %}
43
54
{% highlight C# %}
44
55
45
-
// Creating an instance of the AI AssistView control.
46
-
SfAIAssistView aiAssistView = new SfAIAssistView();
56
+
using Syncfusion.UI.Xaml.Chat;
57
+
58
+
namespace GettingStarted
59
+
{
60
+
/// <summary>
61
+
/// Interaction logic for MainWindow.xaml
62
+
/// </summary>
63
+
public partial class MainWindow : Window
64
+
{
65
+
public MainWindow()
66
+
{
67
+
this.InitializeComponent();
68
+
// Creating an instance of the AIAssistView control
69
+
SfAIAssistView assistView = new SfAIAssistView();
70
+
grid.Children.Add(assistView);
71
+
}
72
+
}
73
+
}
47
74
48
75
{% endhighlight %}
49
76
{% endtabs %}
50
77
78
+
51
79
## Creating ViewModel for AI AssistView
52
80
53
81
Create a simple chat collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.
@@ -89,9 +96,9 @@ Create a simple chat collection as shown in the following code example in a new
89
96
90
97
private async void GenerateMessages()
91
98
{
92
-
this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WinUI?" } );
99
+
this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WPF?" } );
93
100
await Task.Delay(1000);
94
-
this.Chats.Add( new TextMessage { Author = new Author { Name = "Bot" }, Text = "WinUI is a user interface layer that contains modern controls and styles for building Windows apps." });
101
+
this.Chats.Add( new TextMessage { Author = new Author { Name = "Bot" }, Text = "WPF is a user interface layer that contains modern controls and styles for building Windows apps." });
95
102
}
96
103
97
104
public ObservableCollection<object> Chats
@@ -135,3 +142,35 @@ Create a simple chat collection as shown in the following code example in a new
135
142
136
143
{% endhighlight %}
137
144
{% endtabs %}
145
+
146
+
## Bind Messages
147
+
148
+
Set the ViewModel as the DataContext for the AI AssistView or the parent window. This allows data binding between the UI and the ViewModel properties.
149
+
To populate AI AssistView, bind the chats in ViewModel to Messages property of AI AssistView.
0 commit comments