c# - 将数据从 View 绑定(bind)到 ItemsPanelTemplate

Question

我一直在开发我的第一个 MVVM WPF 应用程序，我想在其中绘制一个包含节点和边的图形。目前，我正在 View 后面的代码中执行所有绘图逻辑，迭代节点，相应地创建形状并将它们添加到 Canvas 中。

因为我不想跟踪形状，只想根据给定的数据(即节点)绘制它们，所以我决定创建一个 ObservableCollection Nodes和 Edges , 并绑定(bind) ItemsControl到这些以自动绘制形状。

现在我专注于绘制节点，并提出了以下 XAML 代码:

<ItemsControl x:Name="ItemsControlCanvas" ItemsSource="{Binding Path=Nodes}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas>
                <Canvas.LayoutTransform>
                    <ScaleTransform ScaleX="{Binding ?}" ScaleY="{Binding ?}"/>
                </Canvas.LayoutTransform>
            </Canvas>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Ellipse Fill="Blue" Width="4" Height="4" />
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    <ItemsControl.ItemContainerStyle>
        <Style>
            <Setter Property="Canvas.Top" Value="{Binding Path=Position.Y}" />
            <Setter Property="Canvas.Left" Value="{Binding Path=Position.X}" />
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

在我看来，我有两个属性 ScaleX和 ScaleY我在用户在 Canvas 上滚动时设置的。在我早期版本的代码中，我将创建一个 ScaleTransform使用这些属性，并使用 LayoutTransform 将其应用于命名 Canvas .

public partial class GraphOverview : Page
{
    public double ScaleX { get; set; }
    public double ScaleY { get; set; }

这个版本的问题是我无法让它在我的新 XAML 代码中工作。我想要 ScaleX和 ScaleY ScaleTransform 的属性在 ItemsPanelTemplate绑定(bind)到我认为的属性。仅，正常 ElementName由于某种原因，绑定(bind)不起作用。更清楚地说， Canvas 可能不知道 View ，我假设因为它是一个模板。此外，我无法从后面的代码中调用 Canvas ，即使它有名称。

我尝试了几种解决方案，摸索着 RelativeResources之类的，但我想我不太清楚为什么 ItemsPanelTemplate与 XAML 代码中的所有其他内容如此脱节。提前致谢!

更新

也许我应该澄清一下，这可以通过移动 ScaleX 来轻松解决。和 ScaleY属性到 ViewModel，并绑定(bind)到这些属性。但在我看来，这种特定于 View 的属性不应该驻留在 ViewModel 中。

Answer 1

当您说 View 特定信息不应该在 View 模型中时，您是正确的。但是在您的情况下，位置成为模型的一部分，因为位置只不过是您的 View 应该表现的数据。在这种情况下，您可以将它们视为模型而不是 View 的一部分。编写一个单独的模型类并在您的 ViewModel 类的可观察集合中使用它。我希望它能消除你的疑问。

public class Node
{
    public double ScaleX { get; set; }
    public double ScaleY { get; set; }
}

编辑
回答您的问题。 -

但是 Scale 属性指定了 Canvas 的行为方式，那么 View 是否还没有作为“模型”呢？创建一个新模型只是为了设置单个 Canvas 的比例属性对我来说似乎是多余的？ View 应该只关心绘图数据，并且由于属性作为这些绘图的修改，它们属于 View ，不是吗？

您想根据提供的数据绘制图表。 Node 类将为您提供数据。它存储数据而不是 Canvas 应如何呈现的逻辑，XAML 代码使用此数据并具有在 View 中显示它的逻辑。

那么 View 是否还没有作为“模型”呢？

您尝试的实现在 View 中有模型，其想法是将模型与 View 分离。最初创建一个类来保存 2 个 double 值可能看起来是多余的。但是，如果将它们从 View 中抽象出来，则会有一些优势。

在 View 模型中，您可以为此节点类(模型)创建一个可观察的集合。如果 View 中有 ScaleX 和 ScaleY，则无法从 Viewmodel 访问它。

将来您可能希望将 ScaleX 和 ScaleY 更改为不同的比例，例如对数刻度/不同的单位。在这种情况下，您必须更改 ViewModel 中的逻辑才能这样做，而不必担心更改 View。但是如果你在 View 中有这个 Observable 集合，你必须改变 View 来改变数据/模型。

最后 - 您可以为 ViewModel 中的任何内容编写单元测试，但不能为 View 编写单元测试。

通常 ScaleX 和 ScaleY 将成为 View 的一部分，但在您的情况下，它们会更改并存储数据。因此，您需要将此 ScaleX 和 ScaleY 抽象到不同的层以保留 MVVM 概念。