C# WPF Bing地图展示
程序员文章站
2022-06-22 11:09:18
微信公众号: "Dotnet9" ,网站: "Dotnet9" ,问题或建议,请网站留言; "如果您觉得Dotnet9对您有帮助,欢迎赞赏" 内容目录 1. 实现效果 2. 业务场景 3. 编码实现 4. 本文参考 5. 源码下载 1.实现效果 Bing地图展示界面 2.业务场景 Bing地图控件的 ......
微信公众号:dotnet9,网站:dotnet9,问题或建议,请网站留言;
如果您觉得dotnet9对您有帮助,欢迎赞赏
内容目录
- 实现效果
- 业务场景
- 编码实现
- 本文参考
- 源码下载
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 整理发布,欢迎转载。
转载请注明本文地址:
欢迎扫描下方二维码关注 dotnet9 的微信公众号,本站会及时推送最新技术文章