c# - WPF - 将图像绘制到 Canvas 并反复删除和重新绘制

Question

我目前在 WPF 应用程序中有一个带有图像背景的 Canvas 。在此 Canvas 上方，我有一个 slider 控件。当用户来回滑动 slider 的值时，我需要在 Canvas 上笔直向下绘制一条红线。每次更改 slider 值时我都需要这样做，以便红线始终与 slider 的拇指对齐。我在这里遇到的一个大问题是试图弄清楚如何有效地绘制线条，然后在用户更改 slider 的值时“删除”先前绘制的线条并在新的拇指值处绘制一条新线。如果我简单地重绘 Canvas 的背景图像，应用程序会延迟很多并且不能正常工作(另外，这并不能完全解决问题，因为无论如何您仍然可以看到之前绘制的线条)。

任何帮助将不胜感激，尤其是示例，因为这是我在 C# 中的第一个 WPF 应用程序，我仍然感受到它的独特性(与 Windows 窗体相反)。非常感谢!

Answer 1

与其尝试自己划清界线，一种更符合 WPF 的方法是使用 Line。目的。参见 Shapes and Basic Drawing in WPF Overview .既然要让线条与Slider对齐，那么可以使用数据绑定(bind)，将线条的X位置绑定(bind)到Slider的位置:

<DockPanel>
    <Slider
        Name="HorizontalSlider"
        DockPanel.Dock="Top"
        Maximum="{Binding ActualWidth, ElementName=Canvas}"/>
    <Canvas Name="Canvas" Margin="5.5 0">
        <Line
            X1="{Binding Value, ElementName=HorizontalSlider}"
            Y1="0"
            X2="{Binding Value, ElementName=HorizontalSlider}"
            Y2="{Binding ActualHeight, RelativeSource={RelativeSource AncestorType=Canvas}}"
            Stroke="Red"/>
    </Canvas>
</DockPanel>

(请注意，我通过将 Canvas 上的边距设置为 5.5 来作弊。 slider 上的拇指有一些厚度并且不会移动 slider 控件的整个宽度，所以为了使线条对齐以中心为中心，我试图使 Canvas 与轨 Prop 有相同的宽度。)