Differences

This shows you the differences between two versions of the page.

--- map_suite_wpf_desktop_edition_quick_start_guide [2015/09/06 09:24]
admin [Setting up the Environment]
+++ map_suite_wpf_desktop_edition_quick_start_guide [2017/03/17 02:09] (current)
tgwikiupdate
@@ Line 1: / Line 1: @@
 ====== Map Suite Wpf Desktop Edition Quick Start Guide ======
+{{section>upgrade_map_suite_to_10.0}}
 <div msgbox>
-The Map Suite WPF Desktop Edition illustrated QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite. This edition of the QuickStart Guide supports WPF Desktop Edition 9.0.0.0 and higher, and will show you how to create a WPF application using Map Suite WPF Desktop Edition.<br/><br/>If you want to build a Winforms application using the standard Map Suite Desktop Edition product, please see the [[Map Suite Desktop Edition Quick Start Guide|Winforms QuickStart Guide]] instead.</div>
+The Map Suite WPF Desktop Edition illustrated QuickStart Guide will guide you through the process of creating a sample application and will help you become familiar with Map Suite. This edition of the QuickStart Guide supports WPF Desktop Edition 9.0.0.0 and higher, and will show you how to create a WPF application using Map Suite WPF Desktop Edition.
+If you want to build a Winforms application using the standard Map Suite Desktop Edition product, please see the [[Map Suite Desktop Edition 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.
@@ Line 13: / Line 16: @@
 ===== Download the Sample =====
-<faicon fa fa-download> {{:File:HelloWorld WPFDesktop.zip|Download Sample Code From This Exercise}} //(1.5 MB)//
+<faicon fa fa-download  fa-lg>  {{filehistory:HelloWorld WPFDesktop.zip|Download Sample Code From This Exercise}} //(1.5 MB)//
 ===== Setting up the Environment =====
@@ Line 30: / Line 33: @@
 Hover on Toolbox and right click anywhere on list of controls. You will get a pop-up menu. Choose "Choose Items...".
-{{Figure|QSG_WPFDesktop_Img02.png}}
+{{wpfedition:QSG_WPFDesktop_Img02.png}}
-**2.** A dialogue box to Choose Toolbox Items will appear. You will need to select the WPF Components tab and then click the Browse button. Finally, navigate to the <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Wpf Desktop\Current Version\Managed Assemblies</kbd> folder and select the "WpfDesktopEdition.dll".
+**2.** A dialogue box to Choose Toolbox Items will appear. You will need to select the WPF Components tab and then click the Browse button. Finally, navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Wpf Desktop\Current Version\Managed Assemblies// folder and select the "WpfDesktopEdition.dll".
-{{Figure|QSG_WPFDesktop_Img03b.png}}
+{{wpfedition:QSG_WPFDesktop_Img03b.png}}
 **3.** You should now have the Map Control available in your Toolbox as shown in Figure 2 below.
-{{Figure|QSG_WPFDesktop_Img04.png|Figure 2. The Map Controls under the Toolbox window.}}
+{{wpfedition:QSG_WPFDesktop_Img04.png}}
+\\
+//Figure 2. The Map Controls under the Toolbox window.//
 ===== Adding the Map Control to your Windows Form =====
-We need to add MapSuiteCore.dll to the reference. Right-click the project in Solution Explorer and select "Add Reference...", navigate to the <kbd>C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Wpf Desktop\Current Version\Managed Assemblies</kbd> folder and select "MapSuiteCore.dll".
+We need to add MapSuiteCore.dll to the reference. Right-click the project in Solution Explorer and select "Add Reference...", navigate to the //C:\Program Files (x86)\ThinkGeo\Map Suite 9.0\Map Suite Wpf Desktop\Current Version\Managed Assemblies// folder and select "MapSuiteCore.dll".
-{{Figure|QSG_WPFDesktop_Img05.png}}
+{{wpfedition:QSG_WPFDesktop_Img05.png}}
 Draw the Map control on the form by clicking on the Map Control object in the Toolbox and then dragging and dropping (using the left mouse button) to the form. You can change its size by modifying the corresponding XAML file, or simply leave the width and height blank to auto fit to its parent. Also, you can leave the name of the Map control as "wpfMap1". Our map will display in it.
-{{Figure|QSG_WPFDesktop_Img06.png}}
+{{wpfedition:QSG_WPFDesktop_Img06.png}}
 Now that we have our "MapSuiteCore.dll" referenced and a Map Control added, we are ready for adding the code.
@@ Line 83: / Line 88: @@
 We have provided the 20 most common scales, from ZoomLevel01 to ZoomLevel20, at which you may want to change the way your data looks. What is scale? Scale indicates how much the given area has been reduced. If a road is 10,000 inches long in the real world and a map depicts this length as 1 inch on the screen, then we say the scale of this map is 1:10,000. Now let's say ZoomLevel02 uses a scale of 1:500 and ZoomLevel03 uses a scale of 1:1200. This means the map with a current scale of 1:1000 matches ZoomLevel03, the ZoomLevel whose scale is the closest to that.
-PresetZoomLevels has a very useful property called <code>ZoomLevel.ApplyUntilZoomLevel</code>, which you can very easily use to extend your ZoomLevels. Let's say you want a particular Style to be visible at ZoomLevel03 through ZoomLevel10. To make that work, we can simply code as follows:
+PresetZoomLevels has a very useful property called ''ZoomLevel.ApplyUntilZoomLevel'', which you can very easily use to extend your ZoomLevels. Let's say you want a particular Style to be visible at ZoomLevel03 through ZoomLevel10. To make that work, we can simply code as follows:
-<source lang="csharp">
+<code csharp>
 capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.CreateSimpleCircleStyle(GeoColor.StandardColors.White, 7, GeoColor.StandardColors.Brown);
 capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;
-</source>
+</code>
 ==== Map Suite WPF Desktop "Hello World" ====
-In creating our "Hello World" sample application, our first step is to set references to the <code>MapSuite.Core</code> and <code>MapSuite.WpfDesktopEdition</code> 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 "Hello World" sample application, our first step is to set references to the ''MapSuite.Core'' and ''MapSuite.WpfDesktopEdition'' 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:
-<source lang="csharp">
+<code csharp>
 using ThinkGeo.MapSuite.Core;
 using ThinkGeo.MapSuite.WpfDesktopEdition;
-</source>
+</code>
 Now let's look at a code sample to bring this concept to fruition. We'll look at Shapefiles relating to the entire world. In our example, we have one such Shapefile:
@@ Line 103: / Line 108: @@
 (NOTE: The data used in this sample can be found in the attached sample above at "\AppData" folder)
-Our next step is to define and add our Layers. Here is the code to use for our example. All of the following code can be placed in the <code>Window_Loaded</code> event of the window.
+Our next step is to define and add our Layers. Here is the code to use for our example. All of the following code can be placed in the ''Window_Loaded'' event of the window.
-<source lang="csharp">
+<code csharp>
 private void Window_Loaded(object sender, RoutedEventArgs e)
 {
-    <nowiki>//</nowiki> Set the Map Unit. The reason for setting it to DecimalDegrees is that is what the shapefile’s unit of measure is inherently in.
+    // Set the Map Unit. The reason for setting it to DecimalDegrees is that is what the shapefile’s unit of measure is inherently in.
     wpfMap1.MapUnit = GeographyUnit.DecimalDegree;
-    <nowiki>//</nowiki> We create a new Layer and pass the path to a Shapefile into its constructor.
+    // We create a new Layer and pass the path to a Shapefile into its constructor.
     ShapeFileFeatureLayer worldLayer = new ShapeFileFeatureLayer(@"../../AppData/Countries02.shp");
-    <nowiki>//</nowiki> Set the worldLayer with a preset Style, as AreaStyles.Country1 has YellowGreen background and black border, our worldLayer will have the same render style.
+    // Set the worldLayer with a preset Style, as AreaStyles.Country1 has YellowGreen background and black border, our worldLayer will have the same render style.
     worldLayer.ZoomLevelSet.ZoomLevel01.DefaultAreaStyle = AreaStyles.Country1;
-    <nowiki>//</nowiki> This setting will apply from ZoonLevel01 to ZoomLevel20, that means we can see the world the same style with ZoomLevel01 all the time no matter how far we zoom out/in.
+    // This setting will apply from ZoonLevel01 to ZoomLevel20, that means we can see the world the same style with ZoomLevel01 all the time no matter how far we zoom out/in.
     worldLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> Create a new Layer Overlay to hold the layer we just created
+    // Create a new Layer Overlay to hold the layer we just created
     LayerOverlay layerOverlay = new LayerOverlay();
-    <nowiki>//</nowiki> Add a background Layer
+    // Add a background Layer
     layerOverlay.Layers.Add(new BackgroundLayer(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)));
-    <nowiki>//</nowiki> Add the shapefile layer to the layer overlay
+    // Add the shapefile layer to the layer overlay
     layerOverlay.Layers.Add(worldLayer);
-    <nowiki>//</nowiki> We need to add the layerOverlay to map.
+    // We need to add the layerOverlay to map.
     wpfMap1.Overlays.Add(layerOverlay);
-    <nowiki>//</nowiki> Set a proper extent for the Map.
+    // Set a proper extent for the Map.
     wpfMap1.CurrentExtent = new RectangleShape(0, 78, 30, 26);
-    <nowiki>//</nowiki> 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.
     wpfMap1.Refresh();
 }
-</source>
+</code>
 If you compile and run what you have now, your map should look like the one below. (see Figure 4).
-{{Figure|QSG_WPFDesktop_Img08.png|Figure 4. A Simple map of Europe.}}
+{{wpfedition:QSG_WPFDesktop_Img08.png}}
+\\
+//Figure 4. A Simple map of Europe.//
 So what has occurred here? We have created a layer and added it to the Map, and the Map has rendered it according to its default style parameters. Also, we have used ZoomLevel to display the map the way we want.
-**NOTE:** It is important that the <code>MapUnit</code> property of a Map object be set using the <code>GeographyUnit</code> Enumeration. This is because Shapefiles only store binary vector coordinates, which can be in DecimalDegree, feet, meters, etc., and our map has no idea about what the unit of measurement is until we set it. This information is normally found somewhere in the documentation or within the supplemental data file as discussed in the section on Shapefiles.
+**NOTE:** It is important that the ''MapUnit'' property of a Map object be set using the ''GeographyUnit'' Enumeration. This is because Shapefiles only store binary vector coordinates, which can be in DecimalDegree, feet, meters, etc., and our map has no idea about what the unit of measurement is until we set it. This information is normally found somewhere in the documentation or within the supplemental data file as discussed in the section on Shapefiles.
 ==== Navigate the Map ====
@@ Line 152: / Line 159: @@
 That was an easy start! Now, let's add another Shapefile to the sample so that we will have a total of two layers:
-#The borders of every country in the world ("Countries02.shp")
+  -The borders of every country in the world ("Countries02.shp")
-#The capitals of the world countries ("WorldCapitals.shp")
+  -The capitals of the world countries ("WorldCapitals.shp")
-<source lang="csharp">
+<code csharp>
 private void Window_Loaded(object sender, RoutedEventArgs e)
 {
@@ Line 165: / Line 172: @@
     ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"../../AppData/WorldCapitals.shp");
-    <nowiki>//</nowiki> Similarly, we use the presetPointStyle for cities.
+    // Similarly, we use the presetPointStyle for cities.
     capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;
-    <nowiki>//</nowiki> This setting also applies from ZoonLevel01 to ZoomLevel20, that means we can see city symbols the same style with ZoomLevel01 all the time.
+    // This setting also applies from ZoonLevel01 to ZoomLevel20, that means we can see city symbols the same style with ZoomLevel01 all the time.
     capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
@@ Line 173: / Line 180: @@
     layerOverlay.Layers.Add(new BackgroundLayer(new GeoSolidBrush(GeoColor.GeographicColors.ShallowOcean)));
     layerOverlay.Layers.Add(worldLayer);
-    <nowiki>//</nowiki> We need to add both of the new layers to the Layer OverLay.
+    // We need to add both of the new layers to the Layer OverLay.
     layerOverlay.Layers.Add(capitalLayer);
@@ Line 181: / Line 188: @@
     wpfMap1.Refresh();
 }
-</source>
+</code>
 And the result is as following (Figure 5):
-{{Figure|QSG_WPFDesktop_Img09.png|Figure 5. Europe map with 2 layers.}}
+{{wpfedition:QSG_WPFDesktop_Img09.png}}
+\\
+//Figure 5. Europe map with 2 layers.//
 ===== How to Use GeoTextStyle =====
@@ Line 191: / Line 200: @@
 TextStyles are used to label items on the map. As every Shapefile has a relative .dbf file, which 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.
-{{Figure|QSG_WPFDesktop_Img10.png}}
+{{wpfedition:QSG_WPFDesktop_Img10.png}}
 Map Suite has many TextStyles built in, which will help us quickly design attractive labels for the cities on our map. We can just pick the TextStyle we like and use it.
-<source lang="csharp">
+<code csharp>
 private void Window_Loaded(object sender, RoutedEventArgs e)
 {
@@ Line 205: / Line 214: @@
     ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"../../AppData/WorldCapitals.shp");
-    <nowiki>//</nowiki> Similarly, we use the presetPointStyle for cities.
+    // Similarly, we use the presetPointStyle for cities.
     capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.Capital3;
-    <nowiki>//</nowiki> This setting also applies from ZoonLevel01 to ZoomLevel20, that means we can see city symbols the same style with ZoomLevel01 all the time.
+    // This setting also applies from ZoonLevel01 to ZoomLevel20, that means we can see city symbols the same style with ZoomLevel01 all the time.
     capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> We create a new Layer for labeling the capitals.
+    // We create a new Layer for labeling the capitals.
     ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(@"../../AppData/WorldCapitals.shp");
-    <nowiki>//</nowiki> We use the preset TextStyle. Here we passed in the “CITY_NAME”, which is the name of the field we want to label on map.
+    // We use the preset TextStyle. Here we passed in the “CITY_NAME”, which is the name of the field we want to label on map.
     capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.Capital3("CITY_NAME");
     capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
-    <nowiki>//</nowiki> As the map is drawn by tiles, it needs to draw on the margin to make sure the text is complete after we joining the tiles together.
+    // As the map is drawn by tiles, it needs to draw on the margin to make sure the text is complete after we joining the tiles together.
-    <nowiki>//</nowiki> Change the number to another one (for example 0) and you can see the difference expecially when panning.
+    // Change the number to another one (for example 0) and you can see the difference expecially when panning.
     capitalLabelLayer.DrawingMarginPercentage = 50;
@@ Line 229: / Line 238: @@
     wpfMap1.Refresh();
 }
-</source>
+</code>
 The result is as following (Figure 6):
-{{Figure|QSG_WPFDesktop_Img11.png|Figure 6. Europe map with TextStyle.}}
+{{wpfedition:QSG_WPFDesktop_Img11.png}}
+\\
+//Figure 6. Europe map with TextStyle.//
 Now that we know how to render text and render symbols, let's define two different ZoomLevels in one single layer, and create our own custom Style and TextStyle.
-<source lang="csharp">
+<code csharp>
 private void Window_Loaded(object sender, RoutedEventArgs e)
 {
@@ Line 247: / Line 258: @@
     ShapeFileFeatureLayer capitalLayer = new ShapeFileFeatureLayer(@"../../AppData/WorldCapitals.shp");
-    <nowiki>//</nowiki> We can customize our own Style. Here we passed in a color and a size.
+    // We can customize our own Style. Here we passed in a color and a size.
     capitalLayer.ZoomLevelSet.ZoomLevel01.DefaultPointStyle = PointStyles.CreateSimpleCircleStyle(GeoColor.StandardColors.White, 7, GeoColor.StandardColors.Brown);
-    <nowiki>//</nowiki> The Style we set here is available from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, the appearance we set here will not be visible anymore.
+    // The Style we set here is available from ZoomLevel01 to ZoomLevel05. That means if we zoom in a bit more, the appearance we set here will not be visible anymore.
     capitalLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;
     capitalLayer.ZoomLevelSet.ZoomLevel06.DefaultPointStyle = PointStyles.Capital3;
-    <nowiki>//</nowiki> The Style we set here is available from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, the appearance we set here will not be visible any more.
+    // The Style we set here is available from ZoomLevel06 to ZoomLevel20. That means if we zoom out a bit more, the appearance we set here will not be visible any more.
     capitalLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
     ShapeFileFeatureLayer capitalLabelLayer = new ShapeFileFeatureLayer(@"../../AppData/WorldCapitals.shp");
-    <nowiki>//</nowiki> We can customize our own TextStyle. Here we passed in the font, the size, the style and the color.
+    // We can customize our own TextStyle. Here we passed in the font, the size, the style and the color.
     capitalLabelLayer.ZoomLevelSet.ZoomLevel01.DefaultTextStyle = TextStyles.CreateSimpleTextStyle("CITY_NAME", "Arial", 8, DrawingFontStyles.Italic, GeoColor.StandardColors.Black, 3, 3);
-    <nowiki>//</nowiki> The TextStyle we set here is available from ZoomLevel01 to ZoomLevel05.
+    // The TextStyle we set here is available from ZoomLevel01 to ZoomLevel05.
     capitalLabelLayer.ZoomLevelSet.ZoomLevel01.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level05;
     capitalLabelLayer.ZoomLevelSet.ZoomLevel06.DefaultTextStyle = TextStyles.Capital3("CITY_NAME");
-    <nowiki>//</nowiki> The TextStyle we set here is available from ZoomLevel06 to ZoomLevel20.
+    // The TextStyle we set here is available from ZoomLevel06 to ZoomLevel20.
     capitalLabelLayer.ZoomLevelSet.ZoomLevel06.ApplyUntilZoomLevel = ApplyUntilZoomLevel.Level20;
     capitalLabelLayer.DrawingMarginPercentage = 50;
@@ Line 277: / Line 288: @@
     wpfMap1.Refresh();
 }
-</source>
+</code>
 Can you imagine what the map will look like now? Below is the result. At first it appears like figure 7, and the map changes to figure 8 as you zoom in.
-{{Figure|QSG_WPFDesktop_Img12.png|Figure 7. Europe Map with two ZoomLevels, before Zoom In.}}
+{{wpfedition:QSG_WPFDesktop_Img12.png}}
+\\
+//Figure 7. Europe Map with two ZoomLevels, before Zoom In.//
-{{Figure|QSG_WPFDesktop_Img13.png|Figure 8. Europe Map with two ZoomLevels, after Zoom In.}}
+{{wpfedition:QSG_WPFDesktop_Img13.png}}
+\\
+//Figure 8. Europe Map with two ZoomLevels, after Zoom In.//
 ===== Notes =====
@@ Line 291: / Line 306: @@
 You now know the basics of using the Map Suite Map control and are able to get started adding functionality into your own applications. Let's recap what we have learned about the object relationships and how the pieces of Map Suite work together:
-#It is of the utmost importance that the units (feet, meters, decimal degrees, etc.) be set properly for the Map control based on the data.
+  -It is of the utmost importance that the units (feet, meters, decimal degrees, etc.) be set properly for the Map control based on the data.
-#Shapefiles provide the data used by a Map control to render a map.
+  -Shapefiles provide the data used by a Map control to render a map.
-#A Map is the basic control that contains all of the other objects that are used to tell how the map is to be rendered.
+  -A Map is the basic control that contains all of the other objects that are used to tell how the map is to be rendered.
-#A Map has one-to-many Layers. A Layer correlates one-to-one with a shape file (.shp).
+  -A Map has one-to-many Layers. A Layer correlates one-to-one with a shape file (.shp).
-#A Layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges (upper and lower) of when a Layer should be shown or hidden.
+  -A Layer can have one-to-many ZoomLevels. ZoomLevels help to define ranges (upper and lower) of when a Layer should be shown or hidden.
-<br>
-{{Filelink}}[[:File:HelloWorld WPFDesktop.zip|Download Sample Code From This Exercise]] //(1.5 MB)//
-[[Category:Map Suite WPF Desktop Edition]] [[Category:Desktop GIS]] [[Category:WPF]] [[Category:GIS]] [[Category:.NET]]
+<faicon fa fa-download  fa-lg> {{filehistory:HelloWorld WPFDesktop.zip|Download Sample Code From This Exercise}} //(1.5 MB)//

User Tools

Site Tools

Differences

Page Tools