C# 如何在WPF中将线条指向xml数据

我有一些数据

<Array>
    <Element Value="30"/>
    <Element Value="50"/>
    <Element Value="10"/>
</Array>

现在我想用这些数据创建一条曲线。我认为应该使用线段。但我不明白如何将线段点绑定到此数据

我的意思是，有没有什么语法可以帮助写而不是写

<GeometryDrawing.Geometry>
  <PathGeometry>
    <PathFigure>
      <LineSegment Point="0,30"/>
      <LineSegment Point="20,50"/>
      <LineSegment Point="40,10"/>
    </PathFigure>
  </PathGeometry>
</GeometryDrawing.Geometry>

大概是这样的：

<GeometryDrawing.Geometry>
  <PathGeometry>
    <PathFigure>
      <LineSegment Point={Binding ????}/>
    </PathFigure>
  </PathGeometry>
</GeometryDrawing.Geometry>

public MainWindow(){
   InitializeComponent();
   //set DataContext
   //Initialize your Points here ...
   //...
   DataContext = this;       
} 
public Point[] Points {get;private set;}

<Page.Resources>
  <PointCollection x:Key="points">
     <Point>0,30</Point>
     <Point>20,50</Point>
     <Point>40,10</Point>
  </PointCollection>
</Page.Resources>
<Grid>  
  <Grid.Background>
   <DrawingBrush>
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyLineSegment Points="{StaticResource points}"></PolyLineSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Grid.Background>
</Grid>

<Grid>  
 <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyBezierSegment Points="10,10 200,150 300,30 320,10 330,-100 20,30">
                       </PolyBezierSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
 </Grid.Background>
</Grid>

<Grid>  
  <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing Geometry="M0,0 C10,10 200,150 300,30 320,10 330,-100 20,30">
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>                 
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
  </Grid.Background>
</Grid>

主要问题是如何使用绑定将坐标绑定到线段的点结构

---

提前谢谢

不必将点数组转换为

线段

集合，只需使用

多段线段

。如果

绑定

只需要初始工作（将点数组初始转换为

多段线段

的

点集合

，之后对点数组所做的每一次更改都不会触发对

多段线段

的更新），可以执行以下操作：

<GeometryDrawing.Geometry>
  <PathGeometry>
    <PathFigure>
      <LineSegment Point={Binding ????}/>
    </PathFigure>
  </PathGeometry>
</GeometryDrawing.Geometry>

public MainWindow(){
   InitializeComponent();
   //set DataContext
   //Initialize your Points here ...
   //...
   DataContext = this;       
} 
public Point[] Points {get;private set;}

<Page.Resources>
  <PointCollection x:Key="points">
     <Point>0,30</Point>
     <Point>20,50</Point>
     <Point>40,10</Point>
  </PointCollection>
</Page.Resources>
<Grid>  
  <Grid.Background>
   <DrawingBrush>
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyLineSegment Points="{StaticResource points}"></PolyLineSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Grid.Background>
</Grid>

<Grid>  
 <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyBezierSegment Points="10,10 200,150 300,30 320,10 330,-100 20,30">
                       </PolyBezierSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
 </Grid.Background>
</Grid>

<Grid>  
  <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing Geometry="M0,0 C10,10 200,150 300,30 320,10 330,-100 20,30">
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>                 
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
  </Grid.Background>
</Grid>

以下是用于将点数组转换为

点集合的转换器：

public class PointArrayToPointCollection : IValueConverter {
   object IValueConverter.Convert(object value, Type targetType, 
                                  object parameter, CultureInfo culture) {
      var points = value as IEnumerable<Point>;
      if(points != null) return new PointCollection(points);
      return Binding.DoNothing;
   }
   object IValueConverter.ConvertBack(object value, Type targetType,
                                      object parameter, CultureInfo culture) {
      throw new NotImplementedException();
   }
}

我知道你可能有一个更连续的点集合（可以形成一条几乎弯曲的线）。如果您想要一些完美的曲线，您可以尝试使用
BezierSegment
，
PolyBezierSegment
，
QuadraticBezierSegment
，
PolyQuadraticBezierSegment
，如下：

<GeometryDrawing.Geometry>
  <PathGeometry>
    <PathFigure>
      <LineSegment Point={Binding ????}/>
    </PathFigure>
  </PathGeometry>
</GeometryDrawing.Geometry>

public MainWindow(){
   InitializeComponent();
   //set DataContext
   //Initialize your Points here ...
   //...
   DataContext = this;       
} 
public Point[] Points {get;private set;}

<Page.Resources>
  <PointCollection x:Key="points">
     <Point>0,30</Point>
     <Point>20,50</Point>
     <Point>40,10</Point>
  </PointCollection>
</Page.Resources>
<Grid>  
  <Grid.Background>
   <DrawingBrush>
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyLineSegment Points="{StaticResource points}"></PolyLineSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Grid.Background>
</Grid>

<Grid>  
 <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyBezierSegment Points="10,10 200,150 300,30 320,10 330,-100 20,30">
                       </PolyBezierSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
 </Grid.Background>
</Grid>

<Grid>  
  <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing Geometry="M0,0 C10,10 200,150 300,30 320,10 330,-100 20,30">
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>                 
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
  </Grid.Background>
</Grid>



或者，您甚至可以尝试使用所谓的迷你路径语言来定义路径几何体，如下所示：

<GeometryDrawing.Geometry>
  <PathGeometry>
    <PathFigure>
      <LineSegment Point={Binding ????}/>
    </PathFigure>
  </PathGeometry>
</GeometryDrawing.Geometry>

public MainWindow(){
   InitializeComponent();
   //set DataContext
   //Initialize your Points here ...
   //...
   DataContext = this;       
} 
public Point[] Points {get;private set;}

<Page.Resources>
  <PointCollection x:Key="points">
     <Point>0,30</Point>
     <Point>20,50</Point>
     <Point>40,10</Point>
  </PointCollection>
</Page.Resources>
<Grid>  
  <Grid.Background>
   <DrawingBrush>
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyLineSegment Points="{StaticResource points}"></PolyLineSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
    </DrawingBrush>
  </Grid.Background>
</Grid>

<Grid>  
 <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing>
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>
             <GeometryDrawing.Geometry>
                <PathGeometry>
                   <PathFigure>
                       <PolyBezierSegment Points="10,10 200,150 300,30 320,10 330,-100 20,30">
                       </PolyBezierSegment>
                   </PathFigure>
                </PathGeometry>
             </GeometryDrawing.Geometry>
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
 </Grid.Background>
</Grid>

<Grid>  
  <Grid.Background>
   <DrawingBrush Stretch="None" Viewport="0.2,0.2,0.6,0.6">
      <DrawingBrush.Drawing>
          <GeometryDrawing Geometry="M0,0 C10,10 200,150 300,30 320,10 330,-100 20,30">
             <GeometryDrawing.Pen>
                <Pen Brush="Red" Thickness="1"></Pen>
             </GeometryDrawing.Pen>                 
          </GeometryDrawing>
      </DrawingBrush.Drawing>
   </DrawingBrush>
  </Grid.Background>
</Grid>



由于隐式的
GeometryConverter
，mini-path语言可以工作。您可以将此迷你语言用于
路径图形集合
（由
路径图形集合转换器
转换）和
路径
形状的
数据
属性。
x值应从何处来？我建议创建一个合适的视图模型（google
MVVM
），提供那些线段（或绑定到多段线元素的点集合）。x值是不变的步骤。例如，step=2，所以我们需要用以下坐标构建一条曲线：（0,30），（2,50），（4,20）谢谢您的回答。有没有办法不用转换器来绘制曲线？我需要在KaXML程序中构建曲线。因此，我不确定是否可以使用XAML背后的任何代码。@user1820318有关更多方法，请参阅我的更新。我想说的是，在KXAML中测试代码对于一些简单的UI设计来说是可以的，但对于真正需要绑定的其他功能（包括
Converter
）的应用程序来说，这并不好。您应该尝试使用Blend for Visual Studio。谢谢！这就是我需要的。