微信公眾號: "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 整理髮布,歡迎轉載。
轉載請註明本文地址:https://dotnet9.com/6814.html
歡迎掃描下方二維碼關註 Dotnet9 的微信公眾號,本站會及時推送最新技術文章