генерировать метки в верхней части изображения по коду и неодинаковым местам

Question

Я новичок в WPF .. Я пытаюсь переписать приложение, которое я ранее делал, используя winforms.По сути, это изображение музыкального инструмента (щипковая строка), которое показывает метки на каждом месте заметки и возможность его воспроизведения.

Мои вопросы: я создал сетку и вставил изображение ресурса в первый ряд, охватывающий3 колонныТеперь мне нужно разместить несколько ярлыков на этом изображении, каждый ярлык соответствует определенной музыкальной ноте.как разместить метки на изображении ... пожалуйста, посмотрите эти две картинки

Это мой текущий макет WPF

Вот как я это сделал в winforms

И можно ли сгенерировать несколько меток по коду, чтобы они походили на 2-е изображение?

Обратите внимание, что эти метки будут отображаться во время воспроизведения песни.Каждый лейбл будет соответствовать определенной музыкальной ноте

Answer 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 для каждого из них.