Question

我使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <div id="parent"> <p data-bind="text: test"></p>  <div id="child" data-bind="with: childVM"> <p data-bind="text: test"></p> </div> <script> // Register a callback window.callbacks = window.callbacks || []; window.callbacks.push(function() { window.myVM.childVM({ test: "Child value" }); }); </script>  </div>函数绘制线条。但似乎线条会影响画布上其他线条的位置。所以我需要为所有行添加不同的z-index值。有没有办法绘制具有不同z-index的线条，因此它们不会影响其他线条的位置。或者是否有其他方法可用于绘制线条，例如绘制文本我已将DrawingContext.DrawLine方法替换为DrawText。

以下是我现在使用的示例代码：

TextBlock

Answer 1

为了向Canvas添加动态形状集合，通常会使用Canvas声明ItemsControl作为其ItemsPanel。 Canvas的ItemsSource属性将绑定到以抽象方式表示形状数据的数据项集合。 ItemsControl的ItemTemplate将负责可视化每个单独的项目。

<ItemsControl ItemsSource="{Binding ShapeItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Path Data="{Binding Geometry}"
                  Stroke="{Binding Stroke}"
                  StrokeThickness="2"/>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

定义数据项类的视图模型如下所示。请注意，除Geometry和Stroke属性外，您可能还有其他属性来定义视觉外观。

public class ShapeItem
{
    public Geometry Geometry { get; set; }
    public Brush Stroke { get; set; }
}

public class ViewModel
{
    public ObservableCollection<ShapeItem> ShapeItems { get; }
        = new ObservableCollection<ShapeItem>();
}

您可以在MainWindow中实例化并初始化它，如下所示：

public MainWindow()
{
    InitializeComponent();

    var vm = new ViewModel();

    vm.ShapeItems.Add(new ShapeItem
    {
        Geometry = new LineGeometry(new Point(100, 100), new Point(200, 200)),
        Stroke = Brushes.Green
    });

    vm.ShapeItems.Add(new ShapeItem
    {
        Geometry = new LineGeometry(new Point(200, 200), new Point(100, 300)),
        Stroke = Brushes.Red
    });

    DataContext = vm;
}

您现在可以向ShapeItem类添加ZIndex属性

public class ShapeItem
{
    public Geometry Geometry { get; set; }
    public Brush Stroke { get; set; }
    public int ZIndex { get; set; }
}

并将以下内容添加到ItemsControl：

<ItemsControl ItemsSource="{Binding ShapeItems}">
    ...
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="Panel.ZIndex" Value="{Binding ZIndex}"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

ShapeItem类还必须实现INotifyPropertyChanged接口，以防其属性在添加到集合后更改其值。

如何在c＃wpf应用程序中绘制具有不同z索引的多行

1 个答案: