Information Pop-ups in WinForms

NikolaiF — Tue, 25 Nov 2008 00:47:00 GMT

We've had several questions about how to do a pop-up form in WinForms, similar to the one on the website. The website pop-up is implemented entirely within the browser, using an IFrame. Therefore, the functionality does not exist by default in the managed code alone. However, the events you need are provided, and creating your own pop-up is not difficult.

The event you need is EngineEvents.OnHover, accessed via the CommunicationManager. It will fire when the mouse hovers over any GeometryManager object that has hit detection on. The event arguments (CommunicationParameters) tell you which item was hovered and where on the screen it is. I used the Tag property on WorldGeometry to hold the name and description I wish to display, so when I get the hover event I retrieve the item back again and pass the tag to my Popup form.

The next step is to render the form. There are two behaviors we want: first, the auto-closing. This was pretty simple to do using a Timer. When you get an OnHoverEnd (another EngineEvent), start a timer. If the mouse moves into the popup, stop the timer. When the mouse leaves it, start the timer again. The second behavior is rendering HTML. This was trivial on the website, but a little tricker in winforms. Fortunately Windows ships with mshtml, which has a ready-made browser window. I based my work on this, and had it working in just a few minutes.

I'm certain all of this could be done more attractively and elegantly, but it should get you started. I updated the main samples package to have the new HtmlForm project. Just grab the zip file again and pull out that project directory.

Get the code!

P.S. If you want to open an ERO from a plug-in without having to go through the JS API first, do this:

CommunicationParameterSet set = new CommunicationParameterSet(8);
set.Add("layerId", null);
set.Add("pushpinId", null);
set.Add("rX1", p.X);
set.Add("rY1", p.Y);
set.Add("rX2", p.X);
set.Add("rY2", p.Y);
set.Add("header", name);
set.Add("content", desc == null ? string.Empty : desc);
Host.CommunicationManager.FireEvent(EngineEvents.Group, EngineEvents.OnHover, set);

p is the location on the screen you want it, name is the title, and desc is your html content.

Creating the most basic Windows Form

Heptazane — Sat, 19 Apr 2008 22:13:00 GMT

Note: this entry references code for an older version of VE3D. The newest code samples are here.

The samples that can be downloaded below demonstrate creating a basic Windows Application with a VE3D control on it (SimpleForm), however, I wanted to go over the most basic steps. The sample does not use the Toolbox, but I will.

Step 1: Make sure the VE3D control is installed by visiting http://maps.live.com and switching to 3D.

Step 2: Select Tools->Choose Toolbox Items...

Step 3: Make sure GlobeControl is checked in .NET Framework Components tab. The version should be 2.0.711.13001. GlobeControl should now show up in your Toolbox under the General section with a gear icon next to it.

Step 4: Create a new C# Windows Application in Visual Studio 2005.

Step 5: Select GlobeControl from your Toolbox and drop it onto your form. It should show up with just a big, grey dot in the middle and "GlobeControl" written across it. This is just the designer view. If you run the application at this point, you'll see the globe in 3D, but only with the outer most model and if you zoom in you'll just get fuzzy green. The reason is that we haven't set up any data sources yet, so...

Step 6: Make sure your form is selected (not the GlobeControl) and add a Load event (select the lightening bolt for events in the Properties pane, find Load and double click on it). Make sure it looks like this:

private void Form1_Load(object sender, EventArgs e)
{
    this.globeControl1.Host.DataSources.Add(new DataSourceLayerData("Elevation", "Elevation", @"http://maps.live.com//Manifests/HD.xml", DataSourceUsage.ElevationMap));
    this.globeControl1.Host.DataSources.Add(new DataSourceLayerData("Texture", "Texture", @"http://maps.live.com//Manifests/HT.xml", DataSourceUsage.TextureMap));
    this.globeControl1.Host.DataSources.Add(new DataSourceLayerData("Models", "Models", @"http://maps.live.com//Manifests/MO.xml", DataSourceUsage.Model));
}

Step 7: To use the DataSource classes, you'll need to right-click on your project's references and select Add Reference..., select the Browse tab and browse to "C:\Program Files\Virtual Earth 3D". Select "Microsoft.MapPoint.Data" and "Microsoft.MapPoint.Rendering3D.Utility" and hit OK.

Step 8: Run your application and enjoy!

Definitely look at the samples for more goodness, but these are the basic steps to get started.

Virtual Earth 3D team blog : Windows Forms

Information Pop-ups in WinForms

Creating the most basic Windows Form