[Silverlight] BingMap中Zoomlevel 數值與Slider連動(修正Touch Panel會卡卡的問題)

2010/08/18

一不小心又得發一篇跟Bing Map有關的,因為這是遇到的Bug..

修正了..就想說紀錄一下 ..

 

在BingMap中,用Silverlight去操控他的ZoomLevel 很簡單..

而且要去Binding Slider物件的value 也很簡單,至少Google 上面..

可以找得到解決方案…

 

但是..因為最近專案的關係,有涉及到觸控螢幕,就會發現Slider 在連動上面會卡卡的..

花了一點時間修正…

就想說順便寫一篇好了注意到這東西的人蠻少的..

好險公司有一台觸控螢幕…

 

物件配置介紹:

 

sshot-34

 

利用下面的sldMapZoomController 物件去控制 mainMap的ZoomLevel…

 

如果對於插入Bing Map有問題可以參考 這篇 (第一次用Silverlight Bing Map 就上手) .

 

XAML Code 如下:

 

<UserControl x:Class="ZoomMapMemo.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:my="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl" mc:Ignorable="d"
    d:DesignHeight="650" d:DesignWidth="550">
 
    <Grid x:Name="LayoutRoot" Background="White"  VerticalAlignment="Top" 
          Width="550" Height="650" Loaded="LayoutRoot_Loaded">
        
        <my:Map Name="mainMap"  CredentialsProvider="AhkMeJNiD6a8JSGoC2QIHe47XzBhLqzH_y34nDsbv5kIEbBrEZ9WY_hG4x1DZnd-" 
                VerticalAlignment="Top" Height="585" />
        
        <Slider Height="41" HorizontalAlignment="Center" Margin="74,0,72,0" Name="sldMapZoomController" 
                VerticalAlignment="Bottom"  FontSize="15"  Width="404" Maximum="20" Minimum="1" />
        
        
    </Grid>
</UserControl>

 

再來就是C# Code 部分…

提示我寫在註解裡面..

 

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
using Microsoft.Maps.MapControl;
 
namespace ZoomMapMemo
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
 
        private int  _mapViewLevelControl=1;
 
        public int MapViewLevelControl
        {
            set
            {
                //讓_mapViewLevelControl 連動
                _mapViewLevelControl = value;
                //讓地圖的Zoom連動
                mainMap.ZoomLevel = value;          
                //讓Slider連動
                sldMapZoomController.Value = value;
            }
            get
            {
                return _mapViewLevelControl;
            }
        }
 
        private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
        {
            //重點是下面兩行的Event,讓touch panel 可以也很順暢連動
            //有關於使用手指手勢放大縮小時所觸發
            mainMap.TouchZoom += mainMap_TouchZoom;
            //如果View改變的時候所觸發
            mainMap.ViewChangeEnd += mainMap_ViewChangeEnd;
 
            //一般只要做到這下述兩行就可以成功了
            mainMap.MouseWheel += mainMap_MouseWheel;
            sldMapZoomController.ValueChanged += mapControlSlider_ValueChanged;
            
           
        }
 
 
        void mainMap_ViewChangeEnd(object sender, MapEventArgs e)
        {
            MapViewLevelControl = Convert.ToInt16(mainMap.ZoomLevel);
        }
        void mapControlSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
        {
            MapViewLevelControl = Convert.ToInt16(sldMapZoomController.Value);
        }
        void mainMap_MouseWheel(object sender, MouseWheelEventArgs e)
        {
            MapViewLevelControl = Convert.ToInt16(mainMap.ZoomLevel);
        }
        void mainMap_TouchZoom(object sender, MapTouchZoomEventArgs e)
        {
            MapViewLevelControl = Convert.ToInt16(mainMap.ZoomLevel);
        }
      
    }
}

 

 

 

有關於觸控的部分就在於要多加兩個Event 的處理..

TouchZoom 還有 ViewChangeEnd

 

這樣對於觸控部分連動就會比較順暢…

 

範例:

Get Microsoft Silverlight

讚一下:

 

 

範例下載:



0 意見:

程式 . 生活 . D小調.@2010 | Binary Design: One Winged Angel.