微信公众号: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控件样式

<Application x:Class="BingMap.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:BingMap"
StartupUri="MainWindow.xaml">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Dark.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.Defaults.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Primary/MaterialDesignColor.Blue.xaml"/>
<ResourceDictionary Source="pack://application:,,,/MaterialDesignColors;component/Themes/Recommended/Accent/MaterialDesignColor.LightBlue.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>

3.4 主窗体 MainWindow.xaml

加载Bing地图控件,设置地图属性等:

<Window x:Class="BingMap.MainWindow"
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:local="clr-namespace:BingMap"
mc:Ignorable="d"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
Title="Bing地图" Height="600" Width="1080" WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen" Background="#FF3A3A3A">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions> <StackPanel Grid.Row="1" Margin="10">
<Grid>
<TextBox Background="White" Padding="10 0 25 0"/>
<materialDesign:PackIcon Kind="MapMarker" VerticalAlignment="Center" Margin="2"/>
<Button HorizontalAlignment="Right" Style="{StaticResource MaterialDesignFlatButton}">
<materialDesign:PackIcon Kind="Search"/>
</Button>
</Grid>
<ListView>
<ListViewItem>
<Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
<Grid>
<StackPanel Height="50">
<TextBlock Text="鸡腿"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
</StackPanel>
<TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
</StackPanel>
<Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
</Grid>
</Border>
</ListViewItem>
<ListViewItem>
<Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
<Grid>
<StackPanel Height="50">
<TextBlock Text="La Casita Grill"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
</StackPanel>
<TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
</StackPanel>
<Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
</Grid>
</Border>
</ListViewItem>
<ListViewItem>
<Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
<Grid>
<StackPanel Height="50">
<TextBlock Text="La Casita Grill"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
</StackPanel>
<TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
</StackPanel>
<Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
</Grid>
</Border> </ListViewItem>
<ListViewItem>
<Border BorderBrush="LightGray" BorderThickness="0 0 0 1" Width="260">
<Grid>
<StackPanel Height="50">
<TextBlock Text="La Casita Grill"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="4.5" Foreground="#DDFF6F0B" Margin="1" FontSize="10"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="Star" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
<materialDesign:PackIcon Kind="StarHalf" Foreground="#DDFF6F0B" Margin="1" VerticalAlignment="Center" Width="12" Height="12"/>
</StackPanel>
<TextBlock Text="Open until 6:00PM" Opacity="0.7"/>
</StackPanel>
<Image HorizontalAlignment="Right" Margin="0 0 50 0" Width="50" Height="50" Source="https://img.dotnet9.com/logo.png"/>
</Grid>
</Border>
</ListViewItem>
</ListView>
</StackPanel> <Button Grid.Column="1" HorizontalAlignment="Right" Style="{StaticResource MaterialDesignFlatButton}">
<materialDesign:PackIcon Kind="Close"/>
</Button> <m:Map Mode="Road" Grid.Column="1" Grid.Row="1" ZoomLevel="16" Center="-23.1870304,-50.6606103">
<Canvas
m:MapLayer.Position="-23.1870304,-50.6606103"
m:MapLayer.PositionOrigin="BottomCenter" Width="30" Height="30">
<materialDesign:PackIcon Kind="MapMarker" Width="30" Height="30" Foreground="#FF3C3C3C"/>
</Canvas>
</m:Map>
</Grid>
</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. asp.net core 3.x 身份验证-3cookie身份验证原理

    概述 上两篇(asp.net core 3.x 身份验证-1涉及到的概念.asp.net core 3.x 身份验证-2启动阶段的配置)介绍了身份验证相关概念以及启动阶段的配置,本篇以cookie身份 ...

  2. Ubuntu下python使用pyenv+virtualenv进行版本和包隔离

    安装pyenv 参考:https://github.com/pyenv/pyenv git clone https://github.com/pyenv/pyenv.git ~/.pyenv echo ...

  3. Comb使用2

    只需添加如下内容 AndroidManifest中添加如下 不要忘记修改application ID与Comb对应 最好不要采用将combSDK lib文件添加到工程中否则可能连接不了Comb 如果添 ...

  4. Codeforces 1060C Maximum Subrectangle(子矩阵+预处理)

    题意:给出数组a,b,组成矩阵c,其中$c_{ij}=a_i*b_j$,找出最的大子矩阵,使得矩阵元素和<=x,求这个矩阵的size n,m<=2000 思路:对于子矩阵(l1...r1) ...

  5. React+wangeditor+node富文本处理带图片上传

    最近有个需求出现在我的视野中,因为我的另外的博客需要上传文章,但是我不想每次都在我的数据库中慢慢的修改格式,所以我另做了一个后台去编辑文本后发送给服务器,那么这里就涉及到两点,一个是富文本,一个是需要 ...

  6. java2变量数据类型和运算符

      public class jh_11_加加减减运算符 { public static void main(String[] args) { int a = 5,b =2 ; a ++;// 对自身 ...

  7. Spark RDD基本概念、宽窄依赖、转换行为操作

    目录 RDD概述 RDD的内部代码 案例 小总结 转换.行动算子 宽.窄依赖 Reference 本文介绍一下rdd的基本属性概念.rdd的转换/行动操作.rdd的宽/窄依赖. RDD:Resilie ...

  8. 常见Bash命令操作

    常见Bash命令操作 查看当前目录 pwd 查看目录下的文件 ls 进入某个目录 cd 返回上一级目录 cd .. 创建一个目录 mkdir abc 创建一个文件 touch a.html 保存文件退 ...

  9. java 获取两个时间之前所有的日期

    正序(2017-01-01 ~2019-xxxxx) package com.founder.util; import java.text.SimpleDateFormat; import java. ...

  10. 量化投资学习笔记27——《Python机器学习应用》课程笔记01

    北京理工大学在线课程: http://www.icourse163.org/course/BIT-1001872001 机器学习分类 监督学习 无监督学习 半监督学习 强化学习 深度学习 Scikit ...