modds Drag and Drop Programming for C# Sample Stock Chart Auto Completion (Part 3)

• Download source code - 1.3 MB

Youtube video

Introduction

In modds Drag and Drop Programming for C# Sample Stock Chart (Part 2), I showed an example of how to create a Stock Chart Program. Kelly requested an example of how to do stock symbol auto completion. It turns out that auto completion needs multitasking. The latest version of modds release supports multitasking.

Here is the problem: the stock symbol usually is a big list. It needs a database or web server to store the list and query that may take some time. If the query process is at the UI thread, then when user enters the symbol, the UI will have a very slow response. We need to put query stock symbol list to a separate thread. In the next article, I will explain how multitask works in modds language.

Project Requirements

• modds C# Designer (from www.modds.org)
• Microsoft Visual Studio (for creating DLL from the attached file)
• Window 7 or above
• .NET Framework 4.5.2 or above

Add Auto Completion to Stock Chart Program

Add Auto Completion to Stock Chart XAML View

The Microsoft WPFToolkit has an AutoComplexBox control. As a user enters the symbol, we need to pass the TextChanged event to modds object and return list of completion symbols list.

Enter the following to MarketDataView.xaml header:

xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:cv="clr-namespace:modds.LIB.UI;assembly=modds.LIB.UI" 
xmlns:Controls=clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Input.Toolkit" 

The modds.LIB.UI has a class which will turn any events to command and it can pass all events parameters to the command handler.

Change symbol TextBox to the following:

<Controls:AutoCompleteBox Grid.Column="1"  
   Text="{Binding Symbol, Mode=TwoWay}"
   SelectedItem="{Binding Symptom, Mode=TwoWay}"
   ItemsSource="{Binding SymbolList}"
   Width="156">
      <i:Interaction.Triggers>
      <i:EventTrigger EventName="TextChanged">
         <cv:EventToCommand Command="{Binding SymbolChanged}" 
         PassEventArgsToCommand="True" />
      </i:EventTrigger>
   </i:Interaction.Triggers>
</Controls:AutoCompleteBox>

Add Auto Completion Reference DLL

1. On Solution Panel, right click References and select Add Item and add the following DLLs:
   • WPFTookit.dll
   • system.windows.controls.input.toolkit.dll
   • System.Windows.Interactivity.dll
2. On Solution Panel, right click References and select Add C# References and add the following DLL (we do not need following DLL in the program package.)
   • System.dll
   • System.Xaml.dll
   • PresentationCore.dll
   • PresentationFramework.dll
   • WindowsBase.dll

Create Get Stock Symbol Channel

The channel is for modds module to module communication. I will explain more in future articles.

1. On Solution Panel, right click Stock Chart->Channels and select Add Namespace and name it to “GetStockSymbol”.
2. Right click on GetStockSymbol and select “Add Broadcast” and “Add Listener”.

Create Get Symbol Server

1. On Solution Panel, right click Stock Chart->Schema and select New Schema and rename it to GetStockSymbolServer.xsml.
2. Double click GetStockSymbolServer.xsml to open.
3. On Solution Panel, drag Channel->GetStockSymbol->Listener to design broad and set it "No Wait"(The "No Wait" wil make data flow at different thread path).

Create a Function to Query Stock Symbol

In this example, we just read stock symbol from a text file for simplicity.

1. On Control Toolbox panel, drag in Script=>C# Script and enter the following code.

Using Panel

using System;
using System.Collections.Generic;

Code Panel

static public List<string> Projector(string startKey)
{
    List<string> list = new List<string>();
    
    string line;
    System.IO.StreamReader file =
       new System.IO.StreamReader(@"..\..\..\StockSymbols.txt");
    while((line = file.ReadLine()) != null)
    {
        if (line.StartsWith(startKey.ToUpper()))
            list.Add(line);
    }
    
    return list;
}

Drag out reply from Listener control and connect it as the following:

Add TextChanged Event Handler

1. Open MainWindow.xsml
2. On Control Toolbox panel, drag in Script=>C# Script and enter the following code.

Using Panel

using System;
using System.Collections.Generic;
using System.IO;
using System.Net;
using System.Windows.Controls;
using System.Windows;

Code Panel

static public string GetKeyInText(object parameters)
{
    RoutedEventArgs  args = parameters as RoutedEventArgs ;
    AutoCompleteBox     control = args.OriginalSource as AutoCompleteBox;
    
    return control.Text;
}

Add SymbolChanged Command Handler

1. On Control Toolbox panel, drag WPF Controls-> Command and rename it to “SymbolChanged”.
2. On Solution panel, drag Channel->GetSymbolServer->Broadcast and set it "No Wait"( The "No Wait" wil make data flow at different thread path)
3. On .NET DLL Toolbox, drag CSharpCommonLibrary->Class->List<T> and rename it to "SymbolList"

• Drag CSharpCommonLibrary->Primitive Type->String to List <T>

Connect controls as follows:

Create a GetSymbolServer Object Instance at MainWindow.xsml

1. On Solution panel, open MainWindow.xsml
2. Drag GexsymbolSever.xsml to MainWindow.xsml, see image

Now the Stock Chart auto completion is completed.

modds Drag and Drop Programming for C# Debugging (Part 4)