How to configure intellisence popup of EditControl in MVVM design pattern?
EditControl has built-in support for Intellisence popup as like in Microsoft Visual Studio text editor and you can also configure the Intellisense Popup items in MVVM design Patten by using IntellisenseItemTemplate, IntellisenseCustomItemsSource and setting IntellisenseMode as Custom.
IntellisenseItemTemplate
This property helps to apply custom ItemTemplate to IntelliSense ListBox.
IntellisenseCustomItemsSource
This property helps to bind custom ItemsSource to IntelliSense ListBox.
IntelliSenseMode
This property needs to be set to custom to apply a custom ItemsSource to IntelliSense.
For an example,
Here we have configured intellisence popup with TCL language keywords.
The following code demonstrates the same.
ViewModel.cs
public class ViewModel
{
public ObservableCollection<Model> customItems { get; set; }
public ViewModel()
{
customItems = new ObservableCollection<Model>();
customItems.Add(new Model() { Text = "proc " });
customItems.Add(new Model() { Text = "set " });
customItems.Add(new Model() { Text = "return " });
customItems.Add(new Model() { Text = "base " });
customItems.Add(new Model() { Text = "cmd " });
customItems.Add(new Model() { Text = "Def " });
customItems.Add(new Model() { Text = "mean " });
}
}
Model.cs
public class Model: IIntellisenseItem
{
public Model()
{
}
/// <summary>
/// Gets or sets a value indicating Icon to be displayed in the IntelliSenseListBox
/// </summary>
public ImageSource Icon
{
get;
set;
}
/// <summary>
/// Gets or sets a value indicating Text to be displayed in the IntelliSenseListBox
/// </summary>
public string Text
{
get;
set;
}
/// <summary>
/// Gets or sets a collection of sub-items to be displayed
/// </summary>
public IEnumerable<IIntellisenseItem> NestedItems
{
get;
set;
}
}
MainWindow.xaml
<Window.DataContext>
<local:ViewModel/>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="CustomIntelliSenseItemTemplate" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Text}" Grid.Column="1" />
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<!--Adding EditControl to application and setting its IntelliSenseMode to Auto-->
<syncfusion:EditControl Name="EditControl1" IntellisenseCustomItemsSource="{Binding customItems}"
IntellisenseMode="Custom" IntellisenseItemTemplate="{StaticResource CustomIntelliSenseItemTemplate}"/>
</Grid>
Sample: SyntaxEditor_Sample
