Question

我有一个从SVG文件转换而来的XAML文件，它看起来像这样（它代表一个音符）：

    <?xml version="1.0" encoding="UTF-8"?>
<Viewbox xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Stretch="Uniform">
    <Canvas Name="Layer_1" Width="50" Height="50" Canvas.Left="0" Canvas.Top="0">
        <Canvas.RenderTransform><TranslateTransform X="0" Y="0"/>
        </Canvas.RenderTransform><Canvas.Resources/>
        <!--Unknown tag: metadata--><!--Unknown tag: sodipodi:namedview-->
            <Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="path2995" Fill="#FFAA0000">
                <Path.Data>
                    <PathGeometry Figures="M39.967 23.133c-0.211 0.189-0.523 0.199-0.748 0.028l-7.443-5.664l-3.526 21.095c-0.013 0.08-0.042 0.153-0.083 0.219  c-0.707 3.024-4.566 5.278-9.104 5.278c-5.087 0-9.226-2.817-9.226-6.28s4.138-6.281 9.226-6.281c2.089 0 4.075 0.466 5.689 1.324  l4.664-26.453c0.042-0.242 0.231-0.434 0.475-0.479c0.237-0.041 0.485 0.068 0.611 0.28l9.581 16.192  C40.227 22.637 40.178 22.945 39.967 23.133z" FillRule="NonZero"/>
                </Path.Data>
            </Path>
        </Canvas>
</Viewbox>

虽然我是WPF和数据绑定的新手，但我正在努力坚持MVVM设计模式。我想在这里实现的是使用绑定到Button的命令（例如）在Canvas上动态绘制此形状。有没有办法绑定Path.Data/PathGeometry/Figures，假设我将“M39.967 ...”存储为某个字符串（无需担心文件读取器）？

要学习动态绘图，我一直在玩这些例子： How do you animate a line on a canvas in C#?

How to create and connect custom user buttons/controls with lines using windows forms

我不知道的是如何动态绘制像上面那样的自定义形状，可以由用户从文件中导入。请帮助！

Answer 1

在绑定期间，有效的Path Geometry字符串确实会自动转换为Geometry。

因此，您可以创建如下所示的ViewModel（当然还要为所有相关属性实现INotifyPropertyChanged）：

public class ViewModel
{
    public string Geometry { get; set; }
}

通过从文件中读取Geometry属性以某种方式对其进行初始化，并像这样绑定它：

<Path Fill="Black" Data="{Binding Geometry}"/>

使用您的样本几何体测试它：

DataContext = new ViewModel
{
    Geometry = "M39.967 23.133c-0.211 0.189-0.523 0.199-0.748 0.028l-7.443-5.664l-3.526 21.095c-0.013 0.08-0.042 0.153-0.083 0.219  c-0.707 3.024-4.566 5.278-9.104 5.278c-5.087 0-9.226-2.817-9.226-6.28s4.138-6.281 9.226-6.281c2.089 0 4.075 0.466 5.689 1.324  l4.664-26.453c0.042-0.242 0.231-0.434 0.475-0.479c0.237-0.041 0.485 0.068 0.611 0.28l9.581 16.192  C40.227 22.637 40.178 22.945 39.967 23.133z"
};

Answer 2

您可以使用XamlReader从文件中加载xaml

例如

        using (FileStream fs = new FileStream(myFile, FileAccess.Read))
        {
            Viewbox viewBox = (Viewbox)XamlReader.Load(fs);
            this.Content = viewBox; //this is a window here
        }

上面的示例从给定文件加载Viewbox并将其设置为窗口的内容，而窗口的内容又将在窗口中显示文件的内容

您可以根据需要调整代码。如果你需要从字符串加载，你可以像

一样使用它

        Viewbox viewBox = (Viewbox)XamlReader.Parse(xamlString);
        this.Content = viewBox;

在上面的示例中，ViewBox根据您在问题中给出的xaml使用，它可能会根据您的需要进行更改。

WPF MVVM：从xaml文件动态绘制形状

2 个答案: