微信公众号：Dotnet9，网站：Dotnet9，问题或建议，请网站留言；

如果您觉得Dotnet9对您有帮助，欢迎赞赏

内容目录

  1. 实现效果
  2. 业务场景
  3. 编码实现
  4. 本文参考
  5. 源码下载

1.实现效果

Bing地图展示界面

2.业务场景

Bing地图控件的使用

3.编码实现

3.1 添加Nuget库

站长使用 .Net Core 3.1 创建的WPF工程，创建“BingMap”解决方案后，需要添加三个Nuget库：MaterialDesignThemes、MaterialDesignColors和Bing WPF地图控件Microsoft.Maps.MapControl.WPF，其中Bing地图控件是.net framework 4.6.1版本，所以项目使用framework版本要好点，其实影响也不大。

MaterialDesign控件库

Bing WPF地图控件Microsoft.Maps.MapControl.WPF

注意

使用bing map地图控件需要注册开发者账号，站长只是按视频教程敲的代码，VS 2019设计器能正常加载地图，但运行时会有提示请注册开发者账号，否则地图无法正常显示

需要注册Bing地图开发者账号

3.2 工程结构

不需要截图，只修改了两个文件，App.xaml添加MD控件样式，MainWindow主窗口实现效果。

3.3 App.xaml引入MD控件样式

  1. <Application x:Class="BingMap.App"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:local="clr-namespace:BingMap"
  5.              StartupUri="MainWindow.xaml">
  6.     <Application.Resources>
  7.         <ResourceDictionary>
  8.             <ResourceDictionary.MergedDictionaries>
  9.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml"/>
  10.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
  11.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
  12.                 <ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml"/>
  13.             </ResourceDictionary.MergedDictionaries>
  14.         </ResourceDictionary>
  15.     </Application.Resources>
  16. </Application>

3.4 主窗体 MainWindow.xaml

加载Bing地图控件，设置地图属性等：

  1. <Window x:Class="BingMap.MainWindow"
  2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  6.         xmlns:local="clr-namespace:BingMap"
  7.         mc:Ignorable="d"
  8.         xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
  9.         xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
  10.         Title="Bing地图" Height="600" Width="1080" WindowStyle="None" ResizeMode="NoResize"
  11.         WindowStartupLocation="CenterScreen" Background="#FF3A3A3A">
  12.     <Grid>
  13.         <Grid.RowDefinitions>
  14.             <RowDefinition Height="40"/>
  15.             <RowDefinition Height="*"/>
  16.         </Grid.RowDefinitions>
  17.         <Grid.ColumnDefinitions>
  18.             <ColumnDefinition Width="250"/>
  19.             <ColumnDefinition Width="*"/>
  20.         </Grid.ColumnDefinitions>
  22.         <StackPanel Grid.Row="1" Margin="10">
  23.             <Grid>
  24.                 <TextBox Background="White" Padding="10 0 25 0"/>
  25.                 <materialDesign:PackIcon Kind="MapMarker" VerticalAlignment="Center" Margin="2"/>
  26.                 <Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignFlatButton}">
  27.                     <materialDesign:PackIcon Kind="Search"/>
  28.                 </Button>
  29.             </Grid>
  30.             <ListView>
  31.                 <ListViewItem>
  32.                     <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
  33.                         <Grid>
  34.                             <StackPanel Height="50">
  35.                                 <TextBlock Text="鸡腿"/>
  36.                                 <StackPanel Orientation="Horizontal">
  37.                                     <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
  38.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  39.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  40.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  41.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  42.                                     <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  43.                                 </StackPanel>
  44.                                 <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
  45.                             </StackPanel>
  46.                             <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
  47.                         </Grid>
  48.                     </Border>
  49.                 </ListViewItem>
  50.                 <ListViewItem>
  51.                     <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
  52.                         <Grid>
  53.                             <StackPanel Height="50">
  54.                                 <TextBlock Text="La Casita Grill"/>
  55.                                 <StackPanel Orientation="Horizontal">
  56.                                     <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
  57.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  58.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  59.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  60.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  61.                                     <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  62.                                 </StackPanel>
  63.                                 <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
  64.                             </StackPanel>
  65.                             <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
  66.                         </Grid>
  67.                     </Border>
  68.                 </ListViewItem>
  69.                 <ListViewItem>
  70.                     <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
  71.                         <Grid>
  72.                             <StackPanel Height="50">
  73.                                 <TextBlock Text="La Casita Grill"/>
  74.                                 <StackPanel Orientation="Horizontal">
  75.                                     <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
  76.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  77.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  78.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  79.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  80.                                     <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  81.                                 </StackPanel>
  82.                                 <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
  83.                             </StackPanel>
  84.                             <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
  85.                         </Grid>
  86.                     </Border>
  88.                 </ListViewItem>
  89.                 <ListViewItem>
  90.                     <Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
  91.                         <Grid>
  92.                             <StackPanel Height="50">
  93.                                 <TextBlock Text="La Casita Grill"/>
  94.                                 <StackPanel Orientation="Horizontal">
  95.                                     <TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
  96.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  97.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  98.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  99.                                     <materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  100.                                     <materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
  101.                                 </StackPanel>
  102.                                 <TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
  103.                             </StackPanel>
  104.                             <Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
  105.                         </Grid>
  106.                     </Border>
  107.                 </ListViewItem>
  108.             </ListView>
  109.         </StackPanel>
  111.         <Button Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource MaterialDesignFlatButton}">
  112.             <materialDesign:PackIcon Kind="Close"/>
  113.         </Button>
  115.         <m:Map Mode="Road" Grid.Column="1" Grid.Row="1" ZoomLevel="16" Center="-23.1870304,-50.6606103">
  116.             <Canvas
  117.                 m:MapLayer.Position="-23.1870304,-50.6606103"
  118.                 m:MapLayer.PositionOrigin="BottomCenter" Width="30" Height="30">
  119.                 <materialDesign:PackIcon Kind="MapMarker" Width="30" Height="30" Foreground="#FF3C3C3C"/>
  120.             </Canvas>
  121.         </m:Map>
  122.     </Grid>
  123. </Window>

4.本文参考

Design com WPF 大神的学习视频：Bing Maps


开源控件库：MaterialDesignInXamlToolkit


本站对MD开源控件库的介绍：控件介绍

5.代码下载

文中代码已经全部给出。

除非注明，文章均由 Dotnet9 整理发布，欢迎转载。


转载请注明本文地址：https://dotnet9.com/6814.html


欢迎扫描下方二维码关注 Dotnet9 的微信公众号，本站会及时推送最新技术文章


C# WPF Bing地图展示的更多相关文章

  1. 翻译：Bing地图瓦片体系

    Bing Maps Tile System Bing地图瓦片体系 原文链接:http://msdn.microsoft.com/en-us/library/bb259689.aspx Bing Map ...

  2. Bing地图切片原理

    Bing地图切片系统 Bing地图提供了一个可以直接平移和缩放的世界地图.为了让地图操作更加平滑和及时响应,我们选择提前渲染地图不同层级的细节,并把每个层级的地图切割成为瓦片以便快速的还原展示.这篇文 ...

  3. LBS数据分析：使用地图展示统计数据——麻点图与麻数图

    作为一个LBS的APP,都获得了用户经纬度,也都使用了友盟统计.google ana等等统计分析系统,不过没有地图展示功能,不能进行直观的展示. 友盟统计.google ana等系统是总体数据统计,无 ...

  4. silverlight调用bing地图 和 显示中文地图

    bing地图sdk: https://msdn.microsoft.com/en-us/library/ff428643.aspx 引用dll:https://www.microsoft.com/en ...

  5. 【iOS】7.4 定位服务->3.1 地图框架MapKit 功能1：地图展示

    > 本文并非最终版本,如果想要关注更新或更正的内容请关注文集,联系方式详见文末,如有疏忽和遗漏,欢迎指正. --- > 本文相关目录: ================== 所属文集:[[ ...

  6. 基于MySQL + Node.js + Leaflet的离线地图展示，支持百度、谷歌、高德、腾讯地图

    1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...

  7. openlayers4 入门开发系列之地图展示篇（附源码下载）

    前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...

  8. Echarts地图展示及属性分析

    Echarts,一个效果非常棒的可视化库,可以生产各种图表,动态展示,附上官方网址:http://www.echartsjs.com/index.html 之前带本科实习时有同学用过,狗哥的博客也用这 ...

  9. 【Android】3.5 示例5--多地图展示

    分类:C#.Android.VS2015.百度地图应用: 创建日期:2016-02-04 3.5 示例5--多地图展示 一.简介 地图控件自v2.3.5版本起,支持多实例,即开发者可以在一个页面中建立 ...

随机推荐

  1. 如何为wordpress 的文章添加分页

    原文参考:http://www.wpdaxue.com/add-next-page-button-wordpress-post-editor.html 1.在编辑文章时切到text 模式,然后加上&l ...

  2. AI: 如何用钢笔工具画曲线

    AI 可以用来绘制矢量图片. 点击钢笔工具,点击画图会画出直线,点击拖拉画图会画出曲线. 锚点的摆放位置在侧面而非顶端. 控制柄越长,图形越尖锐. 画圆时控制柄长度控制在两点之间1/3 长度. 使用的 ...

  3. hadoop 日常使用记录

    1.Hadoop分布式文件系统(HDFS) HDFS基于GFS(Google File System),能够存储海量的数据,并且使用分布式网络客户端透明访问. HDFS中将文件拆分成特定大小的块结构( ...

  4. Spark Streaming运行流程及源码解析（一）

    本系列主要描述Spark Streaming的运行流程,然后对每个流程的源码分别进行解析 之前总听同事说Spark源码有多么棒,咱也不知道,就是疯狂点头.今天也来撸一下Spark源码. 对Spark的 ...

  5. Elemetary OS deepin-wine 版 微信 和 企业微信 输入框字体显示异常解决

    Elemetary OS deepin-wine 版 微信 和 企业微信 输入框字体显示异常解决 最近体验了Elementary OS 这个系统, 话说我之前都是用的Manjora 的各个桌面版, 突 ...

  6. （转载）Linux平台下安装 python 模块包

    https://blog.csdn.net/aiwangtingyun/article/details/79121145 一.安装Python Windows平台下: 进入Python官网下载页面下载 ...

  7. 使用Java, AppleScript对晓黑板进行自动打卡

    使用Java, AppleScript对晓黑板进行自动打卡 由于我们学校要求每天7点起床打卡,但是实在做不到,遂写了这个脚本. 绪论 由于晓黑板不支持网页版,只能使用App进行打卡,所以我使用网易的安 ...

  8. centos输入正确密码后依旧无法登陆问题

    输入正确用户名和密码时依旧无法登录. 进入单用户模式重置密码: 开机启动时,按‘E’键(倒计时结束前)进入界面 选择第二项,按‘E’键再次进入 在最后一行添加‘ 1’(空格 1) 回车键保存,回到该界 ...

  9. 小浩算法|一文让你学会如何用代码判断"24"点

    “24点”是一种数学游戏,正如象棋.围棋一样是一种人们喜闻乐见的娱乐活动.它始于何年何月已无从考究,但它以自己独具的数学魅力和丰富的内涵正逐渐被越来越多的人们所接受.今天就为大家分享一道关于“24点” ...

  10. 【Web性能权威指南】 PDF

    Web性能权威指南.pdf 网盘:https://545c.com/file/24657411-424998805     获取码:276922