map_suite_desktop_for_wpf_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_wpf_quick_start_guide [2017/02/21 06:28] tgwikiupdate [TextStyle] |
map_suite_desktop_for_wpf_quick_start_guide [2017/03/23 07:11] (current) tgwikiupdate |
||
|---|---|---|---|
| Line 1: | Line 1: | ||
| ====== Map Suite Quick Start Guide For Wpf ====== | ====== Map Suite Quick Start Guide For Wpf ====== | ||
| - | <div msgbox> | + | {{section>upgrade_map_suite_from_9.0#Upgrade Map Suite to 10.0}} |
| - | The Map Suite WPF 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 WPF application using Map Suite WPF components. | + | |
| - | + | ||
| - | If you want to build a Winforms application, please see the [[map_suite_desktop_for_winforms_quick_start_guide|WinForms QuickStart Guide]] instead.</div> | + | |
| Welcome to Map Suite™ from ThinkGeo, a full featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a Microsoft .NET application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes. | Welcome to Map Suite™ from ThinkGeo, a full featured mapping control that makes it easy for any Microsoft .NET developer to add mapping functionality to a Microsoft .NET application quickly and efficiently. Using the intuitive object model, even developers inexperienced in Geographic Information Systems (GIS) can have fully functional maps working in minutes. | ||
| Line 16: | Line 13: | ||
| \\ | \\ | ||
| ===== Setting up the Environment ===== | ===== Setting up the Environment ===== | ||
| - | Let's start with a new WPF project in Microsoft Visual Studio (2015 or newer) and call it HelloWorld (see Figure 1). We can create the project with .NET Framework 4.0 or 4.5. | + | Let's start with a new WPF project in Microsoft Visual Studio (2015 or newer) and call it QuickstartSample (see Figure 1). We can create the project with .NET Framework 4.0 or 4.5. |
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_creat_project.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_NewProject.png}} |
| \\ | \\ | ||
| //Figure 1. Creating a new project in the Visual Studio IDE.// | //Figure 1. Creating a new project in the Visual Studio IDE.// | ||
| Line 24: | Line 21: | ||
| \\ | \\ | ||
| - | The project HelloWorld is created in a new solution called HelloWorld. The wizard creates a single WPF Application. Next we need to install MapSuiteDesktopForWpf-BareBone, ThinkGeo.MapSuite.Layers.Background and ThinkGeo.MapSuite.Layers.ShapeFile from nugget package server (see Figure 2-5). | + | The project QuickstartSample is created in a new solution called QuickstartSample. The wizard creates a single WPF Application. Next we need to install MapSuiteDesktopForWpf-Standard from nugget package server (see Figure 2-5). |
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_open_managenuget.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_NuGetManager.png}} |
| \\ | \\ | ||
| //Figure 2. Refer to Manage NuGet Packages.// | //Figure 2. Refer to Manage NuGet Packages.// | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_installpackage_wpfbarebone.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_InstallWpfPackage.png}} |
| \\ | \\ | ||
| - | //Figure 3. Refer to MapSuiteDesktopForWpf -BareBone.// | + | //Figure 3. Refer to MapSuiteDesktopForWpf - Standard.// |
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_installpackage_shapfilelayer.png}} | + | Now the package is installing into the project. |
| + | |||
| + | Click “OK” if the message box like Figure 4 pops up. | ||
| + | \\ | ||
| + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_ReferenceRreview.png}} | ||
| + | \\ | ||
| + | //Figure 4. Review package references.// | ||
| + | \\ | ||
| \\ | \\ | ||
| - | //Figure 4. Refer to ThinkGeo.MapSuite.Layers.ShapeFile.// | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_installpackage_backgroundlayer.png}} | + | The “NetTopologySuite” is the third part assembly, so the license acceptance is required. You can click “I Accept” to agree the license.(See Figure 5) |
| \\ | \\ | ||
| - | //Figure 5. Refer to ThinkGeo.MapSuite.Layers.Background.// | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_PackageLicenseAcceptance.png}} |
| + | \\ | ||
| + | //Figure 5. NuGet installation success.// | ||
| - | Now the package is installing into the project. | + | ===== Adding the Map Control ===== |
| + | Open ".../QuickstartSample/packages/MapSuiteDesktopForWpf-Standard.10.0.0/designtime" package folder and drag "ThinkGeo.MapSuite.Wpf.dll" assembly to the Toolbox of Visual Studio. | ||
| + | |||
| + | {{mapsuite10:Wpf:Map_Suite_Wpf_QSG_ControlDesigntime.png}} | ||
| + | |||
| + | |||
| + | Draw the Map control on the MainWindow by clicking on the WpfMap Control object in the Toolbox and | ||
| + | then dragging(using the left mouse button) it to the MainWindow. You can resize the map if you desire. You can leave the name of the | ||
| + | Map control as Map1. Our map will display in this object. | ||
| + | |||
| + | {{mapsuite10:Wpf:Map_Suite_Wpf_QSG_AddMapControl.png}} | ||
| - | The “NetTopologySuite” is the third part assembly, so the license acceptance is required. You can click “I Accept” to agree the license. | ||
| - | {{mapsuite10:wpf:screenshots:licenseAcceptance.png}} | + | The second way. You can open your .xaml file and add reference code to refer Wpf map to your application (See Figure 6) |
| - | ===== Adding the Map Control to your Form ===== | + | |
| - | You can open your .xaml file and add reference code to refer Wpf map to your application (See Figure 6) | + | |
| <code csharp> | <code csharp> | ||
| Line 66: | Line 78: | ||
| </code> | </code> | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_add_mapcontrol.png}} | + | {{mapsuite10:Wpf:Map_Suite_Wpf_QSG_MapXmlCode.png}} |
| \\ | \\ | ||
| //Figure 6. Add Map Control to your application.// | //Figure 6. Add Map Control to your application.// | ||
| - | Now it is time to press F5 to start the application. If you have not set up a developer license, the Map Suite Product Center will pop up. You need to generate your developer license. For more details, please refer to http://wiki.thinkgeo.com/wiki/map_suite_developer_license_guide. | + | If you have not set up a developer license, the Map Suite Product Center will pop up when you debug the app. You need to generate your developer license. For more details, please refer to http://wiki.thinkgeo.com/wiki/map_suite_developer_license_guide. |
| \\ | \\ | ||
| Once the developer license is ready, run the application. Your map should look like the one below: (see Figure 7). | Once the developer license is ready, run the application. Your map should look like the one below: (see Figure 7). | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_render_normalmap.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_MapRender.png}} |
| //Figure 7. The normal map is rendered after the developer license file has been got.// | //Figure 7. The normal map is rendered after the developer license file has been got.// | ||
| - | ==== Map Suite WPF Desktop "Hello World" ==== | + | ==== Map Suite Desktop for Wpf "QuickstartSample" ==== |
| - | In creating our “Hello World” sample application, our first step is to set references to the ThinkGeo.MapSuite.Layers, ThinkGeo.MapSuite.Styles and ThinkGeo.MapSuite.Wpf workspaces at the very top of our code, as we will use many classes within them. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout our code. Setting a reference to the Map Suite workspace can be done in the “code-behind” of the Form by selecting the Form and hitting the F7 function key. Set the reference like this: | + | In creating our “QuickstartSample" application, our first step is to set references to the ThinkGeo.MapSuite.Layers, ThinkGeo.MapSuite.Styles and ThinkGeo.MapSuite.Wpf workspaces at the very top of our code, as we will use many classes within them. We do this so that we do not have to use the fully qualified name of the Map Suite classes throughout our code. Setting a reference to the Map Suite workspace can be done in the “code-behind” of the form by selecting the form and hitting the F7 function key. Set the reference like this: |
| <code csharp> | <code csharp> | ||
| Line 119: | Line 131: | ||
| Map1.Overlays.Add(layerOverlay); | Map1.Overlays.Add(layerOverlay); | ||
| // Set a proper extent for the Map. | // Set a proper extent for the Map. | ||
| - | Map1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | Map1.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. | ||
| Map1.Refresh(); | Map1.Refresh(); | ||
| Line 127: | Line 139: | ||
| You can get a normal map render (See Figure 8) | You can get a normal map render (See Figure 8) | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_hwlloworld_result.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_ShowAreaStyle.png}} |
| \\ | \\ | ||
| - | //Figure 8 HelloWorld Result.// | + | //Figure 8 QuickstartSample Run Result.// |
| So what has occurred here? We have created a layer and added it to the Map and the Map has rendered according to its default style parameters. Also, we have used ZoomLevel to display the map the way that we want. | So what has occurred here? We have created a layer and added it to the Map and the Map has rendered according to its default style parameters. Also, we have used ZoomLevel to display the map the way that we want. | ||
| Line 179: | Line 191: | ||
| Map1.Overlays.Add(layerOverlay); | Map1.Overlays.Add(layerOverlay); | ||
| - | Map1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| Map1.Refresh(); | Map1.Refresh(); | ||
| } | } | ||
| Line 186: | Line 198: | ||
| And the result is as follows (Figure 9): | And the result is as follows (Figure 9): | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_add_layers.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_ShowPointStyle.png}} |
| \\ | \\ | ||
| //Figure 9. Map of Europe with 2 layers.// | //Figure 9. Map of Europe with 2 layers.// | ||
| Line 194: | Line 206: | ||
| TextStyles are used to label items on the 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, the WorldCapitals Shapefile's corresponding .dbf file contains the field “CITY_NAME”. We can use this field to label the cities on our map. | TextStyles are used to label items on the 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, the WorldCapitals Shapefile's corresponding .dbf file contains the field “CITY_NAME”. We can use this field to label the cities on our map. | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_dbftable.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_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 249: | Line 261: | ||
| Map1.Overlays.Add(layerOverlay); | Map1.Overlays.Add(layerOverlay); | ||
| - | Map1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| Map1.Refresh(); | Map1.Refresh(); | ||
| } | } | ||
| Line 256: | Line 268: | ||
| The result is as follows (Figure 10): | The result is as follows (Figure 10): | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_textstyle.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_ShowTextStyle.png}} |
| \\ | \\ | ||
| //Figure 10. Map of Europe with a TextStyle.// | //Figure 10. Map of Europe with a TextStyle.// | ||
| Line 322: | Line 334: | ||
| Map1.Overlays.Add(layerOverlay); | Map1.Overlays.Add(layerOverlay); | ||
| - | Map1.CurrentExtent = new RectangleShape(0, 78, 30, 26); | + | Map1.CurrentExtent = new RectangleShape(-134, 70, -56, 7); |
| Map1.Refresh(); | Map1.Refresh(); | ||
| } | } | ||
| Line 329: | Line 341: | ||
| Can you imagine what the map will look like now? Below is the result. At first it appears like figure 11, and the map changes to figure 12 as you zoom in. | Can you imagine what the map will look like now? Below is the result. At first it appears like figure 11, and the map changes to figure 12 as you zoom in. | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_textstyle_lowerzoomlevel.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_ShowLowZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 11. Map of Europe with two ZoomLevels, before Zoom In.// | //Figure 11. Map of Europe with two ZoomLevels, before Zoom In.// | ||
| - | {{mapsuite10:wpf:screenshots:mapsuite_wpf_helloworld_textstyle_higherzoomlevel.png}} | + | {{mapsuite10:wpf:Map_Suite_Wpf_QSG_ShowHighZoomLevel.png}} |
| \\ | \\ | ||
| //Figure 12. Map of Europe with two ZoomLevels, after Zoom In.// | //Figure 12. Map of Europe with two ZoomLevels, after Zoom In.// | ||
| Line 339: | Line 351: | ||
| This completes this scenario. The next thing you might want to do is to make it run on another machine that does not have a developer license. A runtime license is the one we are looking for. Here is a guide to generate a runtime license to satisfy it, please refer to (http://wiki.thinkgeo.com/wiki/map_suite_runtime_license_guide_for_desktop ) for details. | This completes this scenario. The next thing you might want to do is to make it run on another machine that does not have a developer license. A runtime license is the one we are looking for. Here is a guide to generate a runtime license to satisfy it, please refer to (http://wiki.thinkgeo.com/wiki/map_suite_runtime_license_guide_for_desktop ) for details. | ||
| - | ===== Notes ===== | ||
| - | Because the Map Suite Wpf uses multi-threading internally for drawing, if you want to change an overlay after the map is initialized, you need to lock the overlay first to avoid threading conflicts. For more information, please have a look at our “How Do I?” sample applications that come with the product. | ||
| ===== Summary ===== | ===== Summary ===== | ||
map_suite_desktop_for_wpf_quick_start_guide.1487658523.txt.gz · Last modified: 2017/02/21 06:28 by tgwikiupdate