线的终点之间的差距

Question

我有一个ObservableCollection类型Line，用作ItemsSource的{​​{1}}，以便我可以绘制图表：

查看：

ItemsControl

视图模型：

<ItemsControl VerticalAlignment="Bottom" SnapsToDevicePixels="True"
              Height="200" ItemsSource="{Binding LineData}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <UniformGrid Rows="1"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
</ItemsControl>

public ObservableCollection<Line> LineData { get; set; } LineData = new ObservableCollection<Line>(); for (int i = 0; i < stats.Length; i++) { if (i < stats.Length - 1) { LineData.Add ( new Line() { X1 = 0.0, Y1 = 200 - stats[i], X2 = SpanWidth / stats.Length, Y2 = 200 - stats[i + 1], Stroke = Brushes.SteelBlue } ); } } 是一个绑定到SpanWidth宽度的属性（稍后会更改）。我面临的问题是相邻线的X1和X2点之间存在间隙。

以下是在正常窗口状态下查看时的样子：

这是窗口延伸时的样子：

正如您所看到的，差距几乎完全消失了。但是，要实现这一点，我不得不将窗口拉伸到两个显示器的宽度上。

我尝试捕捉像素，但除了略微锐化边缘（通过去除抗锯齿）之外没有做太多的事情，而间隙仍然存在。

有没有办法解决这个问题，还是我必须切换到Window？我希望能够使用单独的行完成它，因为我计划稍后对各个段进行一些操作。

修改

看起来克莱门斯的回答非常有效：

Answer 1

我建议您不要在代码中创建UI元素。第一步是创建派生的ItemsControl，它使用Line个对象作为项容器：

public class LineItemsControl : ItemsControl
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new Line();
    }

    protected override bool IsItemItsOwnContainerOverride(object item)
    {
        return item is Line;
    }
}

接下来，您将在XAML中使用这样的ItemsControl，其中Canvas作为其ItemsPanel和ItemsContainerStyle用于行项目：

<local:LineItemsControl ItemsSource="{Binding LineItems}">
    <local:LineItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <Canvas/>
        </ItemsPanelTemplate>
    </local:LineItemsControl.ItemsPanel>
    <local:LineItemsControl.ItemContainerStyle>
        <Style TargetType="Line">
            <Setter Property="X1" Value="{Binding X1}"/>
            <Setter Property="Y1" Value="{Binding Y1}"/>
            <Setter Property="X2" Value="{Binding X2}"/>
            <Setter Property="Y2" Value="{Binding Y2}"/>
            <Setter Property="Stroke" Value="SteelBlue"/>
            <Setter Property="StrokeStartLineCap" Value="Round"/>
            <Setter Property="StrokeEndLineCap" Value="Round"/>
        </Style>
    </local:LineItemsControl.ItemContainerStyle>
</local:LineItemsControl>

最后，您将拥有一个视图模型项类，如下所示：

public class LineItem
{
    public double X1 { get; set; }
    public double Y1 { get; set; }
    public double X2 { get; set; }
    public double Y2 { get; set; }
}

并将其实例添加到集合属性，例如像这样：

public ObservableCollection<LineItem> LineItems { get; set; }
...
LineItems = new ObservableCollection<LineItem>();
LineItems.Add(new LineItem { X1 = 20, Y1 = 10, X2 = 100, Y2 = 50 });
LineItems.Add(new LineItem { X1 = 100, Y1 = 50, X2 = 150, Y2 = 150 });