In this article we will create a Code Completion 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. The term was originally popularized as "picklist" and some implementations still refer to it as such.
So how hard it is to build a code completion in C#?
I searched on the internet, I found no 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 difficult to develop this, it needs so much professionalism, but I was wrong, it depends on your idea.
How is it so easy?
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 ListBox.
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 AutoCompleteBrackets 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
- Create the ListBox object.(I am using CodeCompleteBox object name).
- Read X-Y coordinates from RichTextBox.
- 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).
- Declare array list of keywords.(I am using keywordslist).
- Add following events to RichTextBox
(i) Key Press:
- Identify pressed key is alphabet or not.
- Remove all items from CodeCompleteBox.
- Read each item from keywordslist.
- If each item from keywordslist is starts with pressed key character then add that item into the CodeCompleteBox.
- Read each item from keywordslist.
- If each item from keywordslist is starts with pressed key then set that item to selected.
- Set Default cursor to CodeCompleteBox.
- Set Size to CodeCompleteBox.
- Set Location to CodeCompleteBox by reading (x,y) coordinates from Step-2.
- Add CodeCompleteBox to RichTextBox.
- Set isCodeCompleteBoxAdded to true.
(ii) Text Changed:
If RichTextBox Text is null then remove CodeCompleteBox from RichTextBox.Before removing first check if isCodeCompleteBoxAdded is true.
(iii) Key Down:
- Check if Space,Enter,Escape & Back key is down then go to next;
- If isCodeCompleteBoxAdded is true then remove CodeCompleteBox from RichTextBox.
(iv) Mouse Click:
If isCodeCompleteBoxAdded is true then remove CodeCompleteBox from RichTextBox.
(v) VScroll:
If isCodeCompleteBoxAdded is true then remove CodeCompleteBox from RichTextBox.
6: Add the following events to CodeCompleteBox,
(i) Key Down:
- Check if isCodeCompleteBoxAdded is true then go to next.
- If Enter or Space key is down then go to next.
- Read Selected item from CodeCompleteBox and insert that item in RichTextBox at SelectionStart position.
- Remove CodeCompleteBox from RichTextBox.
(ii) Key Press:
It is used to insert a pressed character into RichTextBox and also select item in CodeCompleteBox.
(iii) Mouse Click: Same as above Key Down event Step-3.
7: Stop
Tool Tip:
Here, to display a tooltip or to display information about selected item of CodeCompleteBox 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.
Coding:
I am creating a class CCRichTextBox with super class RichTextBox.
Firstly, 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 adding of tooltip to CodeCompleteBox, so if you get errors then remove all components of tooltips.
Okay, let's perform all steps according to above algorithm.
1. Create ListBox Object,
- public ListBox CodeCompleteBox = new ListBox();
2. Read X-Y coordinates from RichTextBox.
This function returns the (x,y) coordinates by adding or reducing the size of font of RichTextBox. See the 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;
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.
- public String[] keywordslist = {
- "bool",
- "break",
- "case",
- "catch",
- "char",
- "class",
- "const",
- "continue",
- "default",
- "do",
- "double",
- "else",
- "enum",
- "false",
- "float",
- "for",
- "goto",
- "if",
- "int"
- };
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 from CodeCompleteBox then CodeCompleteBox will not appear 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 if 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 have 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 defined above.
VScroll Event: Code is same as above for Mouse Click.
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.
- private void CodeCompleteBox_KeyDown(object sender, KeyEventArgs e)
- {
- switch (e.KeyCode)
- {
- case Keys.Enter:
- if (isCodeCompleteBoxAdded)
- {
- if (EnteredKey != "")
- {
- if (EnteredKey.Length == 1)
- {
- int sel = this.SelectionStart;
- String text = CodeCompleteBox.SelectedItem.ToString();
- text = text.Remove(0, 1);
- 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());
-
- }
- else if (EnteredKey.Length == 2)
- {
- int sel = this.SelectionStart;
- String text = CodeCompleteBox.SelectedItem.ToString();
- text = text.Remove(0, 2);
- 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());
-
- }
- else if (EnteredKey.Length == 3)
- {
- int sel = this.SelectionStart;
- String text = CodeCompleteBox.SelectedItem.ToString();
- text = text.Remove(0, 3);
- 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());
-
- }
- else
- {
- int sel = this.SelectionStart;
- String text = CodeCompleteBox.SelectedItem.ToString();
- if (text.Contains(EnteredKey))
- {
- text = text.Replace(EnteredKey, "");
- }
- 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());
-
- }
- }
- }
- break;
-
-
- case Keys.Left:
- if (isCodeCompleteBoxAdded)
- {
- this.Controls.Remove(CodeCompleteBox);
- EnteredKey = "";
- }
- break;
-
-
- case Keys.Right:
- if (isCodeCompleteBoxAdded)
- {
- this.Controls.Remove(CodeCompleteBox);
- EnteredKey = "";
-
- }
- break;
- }
- }
Key Press Event:
This event is used to select the item that starts with EnteredKey after concatenation 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 are performed. Download the source code to create code completion using XML file. In Properties, you can change the Backgroud & Foreground color of Code Completion window.