Windows Phone - 深入使用Bing Map - 客製Pushpin | Pou's IT Life - 點部落

2012-07-15

Windows Phone - 深入使用Bing Map - 客製Pushpin

6940
0
Windows Phone
2013-06-24

Windows Phone - 深入使用Bing Map - 客製Pushpin

在<Windows Phone 7 - 學習Location Service與Map地圖>介紹過相關使用Bing Map後，我自己遇到在撰寫Bing Map

時還是一些相關的問題，因此，特別將使用過程裡遇到的問題與相關功能做了一個整理。

〉. 自訂Pushpin控件：

Pushpin提供開發人員可增加圖標至地圖中，可透過ContentTemplate、Content、Background等項目來調整樣式，並且

配合Tap或DoubleTap事件，補捉到用戶點擊的是那一個Pushpin，並配合自訂的Tip或Content來顯示圖標內容。

(A). 重要屬性與事件：

‧ 屬性：

名稱	說明
Background	設定/取得背景顏色。可提供簡易調整Pushpin的色系，來代表不同的圖標。
Content	設定/取得Pushpin繼承ContentControl的屬性值。可放入多種物件，例如：string、UIElement，甚至DateTime。 Content是ContentPresenter的屬性，也可用於自訂要設定的值如何加以呈現。設定了ContentPresent後，它會自動與ContentTemplate、Content自動binding。可詳細可參考<Customizing the Appearance of an Existing Control by Using a ControlTemplate>。
ContentTemplate	設定/取得Data Template用於呈現ContentControl的Content。每一個UIElement均有預設的ContentTemplate，可透過XAML的方式自行調整，或配合ContentPresenter調整資料Binding對象，產生新的外貌，但是無法改變原始事件功能。
Location	設定/取得Pushpin在地圖上的座標。

上述四個屬性裡，個人覺得Content與ContentTemplate是最值得注意的地方，尤其是對開發人員，因為透過XAML

即可以調整這些內容，但有時會後想透過程式來改反而變成更複雜，非常建議先了解Content與ContentTemplate

的原理，可以透過定義與動態引入的方式，讓程式更活用。

‧ 事件：

名稱	說明
onTap	觸發控件被輕拍(Tap)的事件。這個事件與之前看過的<How to: Handle Manipulation Events>有更詳細的說明。
onDoubleTap	觸發控件被連續二次輕拍(Tap)的事件。

以上事件是處理當點擊圖標時，希望出現有Tip或相關應用時可以使用，由於Pushpin本身沒有OnClick的事件，

因此，可以透過上述二個事件來互相搭配完成任務。

(B). 點擊Pushpin時，出現一個提示框：

在實作前，如果您跟我一樣對ContentTemplate不清楚的話，可以先參考這一篇<Windows Phone 7 - 淺談Custom Control>

我將學習過程對ContentTemplate的暸解配合MSDN上說明加以描述，希望對接下來的範例說明有所幫助。

引用<Windows Phone Pushpin Custom Tooltip: Different Techniques>的範例，將它修改成支援簡單動態產生Pushpin時可以使用。

B-1. 擷取範例：將定義好的ContentTemplate擷取出來；

<!-- 直接修改Pushpin的ContentTemplate -->
		
<my:Pushpin x:Name="pushPin" Tap="pushPin_Tap" >
		
    <my:Pushpin.Template>
		
        <ControlTemplate TargetType="my:Pushpin">
		
            <StackPanel>
		
                <ContentPresenter x:Name="content" HorizontalAlignment="Center"
		
                              Content="{TemplateBinding Content}"
		
                             />
		
                <!-- 定義Path呈現對話框的尾端, 注意Visibility的呈現方式-->
		
                <Path 
		
                    Data="M0,0 L0,1 L1,0"
		
                    Fill="{TemplateBinding Background}"
		
                    Stretch="Fill"
		
                    Margin="32,0"
		
                    Height="12"
		
                    Width="18"
		
                    Visibility="{Binding RelativeSource={RelativeSource TemplatedParent},
		
                        Path=Content.Visibility, Mode=TwoWay}"
		
                        HorizontalAlignment="Left" />
		
                <Image Source="MapPin.png" Stretch="None" HorizontalAlignment="Left"/>
		
            </StackPanel>
		
        </ControlTemplate>
		
    </my:Pushpin.Template>
		
    <my:Pushpin.Content>
		
        <!-- 定義OnTap時要呈現的內容，預設Visibility = Collapsed-->
		
        <Border Background="Black"  Width="200" Visibility="Collapsed" x:Name="border"  HorizontalAlignment="Center" >
		
            <StackPanel Orientation="Horizontal">
		
                <TextBlock Text="Test" Margin="10"/>
		
                <Image Source="Images/appbar.cup.png" Stretch="None" />
		
                <Image Source="Images/appbar.gas.png" Stretch="None"/>
		
                <Image Source="Images/appbar.home.png" Stretch="None" />
		
            </StackPanel>
		
        </Border>
		
    </my:Pushpin.Content>
		
</my:Pushpin>

上述客製的ContentTemplate定義了Pushpin的呈現方式，它重新定義了Path物件讓它可支援圖標的引入，加上Content是可自行填入的內容。

尤其是：「Path element: Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content.Visibility, Mode=TwoWay}".」是

產生箭頭的重點。

B-2. 修改方式：先將上述的ContentTemplate整理成通用的結構，並在App.xaml中加上Pushpin的ContentTemplate；

<!-- //20120715.. ..Pou：增加Pushpin的客製ContentTemplate-->
		
<!--Application Resources-->
		
<Application.Resources>
		
    <ControlTemplate TargetType="my:Pushpin" x:Key="CustomPushPin">
		
        <StackPanel>
		
            <ContentPresenter x:Name="content"
		
                              HorizontalAlignment="Center" 
		
                              Content="{TemplateBinding Content}" />
		
            <!-- 保留原有的Path設定內容 -->
		
            <Path 
		
                Data="M0,0 L0,1 L1,0"
		
                Fill="{TemplateBinding Background}"
		
                Stretch="Fill"
		
                Margin="32,0"
		
                Height="12"
		
                Width="18"
		
                Visibility="{Binding RelativeSource={RelativeSource TemplatedParent},
		
                Path=Content.Visibility, Mode=TwoWay}"
		
                HorizontalAlignment="Left" />
		
            <Image Source="/AliceDontLeave;component/Images/iconpoint.png" 
		
                   Stretch="Fill" Width="26" Height="35"
		
                   HorizontalAlignment="Left"/>
		
        </StackPanel>
		
    </ControlTemplate>
		
</Application.Resources>

修改B-1的內容，去掉定義Pushpin的Content，其原因是內容需要動態產生，在ContentTemplate無法定義，因此移動至B-3的動態程式裡。

B-3. 修改方式：建立Pushpin、動態引入ContentTemplate、加上OnTap的事件；

/// <summary>
		
/// 將地轉換成的座標加入Pushpin，並且套用新的ContentTempalte與OnTap事件。
		
/// </summary>
		
/// <param name="pGAddressPoint"></param>
		
private void PinAlicePoint(List<GAddressPoint> pGAddressPoint)
		
{
		
    //產生一個MapLayer來加入Pushpin
		
    MapLayer tMapLayer = new MapLayer();   
		
    foreach (GAddressPoint tItem in pGAPItem)
		
    {
		
        Pushpin tPpItem = new Pushpin();
		
        //套用定義好的ContentTemplate
		
        tPpItem.Template = (ControlTemplate)Application.Current.Resources["CustomPushPin"];
		
        //呼叫建立ToolTip的內容
		
        tPpItem.Content = BuildPushPinContent(tItem);
		
        //註冊OnTap的事件
		
        tPpItem.Tap += new EventHandler<System.Windows.Input.GestureEventArgs>(pushPin_Tap);
		
        //指定Pushpin的座標
		
        tPpItem.Location = new GeoCoordinate(double.Parse(tItem.gtag_latitude),
		
                                             double.Parse(tItem.gtag_longitude));                
		
        tMapLayer.Children.Add(tPpItem);
		
    }
		
    map1.Children.Add(tMapLayer);
		
    map1.ZoomLevel = 12;
		
}
		
  
		
/// <summary>
		
/// 將GAdressPoint轉成Pushpin的Content。
		
/// </summary>
		
/// <param name="pEntity">GAdressPoint</param>
		
/// <returns>Border</returns>
		
private Border BuildPushPinContent(GAdressPoint pEntity)
		
{
		
    //將範例中定義的Content透過動態程式加以產生
		
    Border tBorder = new Border
		
    {
		
        //Width = 300,
		
        Visibility = System.Windows.Visibility.Collapsed,
		
        Name = "border",
		
        HorizontalAlignment = System.Windows.HorizontalAlignment.Center
		
    };
		
    StackPanel tStakPanel = new StackPanel
		
    {
		
        Orientation = System.Windows.Controls.Orientation.Vertical,
		
        Background = new SolidColorBrush(Colors.Black)          
		
    };
		
    TextBlock tAddress = new TextBlock
		
    {
		
        Margin = new Thickness(5, 0, 0, 0),
		
        Text = pEntity.xaddress,
		
        TextWrapping = TextWrapping.Wrap
		
    };              
		
    tStakPanel.Children.Add(tAddress);
		
    tBorder.Child = tStakPanel;
		
    return tBorder;
		
}

沿用<Windows Phone 7 - 使用Google Map API將地址轉成座標>撰寫的範例，將地址轉換出來的座標繪制於地圖上。

在動態引入ContentTemplate時，可參考[13行]的程式段，將定義好的ContentTemplate指定給Pushpin.Template屬性，

並且透過ControlTemplate型別加以轉換。

B-4. 註冊OnTap事件、Map控件的OnTap事件；

private Pushpin gCurrenTipPushpin = null;
		
  
		
void pushPin_Tap(object sender, System.Windows.Input.GestureEventArgs e)
		
{
		
    //處理在用戶點擊了Pushpin，顯示其Content的內容。
		
    gCurrenTipPushpin = sender as Pushpin;
		
    Border tUC = (Border)gCurrenTipPushpin.Content;
		
    tUC.Visibility = System.Windows.Visibility.Visible;
		
    e.Handled = true;
		
}
		
  
		
private void map1_Tap(object sender, System.Windows.Input.GestureEventArgs e)
		
{
		
    //處理在用戶地圖其他地方，隱藏目前顯示的Content內容。
		
    if (gCurrenTipPushpin != null)
		
    {
		
        Border tUC = (Border)gCurrenTipPushpin.Content;
		
        tUC.Visibility = System.Windows.Visibility.Collapsed;
		
        gCurrenTipPushpin = null;
		
    }
		
}