|
Рисование в canvas методом перебора itemscontrol
#39428959
Ссылка:
Ссылка на сообщение:
Ссылка с названием темы:
|
|
|
|
Здравствуйте, уважаемые!
Прошу помогите мне пожалуйста. Задача следующая: Мне нужно нарисовать линию и точки начала и конца. На точка показать подписи. И раскрасить эти объекты: линия синий цвет, начальная точка синий цвет и конечная точка красный цвет.
Создал модель
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
public class Class1
{
public ObservableCollection<PathGeometry> PathGeometry { get; set; }
public Class1()
{
PathGeometry = new ObservableCollection<PathGeometry>
{
new PathGeometry {StartPoint = new Point {X = 110, Y = 250,}, EndPoint = new Point {X = 30, Y = 30}, Label = "№1"},
new PathGeometry {StartPoint = new Point {X = 55, Y = 55,}, EndPoint = new Point {X = 68, Y = 100}, Label = "№2"},
new PathGeometry {StartPoint = new Point {X = 15, Y = 20,}, EndPoint = new Point {X = 172, Y = 15}, Label = "№3"}
};
}
}
public class PathGeometry
{
public Point StartPoint { get; set; }
public Point EndPoint { get; set; }
public string Label { get; set; }
public object Tag { get; set; }
}
В интернете нашел такой вариант. Но он меня не устроил, так как я могу объявить только один объект (линию или точку):
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
<ItemsControl ItemsSource="{Binding PathGeometry}" Width="400" Height="400">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Path=StartPoint.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Path=StartPoint.Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Width="6" Height="6" Margin="-3,-3,0,0" StrokeThickness="1" Fill="Blue" ToolTip="{Binding Path=TipTool}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
Потом я попробовал этим путем пойти, но тут стало не ясно как мне раскрасить объекты и как только на точки устанавливать свойство StrokeThickness. А с подписями вообще не ясно как быть в данном варианте:
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.
<ItemsControl ItemsSource="{Binding PathGeometry}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Path=StartPoint.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Path=StartPoint.Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Path Stroke="Blue">
<Path.Data>
<GeometryGroup>
<EllipseGeometry Center="{Binding StartPoint}" RadiusX="2" RadiusY="2"/>
<LineGeometry StartPoint="{Binding StartPoint}" EndPoint="{Binding EndPoint}" />
<EllipseGeometry Center="{Binding EndPoint}" RadiusX="2" RadiusY="2"/>
</GeometryGroup>
</Path.Data>
</Path>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<ItemsControl ItemsSource="{Binding PathGeometry}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemContainerStyle>
<Style>
<Setter Property="Canvas.Left" Value="{Binding Path=StartPoint.X}"/>
<Setter Property="Canvas.Top" Value="{Binding Path=StartPoint.Y}"/>
</Style>
</ItemsControl.ItemContainerStyle>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Ellipse Width="6" Height="6" Canvas.Left="{Binding StartPoint.X}" Canvas.Top="{Binding StartPoint.Y}" Margin="-3,-3,0,0" StrokeThickness="1" Fill="Blue" />
<Label Content="{Binding Label}" Canvas.Left="{Binding StartPoint.X}" Canvas.Top="{Binding StartPoint.Y}" Margin="-2,-15,0,0" Padding="0" FontSize="9" />
<Ellipse Width="6" Height="6" Canvas.Left="{Binding EndPoint.X}" Canvas.Top="{Binding EndPoint.Y}" Margin="-3,-3,0,0" StrokeThickness="1" Fill="Red" />
<Label Content="{Binding Label}" Canvas.Left="{Binding EndPoint.X}" Canvas.Top="{Binding EndPoint.Y}" Margin="-2,-15,0,0" Padding="0" FontSize="9" />
<Line Stroke="Blue" X1="{Binding StartPoint.X}" Y1="{Binding StartPoint.Y}" X2="{Binding EndPoint.X}" Y2="{Binding EndPoint.Y}" VerticalAlignment="Top" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
|
|
|
