将 Shapes.Path 项绑定到 ItemsControl [英] Binding Shapes.Path items to a ItemsControl

问题描述

我一直在想如何将 ObservableCollection 绑定到 ItemsControl.我有一个现有项目，该项目严重依赖背后的代码和画布的无绑定，我正在尝试更新以使用 mvvm 和棱镜.

I have been trying to figure out how to bind an ObservableCollection<FrameworkElements> to an ItemsControl. I have an existing project which relies heavily on code behind and canvas's without binding which I am trying to update to use mvvm and prism.

ObservableCollection 将填充多个 Path 项目.它们是从我使用的外部库生成的.当我手动操作画布本身时，库可以正常运行.

The ObservableCollection is going to be populated with a number of Path items. They are generated from an extermal library which I use. The library functions correctly when I manually manipulate the canvas itself.

以下是来自 ViewModel 的代码片段:

Here is a snippet of the code from the ViewModel:

    ObservableCollection<FrameworkElement> _items;
    ObservableCollection<FrameworkElement> Items
    {
        get { return _items; }
        set
        {
            _items = value;
            this.NotifyPropertyChanged("Items");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    private void NotifyPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }

支持 XAML

    <ItemsControl ItemsSource="{Binding Items}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas x:Name="canvas" IsItemsHost="True">
                        <Canvas.Background>
                            <SolidColorBrush Color="White" Opacity="100"/>
                        </Canvas.Background>

                    </Canvas>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <Path/>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>

我遇到的问题是路径从不绘制.关于我哪里出错以及从哪里开始调试过程的任何建议?

The issue I am experiencing is that the Path's never draw. Any suggestion on where I am going wrong and where to start the debug process?

推荐答案

你的视图模型应该包含一个路径的抽象表示，例如

Your view model should contain an abstract representation of a Path, e.g.

public class PathData
{
    public Geometry Geometry { get; set; }
    public Brush Fill { get; set; }
    public Brush Stroke { get; set; }
    public double StrokeThickness { get; set; }
    // ... probably more Stroke-related properties
}

如果您现在有一组 PathData 对象，例如

If you now have a collection of PathData objects like

public ObservableCollection<PathData> Paths { get; set; }

您的 ItemsControl 可以有一个 ItemsTemplate，如下所示:

your ItemsControl could have an ItemsTemplate as shown below:

<ItemsControl ItemsSource="{Binding Paths}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Data="{Binding Geometry}" Fill="{Binding Fill}"
                  Stroke="{Binding Stroke}" StrokeThickness="{Binding StrokeThickness}"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

<小时>

您现在可以像这样添加 PathData 实例:

---

You would now add PathData instance like this:

Paths.Add(new PathData
{
    Geometry = new RectangleGeometry(new Rect(100, 100, 100, 100)),
    Fill = Brushes.AliceBlue,
    Stroke = Brushes.Red,
    StrokeThickness = 2
});

这篇关于将 Shapes.Path 项绑定到 ItemsControl的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！