Introduction
In this article we will create an auto completion/code completion popup window in C#. Intelligent Code Completion is a Context-Aware Code Completion feature in some programming environments that speeds up the process of coding applications by reducing typos and other common mistakes. Attempts to do this are usually done through Auto Completion Popups when Typing, Querying parameters of functions, Query hints related to syntax errors, etc. Intelligent Code Completion and Related Tools serve as documentation and disambiguation for variable names, functions and methods using reflection. Intelligent Code Completion appears in many program environments, an example implementation being Visual Studio's Intellisense.
So How hard it is to build a Code Completion in C#.
I searched on Internet,i found nothing any code instead of developed Editors.
I knew that it is the list that can be shown while typing the code but How to display that list onto the RichTextBox.
Before working on this code i thought it is so much difficult to develope this,it needs so much professionalism,but i was wrong,it depends on your idea.
It is so much easy,how ?
Just create a Listbox Object and Add it to RichTextBox and get Selected Item from List Box and Insert it to the RichTextBox and then Remove that List Box.
You just need to Add or Remove items from List Box.
You can customize your Code Completion Window(listbox) on your own(as shown in above image 3).
We will also complete the Brackets Automatically further(see ProcessAutoCompleteBrackets() function)
In this article we will create simple Code Completion in C#.Download the Code to see the Code Completion using XML.
It is nothing but the Adding or Removing Listbox.
See next Algorithm for better understanding.
For understanding,read all comments carefully in the Code(ccrichtextbox).
Algorithm
1] : Create the ListBox object.(I am using CodeCompleteBox object name)
2] : Read X-Y coordinates from RichTextBox
3] : Declare the Boolean variable to identify whether the CodeCompleteBox is added or not.(I am using isCodeCompleteBoxAdded variable) & String variable to identify the complete string(i am using EnteredKey variable)
4] : Declare array list of keywords.(I am using keywordslist)
5] : Add following events to RichTextBox
Key Press :
1 : Identify pressed key is alphabet or not.
2 : Remove all items from CodeCompleteBox.
3 : Read each item from keywordslist.
4 : If each item from keywordslist is starts with pressed key character then add that item into the CodeCompleteBox.
5 : Read each item from keywordslist.
6 : If each item from keywordslist is starts with pressed key then set that item to selected.
7 : Set Default cursor to CodeCompleteBox.
8 : Set Size to CodeCompleteBox.
9 : Set Location to CodeCompleteBox by reading (x,y) coordinates from Step-2.
10 : Add CodeCompleteBox to RichTextBox.
11 : Set isCodeCompleteBoxAdded to true.
Text Changed :
If RichTextBox Text is null then Remove CodeCompleteBox from RichTextBox.Before removing first check if isCodeCompleteBoxAdded is true.
Key Down :
1 : Check if Space,Enter,Escape & Back key is down then go to next;
2 : If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from RichTextBox.
Mouse Click :
If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from RichTextBox.
VScroll :
If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from RichTextBox.
6] : Add following events to CodeCompleteBox
Key Down :
1 : Check if isCodeCompleteBoxAdded is true then go to next.
2 : If Enter or Space key is down then go to next.
3 : Read Selected item from CodeCompleteBox and insert that item in RichTextBox at SelectionStart position.
4 : Remove CodeCompleteBox from RichTextBox.
Key Press :
It is used to insert a pressed character into RichTextBox and also select item in CodeCompleteBox.
Mouse Click :
Same as above Key Down event Step-3.
<stron
Tool Tip
Here, to Display a tooltip or to display information about selected item of CodeCompletebBox we will use Label to display information and will add this Label to a Panel and this Panel will be added to RichTextBox at specific Location or Next Location to CodeCompleteBox.
In This Article we will not create a Tooltip but Download the Source it contain the whole code with tooltips.
All operations are same as CodeCompleteBox only adding Key Up Event to CodeCompleteBox. You can set tooltip to a selected item in CodeCompleteBox,just declare your item and its description in ProcessToolTips() function in CCRichTextBox code.
Using the code
I am creating a class CCRichTextBox with super class RichTextBox.
First lets see some important functions.
I used a function ProcessCodeCompletionAction(String key) to call whenever the key press event is generated in the program. I am reading the getWidth() & getHeight() function to set Width & Height to CodeCompleteBox but you can set them as default. Concat the pressed character with EnteredKey,perform all steps defined in Key Press in above algorithm. Here we will not see the adding of tooltip to CodeCompleteBox,so if you get errors then remove all components of tooltips.
public void ProcessCodeCompletionAction(String key)
{
EnteredKey = "";
EnteredKey = EnteredKey + key;
if (Char.IsLetter(key[0]))
{
CodeCompleteBox.Items.Clear();
foreach (String item in keywordslist)
{
if (item.StartsWith(EnteredKey))
{
CodeCompleteBox.Items.Add(item);
}
}
foreach (String item in keywordslist)
{
if (item.StartsWith(EnteredKey))
{
CodeCompleteBox.SelectedItem = item;
CodeCompleteBox.Cursor = Cursors.Default;
CodeCompleteBox.Size = new System.Drawing.Size(this.getWidth(), this.getHeight() + (int)this.Font.Size);
CodeCompleteBox.Location = this.getXYPoints();
this.Controls.Add(CodeCompleteBox);
CodeCompleteBox.Focus();
isCodeCompleteBoxAdded = true;
ToolTipControl.Location = new Point(CodeCompleteBox.Location.X + CodeCompleteBox.Width, CodeCompleteBox.Location.Y);
this.ProcessToolTips(CodeCompleteBox.SelectedItem.ToString());
this.Controls.Add(ToolTipControl);
isToolTipControlAdded = true;
break;
}
else
{
isCodeCompleteBoxAdded = false;
}
}
}
}
We will also complete the brackets automatically.
I am using the function ProcessAutoCompleteBrackets(KeyPressEventArgs e).
Whenever the (,{,",',<,[ key is pressed then inserting opposite character at the next position of SelectionStart from RichTextBox.
public void ProcessAutoCompleteBrackets(KeyPressEventArgs e)
{
String s = e.KeyChar.ToString();
int sel = this.SelectionStart;
switch (s)
{
case "(": this.Text = this.Text.Insert(sel, "()");
e.Handled = true;
this.SelectionStart = sel + 1;
break;
case "{":
String t = "{\n \n}";
this.Text = this.Text.Insert(sel, t);
e.Handled = true;
this.SelectionStart = sel + t.Length - 6;
break;
case "[": this.Text = this.Text.Insert(sel, "[]");
e.Handled = true;
this.SelectionStart = sel + 1;
break;
case "<": this.Text = this.Text.Insert(sel, "<>");
e.Handled = true;
this.SelectionStart = sel + 1;
break;
case "\"": this.Text = this.Text.Insert(sel, "\"\"");
e.Handled = true;
this.SelectionStart = sel + 1;
break;
case "'": this.Text = this.Text.Insert(sel, "''");
e.Handled = true;
this.SelectionStart = sel + 1;
break;
}
}
Okay Let's perform all steps according to above algorithm.
1) Create List Box Object
public ListBox CodeCompleteBox = new ListBox();
2) Read X-Y coordinates from RichTextBox.
This function returns ths (x,y) coordinates by adding or reducing the size of font of RichTextBox.
See following image that shows the x-y position up side down CodeCompleteBox.
public Point getXYPoints()
{
Point pt = this.GetPositionFromCharIndex(this.SelectionStart);
pt.Y = pt.Y + (int)this.Font.Size + 10;
if (pt.Y > this.Height - CodeCompleteBox.Height)
{
pt.Y = pt.Y - CodeCompleteBox.Height - (int)this.Font.Size - 10;
}
return pt;
}
3) Declare the Boolean variable to identify whether the CodeCompleteBox is added or not
public static Boolean isCodeCompleteBoxAdded = false; <span style="color: rgb(17, 17, 17); font-family: 'Segoe UI', Arial, sans-serif; font-size: 14px;"> </span>
String variable to identify the complete string
public static String EnteredKey = "";
4) Declare array list of keywords.Here you can predefine the list in the program or can read the keywords using XML file.Download the source code,i have used both Array list & <List> of string.Here lets declare the array of list.Here i declared few items in it.
public String[] keywordslist = {
"bool",
"break",
"case",
"catch",
"char",
"class",
"const",
"continue",
"default",
"do",
"double",
"else",
"enum",
"false",
"float",
"for",
"goto",
"if"
};
5) Add Key Press,Text Changed,Key Down,Mouse Click, VScroll Events to CCRichTextBox.
Key Press Event :
Here we will directly call the ProcessCodeCompletionAction() function.
But here we can perform some more actions like creating classes or datatypes.
I have declared two extra variables Boolean isClassCreated = false; & Boolean isDataTypeDeclared = false; for identify that the inserted item from CodeCompleteBox is class/datatype or not.For that you need to declare the list of classes & datatypes.e.g : Once you select the item Form CodeCompleteBox then CodeCompleteBox will not apper until you will press =/; because to create object of Form you can define it in two ways :
Form frm; or Form frm=new Form();
Download the source code,once you drag & drop the CCRichTextBox to your form,in Properties you can enter the list of keywords/classes/datatypes.
protected override void OnKeyPress(KeyPressEventArgs e)
{
base.OnKeyPress(e);
ProcessAutoCompleteBrackets(e);
String key = e.KeyChar.ToString();
if (isClassCreated && (key == "=" || key == ";"))
{
ProcessCodeCompletionAction(key);
isClassCreated = false;
}
else if (isClassCreated && key != "=")
{ }
else if (isDataTypeDeclared && (key == ";" || key == "{"||key=="}" || key == "(" || key == ")"))
{
ProcessCodeCompletionAction(key);
isDataTypeDeclared = false;
}
else if (isDataTypeDeclared && key != ";")
{ }
else
{
ProcessCodeCompletionAction(key);
}
}
Text Changed Event : Remove CodeCompleteBox from CCRichTextBox is it's text is null.
protected override void OnTextChanged(EventArgs e)
{
base.OnTextChanged(e);
if (this.Text == "")
{
if (isCodeCompleteBoxAdded)
{
this.Controls.Remove(CodeCompleteBox);
EnteredKey = "";
}
}
}
Key Down Event : Check if Space,Enter,Escape & Back key is down then remove CodeCompleteBox from CCRichTextBox.Here i shown only about Space key add other keys yourself.
protected override void OnKeyDown(KeyEventArgs e)
{
base.OnKeyDown(e);
switch(e.KeyCode)
{
case Keys.Space:
if (isCodeCompleteBoxAdded)
{
this.Controls.Remove(CodeCompleteBox);
EnteredKey = "";
}
break
}
}
Mouse Click Event : If isCodeCompleteBoxAdded is true then Remove CodeCompleteBox from CCRichTextBox,same as above code for key down.
VScroll Event : Code is same as above for Mouse Click.
Here's a function that inserts selected text from popup window,
private void CodeCompleteBox_InsertSelectedText(int length)
{
int sel = this.SelectionStart;
String text = CodeCompleteBox.SelectedItem.ToString();
text = text.Remove(0, length);
this.Text = this.Text.Insert(sel, text + " ");
this.SelectionStart = sel + (text + " ").Length;
this.Controls.Remove(CodeCompleteBox);
this.ProcessDeclaredClasses(CodeCompleteBox.SelectedItem.ToString());
this.ProcessDeclaredDataTypes(CodeCompleteBox.SelectedItem.ToString());
if (isToolTipControlAdded)
{
this.Controls.Remove(ToolTipControl);
}
}
6) Add Key Down,Key Press & Mouse Click Events to CodeCompleteBox.
public CCRichTextBox()
{
CodeCompleteBox.KeyDown += new KeyEventHandler(CodeCompleteBox_KeyDown);
CodeCompleteBox.KeyUp += new KeyEventHandler(CodeCompleteBox_KeyUp);
CodeCompleteBox.KeyPress += new KeyPressEventHandler(CodeCompleteBox_KeyPress);
CodeCompleteBox.MouseClick += new MouseEventHandler(CodeCompleteBox_MouseClick);
}
Key Down : First identify that the down key is Enter/Space or not then identify that the CodeCompleteBox is added to CCRichTextBox or not then identify that the selected item from CodeCompleteBox starts with EnteredKey or not then read selected item from CodeCompleteBox.Read the length of EnteredKey,as per the length replace the first characters from selected item from CodeCompleteBox.Now insert that selected item into CCRichTextBox at SelectionStart position and then remove CodeCompleteBox from CCRichTextBox.
If down key is Space then insert a single space next to the item.
If down key is Left/Right then remove CodeCompleteBox from CCRichTextBox.
Here's the code for key Enter and Space
private void CodeCompleteBox_KeyDown(object sender, KeyEventArgs e)
{
switch (e.KeyCode)
{
case Keys.Space:
if (isCodeCompleteBoxAdded)
{
if (CodeCompleteBox.SelectedItem.ToString().StartsWith(EnteredKey))
{
if (EnteredKey != "")
{
if (EnteredKey.Length == 1)
{
this.CodeCompleteBox_InsertSelectedText(1);
}
else if (EnteredKey.Length == 2)
{
this.CodeCompleteBox_InsertSelectedText(2);
}
else if (EnteredKey.Length == 3)
{
this.CodeCompleteBox_InsertSelectedText(3);
}
else
{
this.CodeCompleteBox_InsertSelectedText(EnteredKey.Length);
}
}
}
else
{
int sel = this.SelectionStart;
this.Text = this.Text.Insert(sel, " ");
this.SelectionStart = sel + " ".Length;
}
}
break;
case Keys.Enter:
if (isCodeCompleteBoxAdded)
{
if (EnteredKey != "")
{
if (EnteredKey.Length == 1)
{
this.CodeCompleteBox_InsertSelectedText(1);
}
else if (EnteredKey.Length == 2)
{
this.CodeCompleteBox_InsertSelectedText(2);
}
else if (EnteredKey.Length == 3)
{
this.CodeCompleteBox_InsertSelectedText(3);
}
else
{
this.CodeCompleteBox_InsertSelectedText(EnteredKey.Length);
}
}
}
break;
case Keys.Left:
if (isCodeCompleteBoxAdded)
{
this.Controls.Remove(CodeCompleteBox);
EnteredKey = "";
if (isToolTipControlAdded)
{
this.Controls.Remove(ToolTipControl);
}
}
break;
case Keys.Right:
if (isCodeCompleteBoxAdded)
{
this.Controls.Remove(CodeCompleteBox);
EnteredKey = "";
if (isToolTipControlAdded)
{
this.Controls.Remove(ToolTipControl);
}
}
break;
}
}
Key Up Event : This event removes a code complete box and also insert code snippets according to keys.
private void CodeCompleteBox_KeyUp(object sender, KeyEventArgs e)
{
switch(e.KeyCode)
{
case Keys.Up :
case Keys.Down:
if (isCodeCompleteBoxAdded)
{
ToolTipControl.Visible = true;
this.ProcessToolTips(CodeCompleteBox.SelectedItem.ToString());
}
break;
case Keys.Tab:
if (isCodeCompleteBoxAdded)
{
this.InsertingCodeSnippetCodes();
this.Controls.Remove(CodeCompleteBox);
EnteredKey = "";
if (isToolTipControlAdded)
{
this.Controls.Remove(ToolTipControl);
}
}
break;
}
}
Key Press Event : This event is used for to select the item that starts with EnteredKey after concatination to it,then read all items from CodeCompleteBox and that item which starts with EnteredKey then set it to selected and also identify that the special character is pressed or not if it is pressed then remove CodeCompleteBox from CCRichTextBox.
private void CodeCompleteBox_KeyPress(object sender, KeyPressEventArgs e)
{
String str = e.KeyChar.ToString();
if (Convert.ToInt32(e.KeyChar) != 13 && Convert.ToInt32(e.KeyChar) != 32 && Convert.ToInt32(e.KeyChar) != 27 && Convert.ToInt32(e.KeyChar) != 8)
{
if (isCodeCompleteBoxAdded)
{
int sel = this.SelectionStart;
this.Text = this.Text.Insert(sel, str);
this.SelectionStart = sel + 1;
e.Handled = true;
EnteredKey = EnteredKey + str;
foreach (String item in CodeCompleteBox.Items)
{
if (item.StartsWith(EnteredKey))
{
CodeCompleteBox.SelectedItem = item;
break;
}
}
}
}
else if (Convert.ToInt32(e.KeyChar) == 8)
{
this.Focus();
}
else if (Convert.ToInt32(e.KeyChar) != 8)
{
if (isCodeCompleteBoxAdded)
{
this.Controls.Remove(CodeCompleteBox);
EnteredKey = "";
}
}
switch (str)
{
case "~":
case "`":
case "!":
case "@":
case "#":
case "$":
case "%":
case "^":
case "&":
case "*":
case "-":
case "_":
case "+":
case "=":
case "(":
case ")":
case "[":
case "]":
case "{":
case "}":
case ":":
case ";":
case "\"":
case "'":
case "|":
case "\\":
case "<":
case ">":
case ",":
case ".":
case "/":
case "?":
if (isCodeCompleteBoxAdded)
{
this.Controls.Remove(CodeCompleteBox);
EnteredKey = "";
}
break;
}
}
Mouse Click Event : This event code is same as Enter key down event in CodeCompleteBox.
That's it all the steps of algorithm is performed.Download the source code to create Code Completion using XML file and also custom code completion popup. In Properties,you can change the Back & Fore color of Code Completion window.
</stron