Getting-Started.md

layout	post
title	Getting Started with WPF AI AssistView control | Syncfusion
description	Learn about getting started with the Syncfusion WPF AI AssistView (SfAIAssistView) control with its basic features.
platform	wpf
control	AI AssistView
documentation	ug

Getting Started with WPF AI AssistView

This section explains the steps required to add the Wpf SfAIAssistView control with its basic features.

Structure of SfAIAssistView

Adding WPF SfAIAssistview via xaml

1. Create a Wpf desktop app for C# and .NET 6.
2. Add reference to Syncfusion.SfChat.Wpf NuGet.
3. Import the control namespace Syncfusion.UI.Xaml.Chat in XAML or C# code.
4. Initialize the SfAIAssistView control.

{% tabs %} {% highlight xaml %}

<syncfusion:SfAIAssistView />

{% endhighlight %} {% endtabs %}

Adding WPF SfAIAssistview via C#

1. Create a Wpf desktop app for C# and .NET 6.
2. Add reference to Syncfusion.SfChat.Wpf NuGet.
3. Import the control namespace Syncfusion.UI.Xaml.Chat in XAML or C# code.
4. Initialize the SfAIAssistView control.

{% tabs %} {% highlight C# %}

using Syncfusion.UI.Xaml.Chat;

namespace GettingStarted { ///

/// Interaction logic for MainWindow.xaml ///

public partial class MainWindow : Window { public MainWindow() { this.InitializeComponent(); // Creating an instance of the AIAssistView control SfAIAssistView assistView = new SfAIAssistView(); grid.Children.Add(assistView); } } }

{% endhighlight %} {% endtabs %}

Creating ViewModel for AI AssistView

Create a simple chat collection as shown in the following code example in a new class file. Save it as ViewModel.cs file.

{% tabs %} {% highlight C# %}

public class ViewModel : INotifyPropertyChanged { private ObservableCollection chats; private Author currentUser; public ViewModel() { this.Chats = new ObservableCollection();
this.CurrentUser = new Author { Name="John"}; this.GenerateMessages(); }

 private async void GenerateMessages()
 {
     this.Chats.Add( new TextMessage { Author = CurrentUser, Text = "What is WPF?" } );        
     await Task.Delay(1000);
     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." });
 }

 public ObservableCollection<object> Chats
 {
     get
     {
         return this.chats;
     }
     set
     {
         this.chats = value;
         RaisePropertyChanged("Messages");
     }
 }

 public Author CurrentUser
 {
     get
     {
         return this.currentUser;
     }
     set
     {
         this.currentUser = value;
         RaisePropertyChanged("CurrentUser");
     }
 }


 public void RaisePropertyChanged(string propName)
 {
     if (PropertyChanged != null)
     {
         PropertyChanged(this, new PropertyChangedEventArgs(propName));
     }
 }


 public event PropertyChangedEventHandler PropertyChanged;

}

{% endhighlight %} {% endtabs %}

Bind Messages

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. To populate AI AssistView, bind the chats in ViewModel to Messages property of AI AssistView.

{% tabs %} {% highlight xaml %}

<Grid.DataContext> local:ViewModel/ </Grid.DataContext> <syncfusion:SfAIAssistView CurrentUser="{Binding CurrentUser}"
Messages="{Binding Chats}"/>

{% endhighlight %} {% endtabs %}