Question

当我试图在WPF中使用MVVM模式绘制一条线时，我遇到了问题。我按照这个例子：Drawing line on a canvas in WPF MVVM doesn't work

我遇到的问题是，我想在已经实现的视频控件上绘制线条，我不能将其用作ItemsPanelTemplate。所以我的代码目前看起来像这样：

XAML

<ContentControl>
    <views:ExtendedMediaElement x:Name="MediaPlayer" Grid.Row="0"  ScrubbingEnabled="True" LoadedBehavior="Manual" UnloadedBehavior="Stop"
                    MediaLength="{Binding MediaLength, Mode=OneWayToSource}"
                    MediaPosition="{Binding MediaPosition, Mode=TwoWay}"
                    EndPosition="{Binding EndPosition, Mode=OneWay}"/>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseDown">
            <cal:ActionMessage MethodName="MouseDown">
                <cal:Parameter Value="$eventArgs"/>
                <cal:Parameter Value="{Binding ElementName=ItemControl}"/>
            </cal:ActionMessage>
        </i:EventTrigger>
    </i:Interaction.Triggers>
</ContentControl>

<ItemsControl x:Name="ItemControl" ItemsSource="{Binding Path=Lines}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Line X1="{Binding X1}" Y1="{Binding Y1}" X2="{Binding X2}" Y2="{Binding Y2}" Stroke="{Binding Stroke}" StrokeThickness="{Binding StrokeThickness}"></Line>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

视图模型

private ObservableCollection<Line> _lines;
public ObservableCollection<Line> Lines
{
    get { return _lines; }
    set
    {
        if (_lines != value)
        {
            _lines = value;

            NotifyOfPropertyChange("Lines");
        }
    }
}

public void MouseDown(MouseButtonEventArgs e, System.Windows.Controls.ItemsControl lineArea)
{
    System.Windows.Point p = e.GetPosition(lineArea);

    if (!isFirstPointSet)
    {
        firstClickPoint = p;
        isFirstPointSet = true;
        return;
    }

    Line l = new Line();
    l.X1 = firstClickPoint.X;
    l.Y1 = firstClickPoint.Y;
    l.X2 = p.X;
    l.Y2 = p.Y;
    l.Stroke = System.Windows.Media.Brushes.Black;
    l.StrokeThickness = 4;

    Lines.Add(l);

    firstClickPoint = p;
}

现在我绘制的第一条线总是完美地放在点击坐标上，但第二条线在X坐标上有一个偏移。 thrid线通常甚至不再可见。

提前感谢您的帮助！尼科

Answer 1

看一下下面的例子，ItemsControl中的每个项目都处于不同的位置。如果在画布32上绘制第一行，则第二行将在画布33上绘制。它们不会像您预期的那样在相同的大画布上绘制。

您需要设置ItemsPanel属性，就像您提供的链接中的答案一样。

WPF中ItemsControl中的绘制线会偏移新绘制的线条

1 个答案: