Quick Start

This quick start is intended to get you up and running with the TagEditor control. It guides you through the steps of creating a new Visual Studio project with a C1TagEditor control, add content to it and run the application to view the output.

The following image shows how the TagEditor control in action.

Set up the Application

1. Create a new WPF App in Visual Studio.
2. In the Solution Explorer, right click Dependencies and select Manage NuGet Packages.
3. In NuGet Package Manager, select nuget.org as the Package source.
4. Search and select the following package and click Install.
   • C1.WPF.Input

Configure the TagEditor control

1. In the design view, drag and drop the following controls from the toolbox onto the window.

   • C1TagEditor
   • TextBlock
   • TextBox
   • Button

2. Switch to the XAML view and set the following properties of the controls as shown in the code.

   <c1:C1TagEditor Name="te" Height="40" Width="400"/>
   <TextBlock Margin="108,250,108,164" Text="Enter content to add to Tageditor" Height="20" />
   <TextBox x:Name="AddInput" Height="30" Margin="108,283,108,121"/>
   <Button Content="Click to add tag content" Margin="108,335,337,68" Click="button_click"/>
   

3. Switch to the Code view and add the following import statement.

   using C1.WPF.Input;
   

4. Add the following code to insert tags in the TagEditor control on a button click.

   public MainWindow()
   {
       InitializeComponent();
       te.InsertTag("WPF");
   }
   private void button_click(object sender, RoutedEventArgs e)
   {
       string text = AddInput.Text;
       if (!string.IsNullOrEmpty(text))
       {
           te.InsertTag(text);
           if (te.DisplayMode == DisplayMode.Text)
               te.UpdateTextFromTags();
           AddInput.Text = "";
       }
   }
   

Build and Run the Project

1. Click Build | Build Solution to build the project.
2. Press F5 to run the project.