时间戳

首页 > 解决方案 > 应用于 PathGeometry 的数据绑定

c# - 应用于 PathGeometry 的数据绑定

问题描述

我试图通过将 Code-Behind 中定义的 PathFigureCollection 绑定到相应 UI 元素的 Figures 属性来呈现简单的图像。PropertyChanged 在调试器中显示为 null 并且我尝试渲染的数字没有出现。

这是我第一次实现数据绑定，所以我猜问题在于我对它的理解。我发现的大多数类似问题都是通过在 XAML 中设置 DataContext 变量或设置 Source 而不是 Path 来解决的。我实施了这些解决方案，但它们并没有解决我的问题。

 <Window x:Class="DrawingSandBox.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:local="clr-namespace:DrawingSandBox"
    mc:Ignorable="d"
    Title="MainWindow" Height="450" Width="754">
<Grid Margin="0,0,0,0">
    <Image HorizontalAlignment="Left" Height="400" Margin="10,10,10,10" VerticalAlignment="Bottom" Width="700" RenderTransformOrigin="0.5,0.5">
        <mage.RenderTransform>
            <TransformGroup>
                <ScaleTransform/>
                <SkewTransform/>
                <RotateTransform Angle="0"/>
                <TranslateTransform/>
            </TransformGroup>
        </Image.RenderTransform>
        <Image.Source>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Brush="Black">
                        <GeometryDrawing.Pen>
                            <Pen Thickness="11" Brush="Black"/>
                        </GeometryDrawing.Pen>
                        <GeometryDrawing.Geometry>
                            <PathGeometry Figures="{Binding Path=Frame, UpdateSourceTrigger=PropertyChanged}" /> 
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Image.Source>
    </Image> 

</Grid>


namespace DrawingSandBox 
{
public partial class MainWindow : Window
{
    private static readonly CurveBuilder curve = new CurveBuilder();

    public MainWindow()
    {
        InitializeComponent();
        DataContext = curve;
    }
}
public class CurveBuilder : INotifyPropertyChanged
{

    private PointCollection points;
    private PolyBezierSegment seg;
    private PathFigureCollection frame;
    public event PropertyChangedEventHandler PropertyChanged;
    public PathFigure Figure;
    public PathFigureCollection Frame
    {
        get
        {
            return frame;
        }

        set
        {
            if (value != frame)
            {
                frame = value;
                NotifyPropertyChanged("Frame");
            }
        }
    }

    public CurveBuilder()
    {
        points = new PointCollection { new Point(20, 20), new Point(40, 40) };
        seg = new PolyBezierSegment(points, true);
        Figure = new PathFigure(new Point(50, 50), new PathSegmentCollection { seg }, false);
        Frame = new PathFigureCollection { Figure };
    }

    public void NotifyPropertyChanged([System.Runtime.CompilerServices.CallerMemberName] string name = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
    }

}
}

就目前而言，此代码仅显示一个空白页。

标签： c#wpf

解决方案

您至少需要 3 分PolyBezierSegment才能显示。

根据文档：

三次贝塞尔曲线由四个点定义：起点、终点和两个控制点。PolyBezierSegment 通过将 Points 属性设置为一组点来指定一条或多条三次贝塞尔曲线。对于集合中的每三个点，第一个和第二个点指定曲线的两个控制点，第三个点指定结束点。

绑定是正确的。再添加一个Point到您的PointCollectionor 使用PolyQuadraticBezierSegmentor QuadraticBezierSegment。

推荐阅读