如何在WPF中绑定行元素指向xml数据

本文关键字：元素 xml 数据 绑定 WPF | 更新日期: 2023-09-27 18:13:14

我有一些数据

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

现在我想用这些数据创建一条曲线。我想用lineesegents。但我不明白如何将linessegment点绑定到此数据?

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

<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>

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

提前感谢!

如何在WPF中绑定行元素指向xml数据

您可以简单地使用PolyLineSegment，而不是将点数组转换为LineSegment集合。如果Binding最初只需要工作(最初将点数组转向PolyLineSegment的PointCollection，之后对点数组的每次更改都不会触发更新到PolyLineSegment)，您可以这样做:

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

下面是将点数组转换为PointCollection的转换器:

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();
   }
}

然后在XAML代码中:

<Window x:Class="yourNameSpace.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"            
        xmlns:local="clr-namespace:yourNameSpace"/>
  <Window.Resources>
     <local:PointArrayToPointCollection x:Key="pointsToPointCollection"/>
  </Window.Resources>
  <Image>
     <Image.Source>
        <DrawingImage>
           <DrawingImage.Drawing>
             <GeometryDrawing>
               <GeometryDrawing.Pen>
                  <Pen Brush="Red" Thickness="1"></Pen>
               </GeometryDrawing.Pen>
               <GeometryDrawing.Geometry>
                  <PathGeometry>
                    <PathFigure>
                       <PolyLineSegment Points="{Binding Points,
                          Converter={StaticResource pointsToPointCollection}}"/>
                    </PathFigure>
                  </PathGeometry>
               </GeometryDrawing.Geometry>
             </DrawingImage.Drawing>
        </DrawingImage>
     </Image.Source>
  </Image>
</Window>

这个答案可能不能完全解决你的问题，但是使用PolyLineSegment的想法应该会给你指明正确的方向。

:

嗯，我只是觉得你需要一些实际的代码在实际应用中运行。如果您只需要在KXAML编辑器中使用XAML代码进行测试(或使用)，则没有理由在这里使用XML数据。因为对于PolyLineSegment的Points属性，我们需要一个PointCollection，所以使用任何其他类型的数据都需要一些转换(这只能通过后面的代码完成)。所以我们只需要在XAML代码中指定PointCollection作为一个实例，它可以像这样:

<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>

我知道你可能有一个更连续的点的集合(这可以形成一条几乎弯曲的线)。如果你想要一些完美的曲线，你可以尝试像这样玩BezierSegment, PolyBezierSegment, QuadraticBezierSegment, PolyQuadraticBezierSegment:

<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>

或者你甚至可以尝试使用所谓的迷你路径语言来定义PathGeometry，像这样:

<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，迷你路径语言可以工作。您可以将此迷你语言用于PathFigureCollection(由PathFigureCollectionConverter转换)和Path形状的Data属性。

相关文章：