Каков наилучший подход для размещения и наложения изображений в WPF?

Question

У меня есть карта в виде растрового изображения, поверх которой я добавляю маркеры, которые могут иметь разные значки разных размеров, которые содержат данные, и имеют различные другие параметры. Карта - это изображение, и способ, которым она теперь реализована, - это перерисовка области карты в определенной позиции с помощью значков маркеров путем итерации по изображению и установки пикселей по одному с использованием изображения маркера. Но я понимаю, что это, вероятно, не лучший вариант, доступный, поэтому я спрашиваю здесь.

Я думал об использовании маркеров в качестве элементов управления, но я не уверен, как бы я точно и программно получил и установил позиции маркеров.

Answer 1

Обычный шаблон, используемый в приложениях WPF, - это MVVM - вам нужно ознакомиться с онлайн-ресурсами, чтобы ознакомиться с ним и узнать, как он может использовать возможности WPF.

Чтобы ответить на ваши вопросы c проблема , вы бы построили свое приложение на основе данных: вы создаете и выставляете коллекцию маркеров в виде объектов данных и связываете представление с этой коллекцией, сообщая, как должен отображаться отдельный маркер.

Давайте создадим класс 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 whi sh отвечает за отображение вида для каждого элемента в DataContext коллекция.

* 102 8 * Свойство ItemsControl.ItemTemplate позволяет указать WPF, как вы хотите, чтобы отображался каждый маркер: я выбрал здесь синий Ellipse и TextBlock.

ItemsControl.ItemContainerStyle позволяет указать WPF, где вы хотите поместите каждый элемент, который он создает (он может сделать гораздо больше).

Я предлагаю вам начать читать некоторые учебные пособия по привязке данных , стили и шаблоны и ItemsControl конкретно . Также читайте больше о паттерне MVVM, но, надеюсь, мой пример поможет вам начать работу.