HOWTO: Use Atalasoft Controls in .NET 6 / 7 / 8 Windows Forms Apps

If you're working in WinForms in .NET 6 /7 / 8 (as opposed to .NET Framework) with DotImage, you may have run into an issue when trying to use the form designer...

Even though our WinForms controls may (or may not) show up in the toolbox, dragging them to a form/control results in the following error message:

Microsoft Visual Studio Failed to create component 'COMPONENTNAME'. The error message is as follows Microsoft.DotNet.DesignTools.Client.DesignToolsServerException: Invalid URI: The hostname could not be parsed'.

This is a known issue. It has to do with differences in how .NET Framework and .NET handle WinForms controls. We're looking into a fix for this, but in the meantime, it is possible to incorporate our viewer controls - it just needs to be done programmatically and added at runtime.

So assuming you've created a new Windows Forms project in .NET 6 / 7 /8, and you've referenced Atalasoft DotImage (either direct references to the required components or using NuGet to add Atalasoft.dotImage.Wincontrols.x64), here's how to add (for example) an Atalasoft WorkspaceViewer to your project and interact with it:

In this example we will use a panel control named panel1 which is docked inside our form which in this case will be named Form1 in the class Form1.

• In the Class def for the form you need to add a field for the _viewer:
  

  public partial class Form1 : Form
  {
      private WorkspaceViewer _viewer;
      
      public Form1()
      {
    
         ...
  

• In the public Constructor for your form add the following code:
  

  public partial class Form1 : Form
  {
      private WorkspaceViewer _viewer;
      
      public Form1()
      {
  		// Absolutely critical required items
          _viewer = new WorkspaceViewer();
          _viewer.Dock = Dockstyle.Fill;
  
  		// Set any additional optional properties
  		// and set any event handlers you need to deal with for the control
  		_viewer.AutoZoom = AutoZoomMode.FitToWidth;
  		_viewer.MouseWheelScrolling = true;
  		_viewer.MouseMove += _viewer_MouseMove;
  
  		// Finally, add the control to the parent (panel1 in this case)
  		panel1.Controls.Add(_viewer);
  		
  		...
  

In this simple example, we created an event handler, for _viewer_MouseMove, so lets implement that to show how we reference it...: private void _viewer_MouseMove(object? sender, MouseEventArgs e) { toolStripStatusLabel1.Text = "Location: x: " + e.X.ToString() + " y: " + e.Y.ToString(); }
• So, now any interaction you want to do with the WorkspaceViewer, you can access via the _viewer field.. such as implementing an image open:

          private void fileOpenToolStripMenuItem_Click(object sender, EventArgs e)
          {
              using (OpenFileDialog dlg = new OpenFileDialog())
              {
                  dlg.Filter = "Jpeg (*.jpg)|*.jpg;*.jpeg|Portable Network Graphics (PNG)|*.png|All FIles (*.*)|*.*;";
  
                  if (dlg.ShowDialog() == DialogResult.OK)
                  {
                  	if (_viewer.Image != null)
                  	{
                  		_viewer.Image.Dispose();
                  	}
                      _viewer.Image = new AtalaImage(dlg.FileName);
                      _viewer.Refresh();
                  }
              }
          }
  

That's all there is to it...

What you lose out on over using the form designer is really just the ability to interact with properties and events in the project properties in Solution Explorer... you have to directly implement property settings and events in code, but otherwise, it will be fully functional.