通过代码和非统一位置在图像顶部生成标签答案

【问题标题】：generate labels on top of image by code and non uniform locations通过代码和非统一位置在图像顶部生成标签
【发布时间】：2018-04-24 13:12:13
【问题描述】：

我是 WPF 新手。我正在尝试重写我之前使用 winforms 完成的应用程序。它本质上是一种乐器（拨弦）的图像，显示每个音符位置上的标签以及演奏它的能力。

我的问题是：我制作了一个网格，并在第一行插入了一个资源图像，跨越 3 个列。现在我需要在这张图片上放置多个标签，每个标签对应一个特定的音符。我如何在图像上放置标签.. 请看这两张图片

这是我当前的 WPF 布局

这就是我在winforms中的做法

是否可以通过代码生成多个标签，就像第二张图片一样？

请注意，这些标签将在播放歌曲时显示。每个标签将对应一个特定的音符

【问题讨论】：

Canvas 比 Grid 更适合这项任务 - 您可以将标签添加为 Canvas 子项并为其分配固定坐标 - 非常类似于 winforms
谢谢您的快速回复.. 我使用网格的原因是我想在我的窗口上添加一些调整大小限制.. 最小最大高度和宽度以及保持纵横比.. 我仍然试图找到一个好方法来做到这一点.. 但我不确定我是否需要网格来做到这一点
顺便说一句，我的应用程序将在图像下方包含更多控件。例如按钮、组合框和文本框.. 在这里我不显示它们。
您可以轻松地将控件分层。透明背景在wpf中效果很好，比winforms实用多了。因此，您可以将文本框和内容放在其他图层之上。
对于标签的东西，从用户控件的角度来考虑。您可以在其中放置一个文本块用于字母或带有水平堆栈面板的项目控件作为项目容器。可以使用带有画布的项目控件来呈现标签。将集合和模板分别绑定到标签/用户控件中。 itempresenter 可以将 canvas.left 和 canvas.top 绑定到视图模型的属性。你可以计算这些。

标签： c# wpf image xaml label

【解决方案1】：

您需要将画布和您选择的布局控件结合起来。在这个例子中，我使用了停靠面板。

<DockPanel LastChildFill="True">
        <StackPanel DockPanel.Dock="Bottom" Height="80" Orientation="Horizontal" HorizontalAlignment="Right">
            <Button Margin="5">Click me</Button>
            <Button Margin="5">Click me</Button>
            <Button Margin="5">Click me</Button>
        </StackPanel>
        <Canvas x:Name="FretLayoutCanvas">
            <Button Canvas.Left="5" Canvas.Top="15" >Fret 1</Button>
            <Button Canvas.Left="55" Canvas.Top="55" >Fret 2</Button>
        </Canvas>
</DockPanel>

这看起来像这样：

在后面的代码中，将您的控件添加到 FretLayoutCanvas 并为每个控件计算适当的 Left 和 Top。

【讨论】：

我现在遇到的问题.. 即使我的应用程序中的所有东西都可以调整大小.. 网格位置内画布上的标签在调整窗口大小时会丢失那里的位置（如我所料） .
我正在尝试找到一种方法，在调整窗口大小时让标签贴在它们的位置上。我可以将标签位置与特定图像像素相关联吗？
查看窗口大小调整事件 - 您将不得不再次触发布局逻辑。可能值得为此研究适当的自定义控件。