WPF: Dynamically adjust the size of a grid with respect to current scale of Bing map

Question

I am using Visual Studio Community 2017.

What I have and what works:

I have referenced the Bing map WPF map control DLL in my project
I have a 3x3 rectangular grid with a "clickable-property": if the user clicks on a cell, a message-box tells the user the coordinates of the cell.
The grid is made transparent and put above the Bing map.

It looks like this:

What I want to do now: As you can see from the two screenshots, the size of the grid is static and doesn't change when the user zooms in. I want to change exactly that: I want the grid to have a size that is fixed to the map, i.e. such that the grid size changes when the user zooms in/out. Specifically, I'd like to:

have a 3x3 square grid, with the "clickable-property" (see above), where the side length of each square is 500m.
The top-left corner point of the top-left square should be positioned at, let's say, (47.6424,-122.3219), which is somewhere in the state of Washington.

It should look (roughly) as illustrated below. The red-filled circle highlights the point (47.6424,-122.3219). When the user zooms out the grid should dynamically become smaller in accordance with the scale of the Bing map. The scaling of the grid in the two figures is not 100% accurate, but you get the idea.

How can I manage to do that? Note: In future I will need to do same thing, but with a hexagonal grid. I mention this in case this may change the approach I want to take.

Thank you!

XAML: (you need a key for Bing maps)

<Window x:Class="squareGridBing.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:m="clr-namespace:Microsoft.Maps.MapControl.WPF;assembly=Microsoft.Maps.MapControl.WPF"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:local="clr-namespace:ProofOfConcept"
    mc:Ignorable="d"
    Title="Square grid on Bing Map" Height="450" Width="808.4">
<Grid>
    <m:Map Margin="5,0,249.6,0" CredentialsProvider="[YOUR KEY TO BE INSERTED HERE]">
        <Grid ShowGridLines="True" Margin="100,100,220,100" Opacity="0.5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition />
                <ColumnDefinition />
                <ColumnDefinition />
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition />
                <RowDefinition />
                <RowDefinition />
            </Grid.RowDefinitions>

            <Button Grid.Column="0" Grid.Row="0" Click="ButtonClick" />
            <Button Grid.Column="1" Grid.Row="0" Click="ButtonClick" />
            <Button Grid.Column="2" Grid.Row="0" Click="ButtonClick" />

            <Button Grid.Column="0" Grid.Row="1" Click="ButtonClick" />
            <Button Grid.Column="1" Grid.Row="1" Click="ButtonClick" />
            <Button Grid.Column="2" Grid.Row="1" Click="ButtonClick" />

            <Button Grid.Column="0" Grid.Row="2" Click="ButtonClick" />
            <Button Grid.Column="1" Grid.Row="2" Click="ButtonClick" />
            <Button Grid.Column="2" Grid.Row="2" Click="ButtonClick" />

        </Grid>
    </m:Map>
</Grid>

CS:

using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace squareGridBing
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
    }

    private void ButtonClick(object sender, RoutedEventArgs e)
    {
        Button _btn = sender as Button;

        int _row = (int)_btn.GetValue(Grid.RowProperty);
        int _column = (int)_btn.GetValue(Grid.ColumnProperty);
        MessageBox.Show(string.Format("Button clicked at column {0}, row {1}", _column, _row));
    }
}
}

Please see https://meta.stackoverflow.com/questions/284236/why-is-can-someone-help-me-not-an-actual-question — glennsl, Aug 17 '18 at 10:45
@glennsl I have reformulated my questions, chosen a clearer title, added screenshots and code. Could you please consider my question again and, if it is appropriate now, make it active again? Thank you. — BJPrim, Aug 21 '18 at 08:02

score 1 · Accepted Answer · answered Aug 22 '18 at 14:16

1

Have you considered adding your grid (or hexagons since you want to extend it to other shapes) as polygons directly to the map? https://msdn.microsoft.com/en-us/library/hh868034.aspx Polygons added to the map this way move and scale with map content. You should be able to listen to events when users click on them to get the cell they clicked on.

answered Aug 22 '18 at 14:16

Duncan Lawler

1,772
8
13

I have tried that now, but unfortunately MapPolygon does not support listening to OnClick events. There is a workaround here: https://blogs.bing.com/Developers-Blog/2014-01/Make-Clickable-Shapes-in-the-Native-Bing-Maps-Control However, I struggle to put this into practice: (1) they have a MainPage whereas I have a MainWindow and (2) it doesn't fine the MapShapeLayer class in my case when typing the line `private MapShapeLayer shapeLayer;` (in the first C# box in the blog). Any ideas? – BJPrim Aug 27 '18 at 07:24
1

MapPolygons inherit from UIElement and should support all the normal events for you to respond. The blog you have linked to is for a different deprecated SDK for earlier versions of windows, not the WPF map control – Duncan Lawler Aug 27 '18 at 16:11
Ah got it now! Thank you for pointing me into the right direction! – BJPrim Aug 28 '18 at 09:29

WPF: Dynamically adjust the size of a grid with respect to current scale of Bing map

1 Answers1