zoukankan      html  css  js  c++  java
  • 【Silverlight】Bing Maps开发应用与技巧六:使用样式美化图钉(Pushpin)控件的ToolTip外观

      在使用Bing Maps Silverlight Control进行Bing Maps开发中,图钉(Pushpin)标注控件的使用频率是非常之高,多数情况下都会使用其ToolTip特性来呈现一些数据信息,但默认的ToolTip外观并不完美,显得格外的难看。于此需要开发者自己实现其漂亮的外观界面,本篇将由浅入深的带你走入图钉(Pushpin)控件的ToolTip外观美化之路。

      

      之前我曾写过一篇自定义图钉控件和信息提示面板的文章《【Silverlight】Bing Maps开发应用与技巧二:自定义图钉标注控件和动态ToolPanel 》,里面详细介绍了如何自定义实现图钉控件功能,以及其信息提示面板(ToolPanel)的使用等,本篇将介绍如何通过样式对Bing Maps Silverlight Control内置的图钉控件的ToolTip外观进行美化。

      在默认的情况下,通常是使用如下方式进行设置其ToolTip的内容:

    var pushpin = new Pushpin();
    ToolTipService.SetToolTip(pushpin, 
    "这里是图钉控件ToolTip内容!");

    MapLayer.AddChild(pushpin, 
    new Location(29.5076372217973106.489384971208));

      默认的ToolTip外观非常难看,开发者可以通过定义样式去改变其他外观呈现效果,比如定义为下面样式代码:

    <Style x:Key="PushpinStyle" TargetType="ToolTip">
        
    <Setter Property="Background" Value="Transparent" />
        
    <Setter Property="BorderBrush" Value="Transparent" />
        
    <Setter Property="BorderThickness" Value="0" />
        
    <Setter Property="Template">
            
    <Setter.Value>
                
    <ControlTemplate>
                    
    <Border CornerRadius="5">
                        
    <Border.Background>
                            
    <SolidColorBrush Color="Black" Opacity="0.5"/>
                        
    </Border.Background>
                        
    <ContentPresenter Margin="5">
                            
    <ContentPresenter.Content>
                                
    <StackPanel Margin="5" MaxWidth="200" MinHeight="80">
                                    
    <TextBlock Text="这里是图钉控件ToolTip内容!"  FontSize="12" Foreground="White"/>
                                
    </StackPanel>
                            
    </ContentPresenter.Content>
                        
    </ContentPresenter>
                    
    </Border>
                
    </ControlTemplate>
            
    </Setter.Value>
        
    </Setter>
    </Style>

       那么在设置对象的ToolTip的时候就只需要动态的给ToopTip引用上面定义的样式就行了,可以通过如下代码的方式调用自定义的样式。

    var pushpin = new Pushpin();
    ToolTipService.SetToolTip(pushpin, 
    new ToolTip()
    {
        Style 
    = Application.Current.Resources["PushpinStyle"as Style
    });

    MapLayer.AddChild(pushpin, 
    new Location(29.5076372217973106.489384971208));

      其最终的运行效果如下图所示:

             

      注:本篇是根据网上文章简单翻译而成,主要借鉴其实现思想并加入了相关描述,其原文链接如下:

      http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!1151.entry 

    相关说明

     本文属于翻译文章,愿与有志者共同学习交流。欢迎转载,但请在明显地位标记本文的原文连接。  

     译      者:Beniao

     文章出处:http://beniao.cnblogs.com/  或  http://www.cnblogs.com/

  • 相关阅读:
    [原] KVM 虚拟化原理探究(6)— 块设备IO虚拟化
    [原] KVM 虚拟化原理探究(5)— 网络IO虚拟化
    [原] KVM 虚拟化原理探究(4)— 内存虚拟化
    [原] KVM 虚拟化原理探究(3)— CPU 虚拟化
    [原] KVM 虚拟化原理探究(2)— QEMU启动过程
    [原] KVM虚拟机网络闪断分析
    [原] KVM 环境下MySQL性能对比
    [源]云计算技术堆栈系列——鸟瞰
    [原] 利用 OVS 建立 VxLAN 虚拟网络实验
    [原] Cgroup CPU, Blkio 测试
  • 原文地址:https://www.cnblogs.com/beniao/p/1751107.html
Copyright © 2011-2022 走看看