交互式地图 wpf

Question

这是我的情况：我有很多图片可以在组装时提供完整的地图。每张图片都有一个文件名“x,y.png”，其中 x 和 y 是图片所代表的地图的坐标。

我想做的是将所有这些图片组装成 wpf 中的交互式地图。每张图片将是一个带有 x 和 y 坐标的单元格，我需要与用户交互：鼠标悬停时突出显示图片，单击时执行操作等等。

我的地图是不是地球的自定义地图，因此 openstreetmap 和类似的解决方案不起作用。

我查看了谷歌和堆栈溢出，但我没有找到任何东西。

我发现了这个：http://www.codeproject.com/Articles/855699/Complete-Sudoku-Game-in-Csharp-WPF-Silverlight，这很好，但是网格在 xaml 中是手动分离的，在我的情况下这是不可能的，因为地图类似于 80x80 单元格...

我考虑过使用带有自定义数据模板的列表框，该模板显示将具有 3 个属性（x、y 和 pic uri）的类单元格的图片，但我认为它不会呈现为完整的地图，你知道，孔和空白。

那么我怎样才能向用户显示呢？

感谢您的帮助

Answer 1

我认为最简单的解决方案如下所示。

您可以通过编程方式生成 80-80 RowDefinition 和 ColumnDefinition，然后将它们添加到网格中：

for (int c = 0; c < 80; c++) mapGrid.ColumnDefinitions.Add(new ColumnDefinition{ Width = new GridLength(1, GridUnitType.Star) });
for (int r = 0; r < 80; r++) mapGrid.RowDefinitions.Add(new RowDefinition{ Width = new GridLength(1, GridUnitType.Star) });

然后您可以创建任何Image 并将它们也添加到Grid：

foreach (string path in mapImagePaths) { // mapImagePaths: a list of map image names
  var b = new BitmapImage();
  b.BeginInit();
  b.UriSource = new Uri(path, UriKind.Relative); // or Absolute
  b.CacheOption = BitmapCacheOption.OnLoad; // maybe needed
  b.EndInit();

  var i = new Image { Source = b, Stretch = Stretch.Uniform };

  Grid.SetRow(i, /*the row index based on the coordinates*/);
  Grid.SetColumn(i, /*the column index based on the coordinates*/);

  mapGrid.Children.Add(i);
}

我无法测试代码，但它应该可以工作......