在WPF中定位和覆盖图像的最佳方法是什么？

Question

我有一张地图，在它上面添加了标记（可以具有不同大小的不同图标），其中包含数据以及其他各种选项。地图是一幅图像，现在实现的方式是使用标记图标（在地图上迭代并按标记的图像一一设置像素）在特定位置重绘地图区域。但是我意识到，这可能不是最好的选择，所以我在这里问。

我当时正在考虑将标记用作控件，但是我不确定如何以编程方式准确地获取并设置标记位置。

Answer 1

WPF应用程序中遵循的通常模式是MVVM-您应该查看在线资源以熟悉它，以及它如何利用WPF的功能。

要回答您的特定问题，您将以数据驱动的方式构建应用程序：创建并公开一组标记作为数据对象，然后通过告诉个体如何将视图绑定到该集合标记应显示。

让我们创建一个MarkerViewModel类，它将包含视图显示它们所需的所有信息：

public class MarkerViewModel {
    public double X { get; set; }
    public double Y { get; set; }
    public string Description { get; set; }
}

您的MainWindow后面的代码可能是：

public partial class MainWindow : Window {
    public MainWindow() {
        InitializeComponent();
        DataContext = new ObservableCollection<MarkerViewModel> {
            new MarkerViewModel() { X = 30, Y = 30},
            new MarkerViewModel() { X = 100, Y = 20},
            new MarkerViewModel() { X = 100, Y = 150}
        };
    }
}

我们将一些数据放入ObservableCollection类型的集合中，并将其分配给DataContext的MainWindow属性。

其XAML可能是：

<Grid>
    <Image Source="Chrysanthemum.jpg" HorizontalAlignment="Left" VerticalAlignment="Top"/>
    <ItemsControl ItemsSource="{Binding}" HorizontalAlignment="Left" VerticalAlignment="Top">
        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Canvas />
            </ItemsPanelTemplate>
        </ItemsControl.ItemsPanel>
        <ItemsControl.ItemContainerStyle>
            <Style TargetType="ContentPresenter">
                <Setter Property="Canvas.Left" Value="{Binding X}" />
                <Setter Property="Canvas.Top" Value="{Binding Y}" />
            </Style>
        </ItemsControl.ItemContainerStyle>
        <ItemsControl.ItemTemplate>
            <DataTemplate DataType="{x:Type local:MarkerViewModel}">
                <StackPanel>
                    <Ellipse Width="10"
                             Height="10"
                             Fill="Blue"/>
                    <TextBlock FontWeight="Bold" Text="{Binding Description}"/>
                </StackPanel>
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</Grid>

Grid在这里覆盖了它的两个子对象：Image是背景图片，并且可以作为您的基本地图，而ItemsControl则希望显示DataContext中每个项目的视图集合。

ItemsControl.ItemTemplate属性使您可以告诉WPF如何显示每个标记：我在这里选择了蓝色的Ellipse和TextBlock。

ItemsControl.ItemContainerStyle让您告诉WPF您想要将其创建的每个项目放置在哪里（它可以做的更多）。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS90M3RsTS5wbmcifQ==” alt =“带有重叠标记的屏幕截图”>

我建议您开始阅读一些教程on data binding，styling and templating和ItemsControl specifically。另请阅读有关MVVM模式的更多信息，但希望我的示例可以帮助您入门。