Странная ошибка привязки при использовании Path в шаблоне элемента ItemsControl

@kotelok · Регистрация: 08.08.2014

Студворк — интернет-сервис помощи студентам

Исходные данные:
1. Дефолтный WPF-проект из шаблона VS.
2. Добавлена разметка для 'ItemsControl' и две простые VM.

Результат в рантайме:
1. Привязки работают, проект не падает, в канвасе фигуры отрисовываются. В т.ч. динамически обновляются, если реализовать INPC для VM.
2. Но при этом в рантайме множество ошибок в output (и новая Студия их ещё в отдадочной WPF-панельке подсвечивает в категории "binding failures").

Почему так и как правильно прописать привязки, чтобы не было ошибок?

Поначалу думал, что это 'Fody' что-то ломает, или 'DataContext' поздно инициализируется, но нет, даже на минимальном проекте повторяется, даже если 'DataContext' присвоить первой же строкой в конструкторе.

Code
1
2
3
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=Point; DataItem=null; target element is 'EllipseGeometry' (HashCode=2683661); target property is 'Center' (type 'Point')
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=Radius; DataItem=null; target element is 'EllipseGeometry' (HashCode=2683661); target property is 'RadiusX' (type 'Double')
System.Windows.Data Error: 2 : Cannot find governing FrameworkElement or FrameworkContentElement for target element. BindingExpression:Path=Radius; DataItem=null; target element is 'EllipseGeometry' (HashCode=2683661); target property is 'RadiusY' (type 'Double')

VM:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public class ShapeViewModel
{
    public System.Windows.Point Point { get; set; }
    public double Radius { get; set; } = 12;
}
 
public class MainViewModel
{
    public ObservableCollection<ShapeViewModel> Shapes { get; set; } = new();
 
    public MainViewModel()
    {
        Shapes.Add(new ShapeViewModel() { Point = new System.Windows.Point(110, 120) });
        Shapes.Add(new ShapeViewModel() { Point = new System.Windows.Point(150, 180) });
    }
}
 
public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();
 
        DataContext = new MainViewModel();
    }
}

XAML:

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<Window x:Class="SampleBindingBug.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:vm="clr-namespace:SampleBindingBug.ViewModels"
        mc:Ignorable="d" 
        d:DataContext="{d:DesignInstance IsDesignTimeCreatable=True, Type=vm:MainViewModel}"
        Title="MainWindow" Width="800" Height="450" >
    <Grid>
        <ItemsControl ItemsSource="{Binding Shapes}">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas />
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.Resources>
                <DataTemplate DataType="{x:Type vm:ShapeViewModel}">
                    <Path Fill="Gray">
                        <Path.Data>
                            <EllipseGeometry Center="{Binding Path=Point}" 
                                             RadiusX="{Binding Path=Radius}"
                                             RadiusY="{Binding Path=Radius}" />
                        </Path.Data>
                    </Path>
                </DataTemplate>
            </ItemsControl.Resources>
        </ItemsControl>
    </Grid>
</Window>

@kotelok · 08.02.2022, 14:38 **[ТС]**

Сообщение от Элд Хасп

для прояснения вышесказанного

Да, теперь хоть понятнее стало, что оно для каждого элемента свой экземпляр канваса создаёт. Я думал там один общий канвас внутри которого по координатам размещаются все элементы.

Но вариант с ListBox не подходит, т.к. в этом случае при наведении/клике событие уходит именно в прямоугольник айтема ListBox (и круг подсвечивается квадратом), а мне надо, чтобы на события (например, наведения мышки или клика) реагировала именно сама нарисованная фигура по её реальным границам. Ну и если они перекрываются, например, если добавить ещё и линию, то с ListBox поведение совсем станно выглядит и линия может своим прямоугльником айтема полностью перекрыть другую фигуру, которая рядом с ней находится (но даже не пересекается с ней).

@Элд Хасп · 08.02.2022, 14:53

Сообщение от kotelok

Да, теперь хоть понятнее стало, что оно для каждого элемента свой экземпляр канваса создаёт. Я думал там один общий канвас внутри которого по координатам размещаются все элементы.

Нее....
Канвас единый для всех.
Проблема в самих итемах.
Так как точка 0,0 всегда неявно входит в геометрию, то общий размер элемента (итема) определяется с учётом начала координат.
Поэтому получаются итемы в которых есть большая прозрачная часть от начала координат.

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

Добавлено через 8 минут

Сообщение от kotelok

Но вариант с ListBox не подходит, т.к. в этом случае ....

ListBox я привёл чтобы вам было наглядно видна проблема.
С ItemsControl происходит тоже самое, просто вы не видите явного размера итема.
Но там также происходит их наложение друг на друга.
В какой-то компоновке это не создаёт проблем, но в других создаёт.

В том же ListBox вы можете стилизовать итем так, чтобы он обводил контур не прямоугольнику, а по элементу непосредственно или с неким отступом.
То есть реализаций можно придумать множество, но это не значит что изначально можно неправильно создавать сами фигуры (содержимое итемов).
Ведь поведение итемов у вас одинаковое для всех фигур, поэтому все события, действия нужно отрабатывать на уровне итема, а не его содержимого.
Со своим содержимым пусть работает сам итем.

@kotelok · 08.02.2022, 15:00 **[ТС]**

Да, всё, разобрался. Ключевой момент - что именно двигать. И без явного отображения рамок это совершенно не очевидно.

V1

XML
1
2
3
<Border BorderThickness="2" BorderBrush="Red">
    <Ellipse Margin="200,200,0,0" Width="40" Height="40" Fill="Blue" />
</Border>

V2

XML
1
2
3
<Border Margin="200,200,0,0" BorderThickness="2" BorderBrush="Red">
    <Ellipse Width="40" Height="40" Fill="Blue" />
</Border>

@Элд Хасп · 08.02.2022, 15:26

Сообщение от kotelok

И без явного отображения рамок это совершенно не очевидно.

Да.
Поэтому в инете очень много примеров подобных вашему варианту.
Они проще реализуются.
Но когда из-за этого возникают проблемы, то куча вопросов: "А почему так? Я же всё по примеру делал!".

Поэтому вам тоже советую НАУЧИТЬСЯ делать правильно и тогда вы сами сможете ОСОЗНАНО выбрать где можно "срезать углы" и сделать проще.

@kotelok · 08.02.2022, 15:26 **[ТС]**

Элд Хасп
Хотя, тут ещё вопрос производительности нужно учитывать. Когда каждая фигура помещается в свой индвидуальный контейнер для позиционирования, то получается, что это удваивает количество UI-элементов (сама фигура + индивидуальный контейнер для неё, вместо просто растянутой фигуры с прозрачным кусом от начала координат).

@Элд Хасп · 08.02.2022, 15:35

Сообщение от kotelok

Когда каждая фигура помещается в свой индвидуальный контейнер для позиционирования, то получается ...

Так вы же всё равно выводите с помощью ItemsControl.
А он всегда создаёт оболочку вокруг элементов коллекции.
Так что этот второй элемент и так уже есть, нужно только правильно его стилизовать, чтобы он не был бесполезным грузом.

Сообщение от kotelok

тут ещё вопрос производительности нужно учитывать

Конечно нужно.
WPF значительно шустрее Форм, но всё же это инструмент создания GUI, а не игровой движок.
Если количество контролов будет исчисляться тысячами, то непременно будет тормозить, особенно, в динамике.
Очень часто это бывает когда в DataGrid передают большие коллекции, так как каждая его строка это десятки, а иногда и сотни UI элементов.

Новые блоги и статьи Все статьи Все блоги /
Мобильное приложение ColorStep pavlinmavlin 17.09.2026 Реализовал приложение Красный, Зеленый, Синий в Unity3d + c#. Название изменил на ColorStep. Приложение прошло модерацию и теперь доступно для скачивания. Делал его сам, шаг за шагом — и вот,. . .	Запрет дублирования строк в табличной части Maks 13.09.2026 Реализация из решения ниже выполнена на нетиповом справочнике "Нормы ТО" с табличной часть "Виды ТО", разработанного в КА2, со следующими реквизитами: - ВидТО (СправочникСсылка. ВидыТО); - ВидГСМ. . .	Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .
Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .	Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))

@kotelok 1341 / 920 / 265 Регистрация: 08.08.2014 Сообщений: 2,775
	08.02.2022, 15:26 [ТС]
	Элд Хасп Хотя, тут ещё вопрос производительности нужно учитывать. Когда каждая фигура помещается в свой индвидуальный контейнер для позиционирования, то получается, что это удваивает количество UI-элементов (сама фигура + индивидуальный контейнер для неё, вместо просто растянутой фигуры с прозрачным кусом от начала координат). 0