Bing Maps and OData (part 5)

Navigation

This is the last post from a series that talked about Bing Maps and OData. I’ve told you how to retrieve and how to consume the OData in here, how to create the ViewModel that will be used for data binding in here, and how to create the Child Window in here. Finally, in this post I will show you how to make the main UX for the NerdDinner web application. Just copy and paste the code below to your MainPage.xaml.

        1: <UserControl x:Class="BingMapsOData.MainPage"

       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:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"

       6:     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

       7:     xmlns:local="clr-namespace:BingMapsOData"

       8:     xmlns:m="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"

       9:     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"

    mc:Ignorable="d"

    d:DesignHeight="300" d:DesignWidth="400">

    

    <UserControl.Resources>

        <DataTemplate x:Key="DinnerTemplate">

            <m:Pushpin Name="DinnerPushpin" m:MapLayer.Position="{Binding Location}" Content="{Binding Attendees}">

                <i:Interaction.Triggers>

                    <i:EventTrigger EventName="MouseLeftButtonDown">

                        <local:ShowChildWindowAction ChildWindowType="BingMapsOData.DetailsChildWindow"/>

                    </i:EventTrigger>

                </i:Interaction.Triggers>

                <ToolTipService.ToolTip>

                    <StackPanel>

                        <StackPanel Margin="2" Orientation="Horizontal">

                            <Image Source="Images/dinner.png" Width="16" Height="16"/>

                            <TextBlock Text="{Binding Title}" Padding="2" FontWeight="Bold" TextWrapping="Wrap"/>

                        </StackPanel>

                        <TextBlock Text="{Binding Date}" Padding="2" Margin="2" TextWrapping="Wrap"/>

                        <TextBlock Text="{Binding Address}" Padding="2" Margin="2" TextWrapping="Wrap"/>

                        <TextBlock Text="Click Pushpin for details" Foreground="Gray" Padding="2" Margin="2" TextWrapping="Wrap"/>

                    </StackPanel>

                </ToolTipService.ToolTip>

            </m:Pushpin>

        </DataTemplate>

    </UserControl.Resources>

  

    <Grid x:Name="LayoutRoot" Background="Black">

        <Grid.RowDefinitions>

            <RowDefinition Height="40"/>

            <RowDefinition Height="37"/>

            <RowDefinition Height="*"/>

            <RowDefinition Height="20"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition />

            <ColumnDefinition Width="Auto" />

        </Grid.ColumnDefinitions>

        

        <m:Map x:Name="dinnerMap"

               Grid.Row="0" Grid.RowSpan="3"

               Grid.Column="0" Grid.ColumnSpan="2"

               CacheMode="BitmapCache"

               CredentialsProvider="{StaticResource MyCredentials}"

               Mode="AerialWithLabels"

               NavigationVisibility="Collapsed">

            <m:MapItemsControl x:Name="dinnerList"

                               ItemTemplate="{StaticResource DinnerTemplate}"

                               ItemsSource="{Binding Dinners}">

            </m:MapItemsControl>

        </m:Map>

  

        <StackPanel Grid.Row="0" Grid.Column="0" Background="Black" Opacity="0.8">

            <StackPanel Orientation="Horizontal">

                <TextBlock Text="Nerd Dinner Browser" FontSize="20" Padding="6" Foreground="White"/>

                <TextBlock Text="{Binding Status}" FontSize="14" Padding="12" Foreground="LightGray" Name="txtStatus" >

                    <TextBlock.Triggers>

                    </TextBlock.Triggers>

                </TextBlock>

            </StackPanel>

        </StackPanel>

  

        <StackPanel Grid.Row="1" Grid.Column="0">

            <Border BorderThickness="1" BorderBrush="LightGray" Background="LightGray" CornerRadius="5" Padding="5" Margin="1">

                <StackPanel Orientation="Horizontal">

                    <TextBlock Text="Dinners From " Padding="4"/>

                    <controls:DatePicker SelectedDate="{Binding From, Mode=TwoWay}" Name="dtFrom" Width="130"/>

                    <TextBlock Text=" To " Padding="4"/>

                    <controls:DatePicker SelectedDate="{Binding To, Mode=TwoWay}" Name="dtTo" Width="130"/>

                    <TextBlock Text=" Near " Padding="4"/>

                    <TextBox Name="txtPlace" ToolTipService.ToolTip="Optional, Leave blank for a high level view" Width="130"/>

                    <Button Name="SearchDinners" Click="SearchDinners_Click" Margin="1" Padding="3">

                        <StackPanel Orientation="Horizontal" >

                            <Image Source="Images/dinner.png" Width="16" Height="16"/>

                            <TextBlock Text=" Grab The Dinners "/>

                        </StackPanel>

                    </Button>

                    <TextBlock Width="6"/>

                    <StackPanel Background="Gray" Width="2" Margin="2"/>

                </StackPanel>

            </Border>

        </StackPanel>

  

        <Canvas x:Name="cMiniMap" 

                Width="150" 

                Height="150" 

                HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Top" Grid.Row="2" >

            <m:Map x:Name="MiniMap" 

                   CredentialsProvider="{StaticResource MyCredentials}"

                   CacheMode="BitmapCache"

                   Width="150" 

                   Height="150" 

                   Mode="Road" 

                   NavigationVisibility="Collapsed" 

                   ScaleVisibility="Collapsed" 

                   LogoVisibility="Collapsed"

                   CopyrightVisibility="Collapsed" Foreground="{x:Null}">

                <m:Map.Clip>

                    <EllipseGeometry RadiusX="69" RadiusY="69" Center="75,75" />

                </m:Map.Clip>

            </m:Map>

            <Ellipse Width="150" Height="150" Stroke="#CC4C4C4C" StrokeThickness="6" Margin="0,0,0,0" CacheMode="BitmapCache" />

            <Ellipse Height="10" Width="10" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="70,70,0,0" x:Name="ellipse" Fill="#CC205A5B" />

        </Canvas>

  

        <Canvas x:Name="cNavControl" 

                Width="100" 

                HorizontalAlignment="Left" 

                VerticalAlignment="Top" Grid.Row="2" Margin="60,155,0,0" Grid.RowSpan="3" >

            <StackPanel Width="50">

                <Ellipse x:Name="ePan" Fill="#CC4C4C4C" Height="50" Canvas.ZIndex="1" Width="50"/>

                <Path x:Name="pathMiniMap" Stretch="Fill" Stroke="#CCFFFFFF" Height="195" Margin="-50,-195,-50,0" UseLayoutRounding="False" Canvas.ZIndex="1" Data="M75,0.5 C116.14521,0.5 149.5,33.854782 149.5,75 C149.5,111.64496 123.04255,142.11044 88.187729,148.3364 L86.852966,148.55754 L87.70414,149.04695 C94.776031,153.34393 99.5,161.1203 99.5,170 C99.5,183.53098 88.530975,194.5 75,194.5 C61.469025,194.5 50.5,183.53098 50.5,170 C50.5,161.1203 55.223965,153.34393 62.29586,149.04695 L63.14703,148.55754 L61.812263,148.3364 C26.957447,142.11044 0.5,111.64496 0.5,75 C0.5,33.854782 33.854786,0.5 75,0.5 z"/>

                <Grid x:Name="gridPan" Height="50" Margin="0,-50,0,0" Width="50" Canvas.ZIndex="1">

                    <Grid.RowDefinitions>

                        <RowDefinition Height="12"/>

                        <RowDefinition Height="26" />

                        <RowDefinition Height="12"/>

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="12" />

                        <ColumnDefinition Width="26" />

                        <ColumnDefinition Width="12"/>

                    </Grid.ColumnDefinitions>

  

                    <Image Source="Images/PanUp.png" Stretch="Fill" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Top" Height="20" Margin="0,5,0,0" Width="34" MouseLeftButtonDown="PanMapUp"/>

                    <Image Source="Images/PanLeft.png" Stretch="Fill" Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Center" Width="20" Margin="5,0,0,0" Height="34" MouseLeftButtonDown="PanMapLeft"/>

                    <Image Source="Images/PanRight.png" Stretch="Fill" Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" VerticalAlignment="Center" Width="20" Margin="0,0,5,0" Height="34" MouseLeftButtonDown="PanMapRight"/>

                    <Image Source="Images/PanDown.png" Stretch="Fill" Height="20" Margin="0,0,0,5" VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Center" Width="34" MouseLeftButtonDown="PanMapDown"/>

                </Grid>

                <Border Margin="0,5,0,0" Width="15" Background="#CC4C4C4C" BorderThickness="1,1,1,0" BorderBrush="#CCFFFFFF" Height="15">

                    <TextBlock Foreground="White" HorizontalAlignment="Center" Text="+" MouseLeftButtonDown="ZoomIn" VerticalAlignment="Center"/>

                </Border>

                <Border Height="160" HorizontalAlignment="Center" Margin="0" Width="15" RenderTransformOrigin="0.5,0.5" BorderThickness="1" Background="#CC4C4C4C" BorderBrush="#CCFFFFFF">

                    <Slider x:Name="sldZoom" Orientation="Vertical" Maximum="21" Minimum="1" Height="150" Value="0" HorizontalAlignment="Center" Margin="0" SmallChange="1" BorderBrush="{x:Null}" BorderThickness="1" Width="15" Canvas.ZIndex="1" Foreground="{x:Null}" >

                        <i:Interaction.Behaviors>

                            <local:SnappingSlider/>

                        </i:Interaction.Behaviors>

                    </Slider>

                </Border>

                <Border Margin="0,0,0,5" Width="15" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF" Height="15">

                    <TextBlock Foreground="White" HorizontalAlignment="Center" Text="-" MouseLeftButtonDown="ZoomOut" VerticalAlignment="Center"/>

                </Border>

                <Border Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1" BorderBrush="#CCFFFFFF">

                    <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Road" MouseLeftButtonDown="MapStyleRoad" VerticalAlignment="Center"/>

                </Border>

                <Border Height="15" Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF">

                    <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Aerial" MouseLeftButtonDown="MapStyleAerial" VerticalAlignment="Center"/>

                </Border>

                <Border Height="15" Margin="0" Width="50" Background="#CC4C4C4C" BorderThickness="1,0,1,1" BorderBrush="#CCFFFFFF">

                    <TextBlock Foreground="White" HorizontalAlignment="Center" Text="Hybrid" MouseLeftButtonDown="MapStyleHybrid" VerticalAlignment="Center"/>

                </Border>

            </StackPanel>

        </Canvas>

  

        <StackPanel Orientation="Horizontal" Grid.Row="3" HorizontalAlignment="Center">

            <HyperlinkButton NavigateUri="http://students.netindonesia.net/blogs/veri" Content="My Blog" TargetName="_blank" FontFamily="Verdana" FontSize="12" Foreground="#FFFFFFFF"/>

            <TextBlock Foreground="White" Text="|"></TextBlock>

            <HyperlinkButton NavigateUri="http://twitter.com/vferdiansyah" Content="Twitter" TargetName="_blank" FontFamily="Verdana" FontSize="12" Foreground="#FFFFFFFF"/>

            <TextBlock Foreground="White" Text="|"></TextBlock>

            <HyperlinkButton NavigateUri="http://www.facebook.com/verif" Content="Facebook" TargetName="_blank" FontFamily="Verdana" FontSize="12" Foreground="#FFFFFFFF"/>

            <TextBlock Foreground="White" Text="|"></TextBlock>

            <HyperlinkButton NavigateUri="http://www.linkedin.com/pub/veri-ferdiansyah/21/a14/593" Content="Linked In" TargetName="_blank" FontFamily="Verdana" FontSize="12" Foreground="#FFFFFFFF"/>

        </StackPanel>

    </Grid>

</UserControl>

After that, you also need to copy and paste the code below to your MainPage.xaml.cs.

       1: using System;

       2: using System.Windows;

       3: using System.Windows.Browser;

       4: using System.Windows.Controls;

       5: using System.Windows.Input;

       6: using BingMapsOData.Helpers;

       7: using BingMapsOData.ViewModels;

       8: using Microsoft.Maps.MapControl;

       9:  

namespace BingMapsOData

{

    public partial class MainPage : UserControl

    {

        NerdDinnerViewModel vm;

        MapSearchHelper searchHelper = new MapSearchHelper();

        

        public MainPage()

        {

            InitializeComponent();

            InitializeViewModel();

  

            dinnerMap.TargetViewChanged += new EventHandler<MapEventArgs>(dinnerMap_TargetViewChanged);

  

            sldZoom.Value = dinnerMap.ZoomLevel;

            sldZoom.ValueChanged += new RoutedPropertyChangedEventHandler<double>(ZoomChange);

  

            MiniMap.MouseClick += new EventHandler<MapMouseEventArgs>(MiniMap_MouseClick);

            MiniMap.MouseDoubleClick += new EventHandler<MapMouseEventArgs>(MiniMap_MouseDoubleClick);

            MiniMap.MouseDragBox += new EventHandler<MapMouseDragEventArgs>(MiniMap_MouseDragBox);

            MiniMap.MousePan += new EventHandler<MapMouseDragEventArgs>(MiniMap_MousePan);

            MiniMap.MouseWheel += new System.Windows.Input.MouseWheelEventHandler(MiniMap_MouseWheel);

            MiniMap.KeyUp += new System.Windows.Input.KeyEventHandler(MiniMap_KeyUp);

            MiniMap.KeyDown += new System.Windows.Input.KeyEventHandler(MiniMap_KeyDown);

            MiniMap.KeyPress += new EventHandler<MapKeyPressEventArgs>(MiniMap_KeyPress);

            MiniMap.KeyHeld += new EventHandler<MapKeyHeldEventArgs>(MiniMap_KeyHeld);

            MiniMap.SetView(dinnerMap.TargetCenter, Math.Max(1.0, dinnerMap.TargetZoomLevel - 5));

        }

  

        #region MainPage Events

  

        private void dinnerMap_TargetViewChanged(object sender, MapEventArgs e)

        {

            MiniMap.SetView(dinnerMap.TargetCenter, Math.Max(1.0, dinnerMap.TargetZoomLevel - 5));

            sldZoom.Value = dinnerMap.TargetZoomLevel;

        }

  

        #endregion

  

        #region MiniMap Events

  

        private void MiniMap_KeyHeld(object sender, MapKeyHeldEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_KeyPress(object sender, MapKeyPressEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_KeyDown(object sender, System.Windows.Input.KeyEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_KeyUp(object sender, System.Windows.Input.KeyEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_MouseWheel(object sender, System.Windows.Input.MouseWheelEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_MousePan(object sender, MapMouseDragEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_MouseDragBox(object sender, MapMouseDragEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_MouseDoubleClick(object sender, MapMouseEventArgs e)

        {

            e.Handled = true;

        }

  

        private void MiniMap_MouseClick(object sender, MapMouseEventArgs e)

        {

            e.Handled = true;

        }

  

        #endregion

  

        #region Map Navigation

  

        private void ZoomChange(object sender, RoutedPropertyChangedEventArgs<double> e)

        {

            dinnerMap.ZoomLevel = sldZoom.Value;

        }

  

        private void ZoomIn(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.ZoomLevel = dinnerMap.TargetZoomLevel + 1;

        }

  

        private void ZoomOut(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.ZoomLevel = dinnerMap.TargetZoomLevel - 1;

        }

  

        private void PanMapLeft(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.Center = dinnerMap.ViewportPointToLocation(new Point(dinnerMap.ViewportSize.Width / 2 - 50, dinnerMap.ViewportSize.Height / 2));

        }

  

        private void PanMapRight(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.Center = dinnerMap.ViewportPointToLocation(new Point(dinnerMap.ViewportSize.Width / 2 + 50, dinnerMap.ViewportSize.Height / 2));

        }

  

        private void PanMapUp(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.Center = dinnerMap.ViewportPointToLocation(new Point(dinnerMap.ViewportSize.Width / 2, dinnerMap.ViewportSize.Height / 2 - 50));

        }

  

        private void PanMapDown(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.Center = dinnerMap.ViewportPointToLocation(new Point(dinnerMap.ViewportSize.Width / 2, dinnerMap.ViewportSize.Height / 2 + 50));

        }

  

        private void MapStyleRoad(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.Mode = new RoadMode();

        }

  

        private void MapStyleAerial(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.Mode = new AerialMode(false);

        }

  

        private void MapStyleHybrid(object sender, MouseButtonEventArgs e)

        {

            dinnerMap.Mode = new AerialMode(true);

        }

  

        #endregion

  

        /// <summary>

        /// Initialize our view model, and assign it to the view

        /// </summary>

        private void InitializeViewModel()

        {

            vm = new NerdDinnerViewModel();

            this.DataContext = vm;

            try

            {

                vm.QueryDinners();

            }

            catch (Exception ex)

            {

                MessageBox.Show("Error loading the dinners. Make sure you are online. " + ex.Message);

            }

        }

  

        private void SearchDinners_Click(object sender, RoutedEventArgs e)

        {

            try

            {

                if (!string.IsNullOrEmpty(txtPlace.Text))

                    searchHelper.ExecuteSearch(txtPlace.Text, this.dinnerMap);

            }

            catch (Exception ex)

            {

                MessageBox.Show("Error zooming in to " + txtPlace.Text + ex.Message);

            }

  

            try

            {

                vm.QueryDinners();

            }

            catch (Exception ex)

            {

                MessageBox.Show("Error loading the dinners. Make sure you are online. " + ex.Message);

            }

        }

    }

}