ArcGIS API for Silverlight (3): Widgets

Widgets is translated as a small toy. If you have used js frameworks such as Dojo or ExtJS, you will surely understand that this "little toy" is also of great use. It can greatly reduce our workload and quickly fulfill functional requirements. How much work can be reduced? Let's start first. Click here to see an example.

Download(339.67 KB)

 

In the first two sections of the map, what do you always feel ...... Yes, it is a sliderbar. It feels like a car has a steering wheel and can control its direction. Let's take a look at the work that needs to be done to implement the slider bar in the above example.
Create a UserControl in silverlight to encapsulate the appearance and functions of the sliderbar above.
Let's look at the specific work. In vs, right-click the silverlight project, add, new item, and select silverlight user control, named mapslider. Fill in the following code in mapslider. xaml:

1. <Grid x: Name = "slidergrid" HorizontalAlignment = "Left" verticalignment = "Center" Background = "Azure" Margin = "20">
2. <StackPanel Orientation = "Vertical">
3. <Button x: Name = "btnzoomin" Content = "+" Click = "btnzoomin_Click"/>
4. <Slider x: name = "sliderlevels" Orientation = "Vertical" Height = "200" SmallChange = "1" LargeChange = "1" Minimum = "0" Cursor = "Hand" ValueChanged = "slider1_ValueChanged" />
5. <Button x: Name = "btnzoomout" Content = "-" Click = "btnzoomout_Click"/>
6. </StackPanel>
7. </Grid>

Copy code

The above are the appearance of the slider bar. Next, let's look at the function section. The general idea is to set a public attribute Map in the mapslider class, that is, the Map to be operated, but this attribute is not ESRI. ArcGIS. Map, but another custom class. Why? Because this custom class needs to implement the INotifyPropertyChanged interface, when we assign values to our Map control as mapslider attributes, this Map needs to do other work. Check the Code. If you don't quite understand it, you need to learn more about data binding in silverlight. Enter the code on the mapslider. xaml. cs page:

1. Using System;
2. Using System. Collections. Generic;
3. Using System. Linq;
4. Using System. Net;
5. Using System. Windows;
6. Using System. Windows. Controls;
7. Using System. Windows. Documents;
8. Using System. Windows. Input;
9. Using System. Windows. Media;
10. Using System. Windows. Media. Animation;
11. Using System. Windows. Shapes;
13. Using System. ComponentModel;
15. Namespace customcontrol
16. {
17. Public partial class mapslider: UserControl
18. {
19. Private mymap map = new mymap ();
20. Public ESRI. ArcGIS. Map
21. {
22. Get
23. {
24. Return map. Map;
25. }
26. Set
27. {
28. Map. Map = value;
29. If (map. Map! = Null)
30. {
31. Map. ExtentChanged + = new EventHandler <ESRI. ArcGIS. ExtentEventArgs> (map_ExtentChanged );
32. Map. SnapToLevels = true;
33. (ESRI. ArcGIS. ArcGISTiledMapServiceLayer) Map. Layers [0]). Initialized + = new EventHandler <EventArgs> (layer0_initialized );
34. }
36. }
37. }
39. Private void layer0_initialized (object o, EventArgs e)
40. {
41. Sliderlevels. Maximum = (ESRI. ArcGIS. ArcGISTiledMapServiceLayer) Map. Layers [0]). TileInfo. Lods. Length-1;
42. }
44. Public mapslider ()
45. {
46. InitializeComponent ();
47. }
49. Private void sliderincluvaluechanged (object sender, RoutedPropertyChangedEventArgs <double> e)
50. {
51. If (map. Map! = Null)
52. {
53. Map. ZoomToResolution (ESRI. ArcGIS. ArcGISTiledMapServiceLayer) Map. Layers [0]). TileInfo. Lods [Convert. ToInt32 (e. NewValue)]. Resolution );
54. }
55. }
57. Private void map_ExtentChanged (object o, ESRI. ArcGIS. ExtentEventArgs e)
58. {
59. ESRI. ArcGIS. ArcGISTiledMapServiceLayer layer = Map. Layers [0] as ESRI. ArcGIS. ArcGISTiledMapServiceLayer;
60. Int I;
61. For (I = 0; I <layer. TileInfo. Lods. Length; I ++)
62. {
63. If (Map. Resolution = layer. TileInfo. Lods [I]. Resolution)
64. Break;
65. }
67. Sliderlevels. Value = I;
68. }
70. Private void btnzoomin_Click (object sender, RoutedEventArgs e)
71. {
72. Sliderlevels. Value + = 1;
73. }
75. Private void btnzoomout_Click (object sender, RoutedEventArgs e)
76. {
77. Sliderlevels. Value-= 1;
78. }
79. }
81. // After this interface is executed, when Map is assigned to page. xaml. cs on the homepage, it can be returned to the set statement to execute the code bound to the event.
82. Public class mymap: INotifyPropertyChanged
83. {
84. Private ESRI. ArcGIS. Map map;
85. Public ESRI. ArcGIS. Map
86. {
87. Get {return map ;}
88. Set
89. {
90. Map = value;
91. If (PropertyChanged! = Null)
92. {
93. PropertyChanged (this, new PropertyChangedEventArgs ("Map "));
94. }
95. }
96. }
98. Public event PropertyChangedEventHandler PropertyChanged;
100. }
101. }

Copy code

After completing the encapsulation, let's see how to use this control in page. xaml. You only need three lines of code: 1. register the user control namespace (which is the same as the reference to the Silverlight API and is placed in the root UserControl of the page ):
Xmlns: uc = "clr-namespace: customcontrol"
2. Add the slider to the page:
<Grid x: Name = "LayoutRoot" Background = "White">
<! -- The map is here -->
</Esri: Map>

<Uc: mapslider x: Name = "mapslider1"/>
</Grid>
3. assign values to the Map attribute of the custom control during initialization (in page. xaml. cs ):
Public Page ()
{
InitializeComponent ();
Mapslider1.Map = Map1;
}
At this point, the encapsulation is troublesome, but the encapsulated control is very simple. This is the benefit of Widgets. In the current beta version, SilverlightAPI has completed 5 Widgets encapsulation for us. They are magniier, ToolBar, BookMark, Navigation, MapTip, toolBar uses ToolBarItemCollection, ToolBarItem, and other classes. Let's take an example to see what the controls look like (Click here ):

Download(393.61 KB)

 

MapTip must be used for Query tasks, which will be involved in subsequent sections. Now we are familiar with the usage of these Widgets.
1. ToolBar and Magnifier:
This is the same as the ToolBar (ToolBar) in the development of the ADF. You can add a ToolItem to it to implement various functions, such as translation and scaling. Of course, there must be some nice effects in silverlight. For example, if you place the mouse over the toolbar and select a tool, the effect will be magnified. This effect is default and cannot be set; when you click a tool, the tool will jump. This is the Bounce effect in ToolbarItemClickEffect (currently only the Bounce and None options are available), which is also the default one. In this example, the ToolBar contains three toolbaritems: Pan, FullExtent, and Magnifier. The layout of the ToolBar is as follows:

1. <Grid Height = "110" HorizontalAlignment = "Right" VerticalAlignment = "Top" Margin = ",">
2. <Rectangle Fill = "#22000000" RadiusX = "10" RadiusY = "10" Margin = ","/>
3. <Rectangle Fill = "#775C90B2" Stroke = "Gray" RadiusX = "10" RadiusY = "10" Margin = "0, 0, 5"/>
4. <Rectangle Fill = "#66 FFFFFF" Stroke = "DarkGray" RadiusX = "5" RadiusY = "5" Margin = "10, 10, 15"/>
5. <StackPanel Orientation = "Vertical">
6. <EsriWidgets: Toolbar x: Name = "MyToolbar" MaxItemHeight = "80" MaxItemWidth = "80"
7. VerticalAlignment = "Top" HorizontalAlignment = "Center"
8. ToolbarItemClicked = "MyToolbar_ToolbarItemClicked"
9. ToolbarItemClickEffect = "Bounce"
10. Width = "250" Height = "80">
11. <EsriWidgets: Toolbar. Items>
12. <EsriWidgets: ToolbarItemCollection>
13. <EsriWidgets: ToolbarItem Text = "Pan">
14. <EsriWidgets: ToolbarItem. Content>
15. <Image Source = "img/I _pan.png" Stretch = "UniformToFill" Margin = "5"/>
16. </EsriWidgets: ToolbarItem. Content>
17. </EsriWidgets: ToolbarItem>
18. <EsriWidgets: ToolbarItem Text = "Full Screen">
19. <EsriWidgets: ToolbarItem. Content>
20. <Image Source = "img/I _globe.png" Stretch = "UniformToFill" Margin = "5"/>
21. </EsriWidgets: ToolbarItem. Content>
22. </EsriWidgets: ToolbarItem>
23. <EsriWidgets: ToolbarItem Text = "Full Screen">
24. <EsriWidgets: ToolbarItem. Content>
25. <Image Source = "img/magglass.png" Stretch = "UniformToFill" Margin = "5"
26. MouseLeftButtonDown = "Image_MouseLeftButtonDown"/>
27. </EsriWidgets: ToolbarItem. Content>
28. </EsriWidgets: ToolbarItem>
29. </EsriWidgets: ToolbarItemCollection>
30. </EsriWidgets: Toolbar. Items>
31. </EsriWidgets: Toolbar>
32. <TextBlock x: Name = "StatusTextBlock" Text = "" FontWeight = "Bold" HorizontalAlignment = "Center"/>
33. </StackPanel>
34. </Grid>

Copy code

Then the code-behind content:
Private void MyToolbar_ToolbarItemClicked (object sender, ESRI. ArcGIS. Widgets. SelectedToolbarItemArgs e)
{
Switch (e. Index)
{
Case 0:
// Pan
Break;
Case 1:
Map1.ZoomTo (Map1.Layers. GetFullExtent ());
Break;
Case 2:
Break;
}
}

Private void Image_MouseLeftButtonDown (object sender, MouseButtonEventArgs e)
{
MyMagnifier. Enabled =! MyMagnifier. Enabled;
}
Do not forget to add "MyMagnifier. Initialize (Map1);" to the page constructor );. It can be seen that the Pan tool does not need any code, because the default action of the Map itself is Pan, and FullExtent uses the ZoomTo () of Map (). The Magnifier tool is activated when the image is pressed by the left mouse button (set the enabled attribute), as long as the left mouse button does not hold down the magnifier image, the Widget is set to unavailable. What is more useful is that we can set the magnifier's own layer and magnification separately. Here, the magnifier uses the StreetMap, And the magnification is 3.
2. BookMark:
This function is the same as BookMark In ArcMap (version 9.3). You can set a BookMark for the current map range just like reading a book, so that you can quickly locate the range at other times. Check the Bookmark in the API. mapBookmark class (you can use it to add or delete the content of the bookmarks). You can find that the content stored in each bookmarks is an Extent, and then you can name it again. After the bookmark widget is added, the preview window in vs may fail.
<! -- Bookmark -->
<Canvas>
<EsriWidgets: Bookmark x: Name = "MyBookmarks" Width = "125" HorizontalAlignment = "Left" VerticalAlignment = "Top"
Margin = "20" Background = "#99257194" BorderBrush = "# FF92a8b3" Foreground = "Black"
Loaded = "MyBookmarks_Loaded"/>
</Canvas>
In page. xaml. cs:
Private void MyBookmarks_Loaded (object sender, RoutedEventArgs e)
{
MyBookmarks. Map = Map1;
}
3. Navigation:
This navigation bar tool is currently a must-have control for network maps, but the silverlight function can easily rotate maps (in fact, you can also set it through the Map. Rotation attribute in the Code ). After testing, This widget can only be placed in a StackPanel or Grid container. If it is placed in a Canvas, the map will not be displayed.
<! -- Navigation bar. must be in a stackpanel -->
<StackPanel HorizontalAlignment = "Left" VerticalAlignment = "Bottom">
<EsriWidgets: Navigation x: Name = "MyNavigation" Margin = "5"/>
</StackPanel>
Add the following statement to the page constructor: MyNavigation. Map = Map1 ;.
The Widgets in the API can simplify our work and be used out of the box. But the obvious defect is that it is not flexible. If you want to make your controls not so consistent, You need to develop your own work.
Address: http://bbs.esrichina-bj.cn/ESRI/thread-44555-1-1.html