利用ScrollViewer，Canvas加上自制控件对Maps进行模拟

      这几天在做一个win8 的metro style app，用的是一个手绘地图（其实也就是一张image而已），由于缺少各种地理坐标什么，想实现各种类似于现有的地图api的功能，实在有些不知道方向。

　　在网上查了一下，更多的重新创建一个地图的方法是用来给MapObject赋予新的内涵，而这对于仅仅只有一张图片规模较小，又缺乏经纬度数据的来说就是一件不可能完成的任务。研究了一下win8给的布局，觉得可以用ScrollViewer加上Canvas来进行对地图上MapLayer控件位置的管理的模拟。Canvas提供给图片类似于地图上经纬度的定位。而ScrollViewer则可以模拟地图的缩放功能，虽然不能做的像GoogleMap那种精度，但对于小规模的提供一张分辨率较高的图片则可以进行一定程度上的模拟。MapLayer控件的模拟则可以自己进行定义。

　　下面是我的例程。（c#）

 1 　　<ScrollViewer x:Name="MainScrollViewer"
 2                        HorizontalAlignment="Left" 
 3                        VerticalScrollBarVisibility="Auto" 
 4 　　　　　　　　　　　　　 HorizontalScrollBarVisibility="Auto" 
 5                        ZoomMode="Enabled" MinZoomFactor="1" 
 6 　　　　　　　　　　　　　　Width="1206" 
 7 　　　　　　　　　　　　　　Margin="10,0,0,0" 
 8 　　　　　　　　　　　　　　Grid.RowSpan="2">
 9             <Canvas x:Name="ContentCanvas" Width="1400" Height="900" >
10             　　<Image x:Name ="ContentImage" 
11 　　　　　　　　　　　　　AutomationProperties.Name="Image of a cliff"  
12 　　　　　　　　　　　　　HorizontalAlignment="Left"  
13 　　　　　　　　　　　　　VerticalAlignment="Top" 
14 　　　　　　　　　　　　　Stretch="UniformToFill" 
15 　　　　　　　　　　　　　Width="1400" 
16 　　　　　　　　　　　　　Height="900"/>
17             </Canvas>
18 　　</ScrollViewer>

 

　　

　　模仿MapLayer的控件：

　　例如放置一个重写后的StackPanel（MapLayerSimulation），里面置入Button和TextBlock，则可以模拟MapLayer

　　

                    FrameworkElement element = (FrameworkElement)MapLayerSimulation;
                    ContentCanvas.Children.Add(MapLayerSimulation);
                    element.SetValue(Canvas.TopProperty, MapLayerSimulation.getPosX());
                    element.SetValue(Canvas.LeftProperty, MapLayerSimulation.getPosY());

　　

　　在MapLayerSimulation中的x，y坐标进行对应ContentImage上在Canvas上显示的坐标进行映射即能模仿类似于MapLayer在Maps上的显示。

　　同时在ScrollViewer下能进行对Canvas上内容的防缩，同时不改变其MapLayer在Image地图上的相对位置。

 

 

 

　　小弟略菜，希望大神们指正。

posted @ 2012-05-12 14:09  failedworld  阅读(494)  评论(0)  编辑  收藏  举报