C# WPF Bing地圖展示

信公眾號：Dotnet9，網站：Dotnet9，問題或建議，請網站留言；如果您覺得Dotnet9對您有幫助，歡迎贊賞

內容目錄

實現效果
業務場景
編碼實現
本文參考
源碼下載

1.實現效果

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

oogle Lens 讓使用者可以簡單把手機的相機照向物件，就會自動到谷歌搜索到相關的信息，這個點子似乎也引起了微軟的興趣了。微軟最新為他們的 Bing 搜索引擎帶來相似的能力，在相關聯的產品上都可以利用相機（或相片）來進行圖像搜索，在帶來相關結果之外，微軟還加入了價錢和商店位置等的購物信息呢。

目前這物件辨識搜索的功能，已經加入到美國區的 Bing app 讓 iOS 和 Android 設備使用，Android 版的 Microsoft Launcher 當然也沒有錯過。iOS 版本的 Edge 瀏覽器和網頁版 Bing 則將會在之后再補上。雖然使用上似乎比不上實時辨識的方式，不過這也算是向 Google 示威的動作吧。

原文來自：https://www.linuxprobe.com/bing-distinguish.html

在線咨詢

上一篇：HTML DOM INPUT FILE 大文件上傳方法
下一篇：六款好用的Mac最流行的開發工具

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商