map_suite_desktop_for_winforms_quick_start_guide
Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
map_suite_desktop_for_winforms_quick_start_guide [2017/03/01 08:30] tgwikiupdate [Setting up the Environment] |
map_suite_desktop_for_winforms_quick_start_guide [2017/03/15 05:16] (current) tgwikiupdate |
||
|---|---|---|---|
| Line 2: | Line 2: | ||
| <div msgbox> | <div msgbox> | ||
| - | The Winforms QuickStart Guide will guide you through the process of creating a sample application and will help you become | + | The Winforms Quickstart Guide will guide you through the process of creating a sample application and will help you become |
| - | familiar with Map Suite. This QuickStart Guide supports Map Suite 10.0.0.0 and higher and will show you how to create a Winforms application. | + | familiar with Map Suite. This Quickstart Guide supports Map Suite 10.0.0.0 and higher and will show you how to create a Winforms application. |
| - | If you want to build a WPF application, please see the [[map_suite_desktop_for_wpf_quick_start_guide|WPF QuickStart Guide]] instead. | + | If you want to build a WPF application, please see the [[map_suite_desktop_for_wpf_quick_start_guide|WPF Quickstart Guide]] instead. |
| </div> | </div> | ||
| Line 16: | Line 16: | ||
| ===== Download the Sample ===== | ===== Download the Sample ===== | ||
| - | <faicon fa fa-download fa-lg> {{mapsuite10:desktop:mapsuite_winforms_helloworld.zip|Download Sample Code From This Exercise}} //(1.5 MB)// | + | <faicon fa fa-download fa-lg> {{https://github.com/ThinkGeo/QuickstartSample-ForWinForms|Download Sample Code From GitHub}} //(1.65 MB)// |
| \\ | \\ | ||
| \\ | \\ | ||
| ===== Setting up the Environment ===== | ===== Setting up the Environment ===== | ||
| - | Let's start by creating a new Windows Forms Application in Microsoft Visual Studio (2015 or newer) named HelloWorld (see Figure 1). We can create the project with .NET Framework 4.5 or higher. | + | Let's start by creating a new Windows Forms Application in Microsoft Visual Studio (2015 or newer) named QuickstartSample(see Figure 1). We can create the project with .NET Framework 4.5 or higher. |
| - | {{::mapsuite_helloworld.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_NewProject.png}} |
| \\ | \\ | ||
| //Figure 1. Creating a new project in Microsoft Visual Studio.// | //Figure 1. Creating a new project in Microsoft Visual Studio.// | ||
| \\ | \\ | ||
| \\ | \\ | ||
| + | |||
| + | |||
| + | After you created a QuickstartSample project, we will see a project in the solution, please see Figure 2. | ||
| + | |||
| + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_QuickstartProject.png}} | ||
| + | \\ | ||
| + | |||
| + | //Figure 2. Create WinForms Project.// | ||
| + | \\ | ||
| + | \\ | ||
| + | |||
| ===== Adding a NuGet Package to our Project ===== | ===== Adding a NuGet Package to our Project ===== | ||
| - | You need to add the NuGet package for Map Suite Desktop to the “Hello World” project. | + | You need to add the Map Suite Desktop for WinForms package to the “QuickstartSample” project from NuGet. |
| Right-click the Reference in Solution Explorer and select “Manage NuGet Packages” (See Figure 3). | Right-click the Reference in Solution Explorer and select “Manage NuGet Packages” (See Figure 3). | ||
| - | {{::mapsuite_winforms_helloword_references.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_NuGetManager.png}} |
| //Figure 3. Refer to Manage NuGet Packages.// | //Figure 3. Refer to Manage NuGet Packages.// | ||
| Line 40: | Line 51: | ||
| You can see the NuGet Package management start page in our Microsoft Visual Studio main window. | You can see the NuGet Package management start page in our Microsoft Visual Studio main window. | ||
| - | Ensure that "Browse" is selected and then type “Desktop” in the search box then press enter. You should see a package list (See Figure 4) in the main window. | + | Ensure that "Browse" is selected and then type “MapSuiteDesktopForWinForms” in the search box then press enter. You should see a package list (See Figure 4) in the main window. |
| In that package list, please select “MapSuiteDesktopForWinForms-Standard” package and click the “Install” button in the right panel. | In that package list, please select “MapSuiteDesktopForWinForms-Standard” package and click the “Install” button in the right panel. | ||
| - | {{:desktopedition:desktopstandard.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_InstallWinFormsPackage.png}} |
| //Figure 4. Refer to MapSuiteDesktopForWinForms-Standard.// | //Figure 4. Refer to MapSuiteDesktopForWinForms-Standard.// | ||
| \\ | \\ | ||
| \\ | \\ | ||
| - | The "NetTopologySuite" is the third part assembly, so the license acceptance is required. You can click "I Accept" to agree the license. | + | Click “OK” if the message box like Figure 5 pops up. |
| \\ | \\ | ||
| - | {{::mapsuite10:desktop:licenseacceptance.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ReferenceRreview.png}} |
| \\ | \\ | ||
| - | Click “OK” if the message box like Figure 5 pops up. | + | //Figure 5. Review package references.// |
| - | \\ | + | |
| - | + | ||
| - | {{::mapsuite_winforms_helloword_install.png}} | + | |
| - | + | ||
| - | //Figure 5. NuGet installation success.// | + | |
| \\ | \\ | ||
| \\ | \\ | ||
| - | Once the package is installed, you can see the message “Successfully installed | + | The "NetTopologySuite" is the third part assembly, so the license acceptance is required. You can click "I Accept" to agree the license.(See Figure 6) |
| - | 'MapSuiteDesktopForWinForms-Standard' to HelloWorld” in your Microsoft Visual Studio Output box. | + | |
| - | Some Desktop assemblies have been added into the project references. (See Figure 6). | + | |
| - | + | ||
| - | {{::mapsuite_winforms_helloword_package_installed.png}} | + | |
| - | + | ||
| - | //Figure 6. NuGet installation result.// | + | |
| \\ | \\ | ||
| + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_PackageLicenseAcceptance.png}} | ||
| \\ | \\ | ||
| - | + | //Figure 6. NuGet installation success.// | |
| - | + | ||
| - | In addition to the “MapSuiteDesktopForWinForms-BarBone” package, you also need two other packages named “ThinkGeo.MapSuite.Layers.ShapeFile” and “ThinkGeo.MapSuite.Styles.WorldStreets” to implement our “HelloWorld” application. Type “shapefile” into the search box and select the “ThinkGeo.MapSuite.Layers.ShapeFile” package to add it to the package list. Installing the package is the same as the steps for “MapSuiteDesktopForWinForms-BarBone” package. (See Figure 7). | + | |
| - | \\ | + | |
| - | + | ||
| - | {{::mapsuite_winforms_helloword_install_shapefile.png}} | + | |
| - | + | ||
| - | //Figure 7. NuGet ShapeFile installation.// | + | |
| \\ | \\ | ||
| \\ | \\ | ||
| - | Type “styles.worldstreets” into the search box and select the “ThinkGeo.MapSuite.Styles.WorldStreets” package | + | Once the package is installed, you can see the message “Successfully installed |
| - | in the package list. Install this package following the same steps. (See Figure 8). | + | 'MapSuiteDesktopForWinForms-Standard' to QuickstartSample” in your Microsoft Visual Studio Output box. |
| - | {{::mapsuite_winforms_helloword_install_styles.png}} | + | Some Desktop assemblies have been added into the project references. (See Figure 7). |
| - | //Figure 8. NuGet WorldStreets installation.// | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ProjectReferences.png}} |
| \\ | \\ | ||
| - | \\ | + | //Figure 7. NuGet installation result.// |
| - | + | ||
| - | ==== Adding the Map Control to the Toolbar ==== | + | |
| - | **1.** When you first open Microsoft Visual Studio after installing Map Suite, you may not see the controls in the Toolbox. | + | |
| - | You will need to follow these steps to add the controls. Hover over Toolbox and right click anywhere on list of controls. | + | |
| - | You will get a pop-up menu. Select “Choose Items…” (See Figure 9) | + | |
| - | + | ||
| - | {{::mapsuite_winforms_adding_control.png}} | + | |
| - | + | ||
| - | //Figure 9.Configure a nuget package address.// | + | |
| \\ | \\ | ||
| \\ | \\ | ||
| - | **2.** A dialogue box named "Choose Toolbox Items" will appear. You will need to select the .NET Framework Components tab and then click the Browse button. Finally navigate to the MapSuiteDesktopForWinForms-Standard.10.0.0 Nuget package installation folder and select the “ThinkGeo.MapSuite.WinForms.dll” file. | + | ===== Adding the Map Control to Your Form ===== |
| + | Open ".../QuickstartSample/packages/MapSuiteDesktopForWinForms-Standard.10.0.0/designtime" package folder and drag "ThinkGeo.MapSuite.WinForms.dll" assembly to the Toolbox of Visual Studio. | ||
| - | {{mapsuite10:desktop:winformcomponents.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ControlDesigntime.png}} |
| - | //Figure 10.Add ThinkGeo.MapSuite.WinForms.dll to .Net Framework Components.// | ||
| - | \\ | ||
| - | \\ | ||
| - | **3.** You should now have the Map Control available in your Toolbox as shown in Figure 11 below. | ||
| - | |||
| - | {{::mapsuite_winforms_toolbox_control.png}} | ||
| - | \\ | ||
| - | //Figure 11. The Map Controls under the Toolbox window.// | ||
| - | \\ | ||
| - | \\ | ||
| - | |||
| - | ===== Adding the Map Control to Your Form ===== | ||
| Draw the Map control on the form by clicking on the WinformsMap Control object in the Toolbox and | Draw the Map control on the form by clicking on the WinformsMap Control object in the Toolbox and | ||
| then dragging and dropping (using the left mouse button) to the form. You can resize the map if you desire. You can leave the name of the | then dragging and dropping (using the left mouse button) to the form. You can resize the map if you desire. You can leave the name of the | ||
| Map control as winformsMap1. Our map will display in this object. | Map control as winformsMap1. Our map will display in this object. | ||
| - | {{::mapsuite_winforms_map.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_AddMapControl.png}} |
| - | ===== Map Suite Desktop "Hello World" ===== | + | ===== Map Suite Desktop "QuickstartSample" ===== |
| - | In creating your “Hello World” sample application, your first step is to set some references at the very top of your code | + | In creating your “QuickstartSample" application, your first step is to set some references at the very top of your code |
| as you will use many classes within that. Open the “Form1.cs” in the project and click the form in the opened design box | as you will use many classes within that. Open the “Form1.cs” in the project and click the form in the opened design box | ||
| to move to the “View Code” of the form. Add the references like this: | to move to the “View Code” of the form. Add the references like this: | ||
| Line 172: | Line 146: | ||
| // Set a proper extent for the Map. | // Set a proper extent for the Map. | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| // We now need to call the Refresh() method of the Map control so that the Map can redraw based on the data that has been provided. | // We now need to call the Refresh() method of the Map control so that the Map can redraw based on the data that has been provided. | ||
| Line 183: | Line 157: | ||
| Once the developer license is ready, run the application. Your map should look like the one below: (see Figure 12). | Once the developer license is ready, run the application. Your map should look like the one below: (see Figure 12). | ||
| - | {{mapsuite10:desktop:2.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowAreaStyle.png}} |
| \\ | \\ | ||
| //Figure 12. A sample map of Europe.// | //Figure 12. A sample map of Europe.// | ||
| Line 232: | Line 206: | ||
| winformsMap1.Overlays.Add(layerOverlay); | winformsMap1.Overlays.Add(layerOverlay); | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| winformsMap1.Refresh(); | winformsMap1.Refresh(); | ||
| Line 240: | Line 214: | ||
| And the result is as follows (Figure 13): | And the result is as follows (Figure 13): | ||
| - | {{mapsuite10:desktop:1.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowPointStyle.png}} |
| \\ | \\ | ||
| //Figure 13. Map of Europe with 2 layers.// | //Figure 13. Map of Europe with 2 layers.// | ||
| Line 250: | Line 224: | ||
| A TextStyle is used to label items on map. As every ShapeFile has a relative .dbf file that includes descriptions for every record, the most common way to use TextStyles is for labeling. For example, WorldCapital Shapefile's corresponding .dbf file contains the field "CITY_NAME". We can use this field to label the cities on our map. | A TextStyle is used to label items on map. As every ShapeFile has a relative .dbf file that includes descriptions for every record, the most common way to use TextStyles is for labeling. For example, WorldCapital Shapefile's corresponding .dbf file contains the field "CITY_NAME". We can use this field to label the cities on our map. | ||
| - | {{::mapsuite_winforms_helloword_data.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_DBFDetails.png}} |
| Map Suite has many TextStyles built in to help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it. | Map Suite has many TextStyles built in to help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it. | ||
| Line 305: | Line 279: | ||
| winformsMap1.Overlays.Add(layerOverlay); | winformsMap1.Overlays.Add(layerOverlay); | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| winformsMap1.Refresh(); | winformsMap1.Refresh(); | ||
| Line 313: | Line 287: | ||
| The result is as follows (Figure 14): | The result is as follows (Figure 14): | ||
| - | {{::mapsuite_winforms_helloword_display3.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowTextStyle.png}} |
| \\ | \\ | ||
| //Figure 14. Map of Europe with a TextStyle.// | //Figure 14. Map of Europe with a TextStyle.// | ||
| Line 378: | Line 352: | ||
| winformsMap1.Overlays.Add(layerOverlay); | winformsMap1.Overlays.Add(layerOverlay); | ||
| - | winformsMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | winformsMap1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| winformsMap1.Refresh(); | winformsMap1.Refresh(); | ||
| Line 386: | Line 360: | ||
| Can you imagine what the map will look like now? Below is the result. At first it appears like figure 15, and the map changes to figure 8 as you zoom in. | Can you imagine what the map will look like now? Below is the result. At first it appears like figure 15, and the map changes to figure 8 as you zoom in. | ||
| - | {{::mapsuite_winforms_helloword_display4.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowLowZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 15. A map of Europe with two ZoomLevels, before zooming in.// | //Figure 15. A map of Europe with two ZoomLevels, before zooming in.// | ||
| - | {{::mapsuite_winforms_helloword_display5.png}} | + | {{mapsuite10:desktop:Map_Suite_WinForms_QSG_ShowHeightZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 16. The same map with two ZoomLevels, after zooming in.// | //Figure 16. The same map with two ZoomLevels, after zooming in.// | ||
map_suite_desktop_for_winforms_quick_start_guide.1488357017.txt.gz · Last modified: 2017/03/01 08:30 by tgwikiupdate