Установите поля X, Y в зависимости от текущего местоположения элемента управления WPF

Question

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

<UserControl x:Class="EzHarmony.ScoreUserControl.BarRenderer"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:EzHarmony.ScoreUserControl"
         mc:Ignorable="d" >
<Canvas>
    <StackPanel Name="StackPanel_Staff" Orientation="Vertical" Canvas.ZIndex="1">
        <Line Stroke="Black" X1="0" Y1="10" X2="200" Y2="10"></Line>
        <Line Stroke="Black" X1="0" Y1="10" X2="200" Y2="10"></Line>
        <Line Stroke="Black" X1="0" Y1="10" X2="200" Y2="10"></Line>
        <Line Stroke="Black" X1="0" Y1="10" X2="200" Y2="10"></Line>
        <Line Stroke="Black" X1="0" Y1="10" X2="200" Y2="10"></Line>
    </StackPanel>

    <Line Stroke="Black" X1="0" Y1="10" X2="0" Y2="52"></Line>
    <Line Stroke="Black" X1="200" Y1="10" X2="200" Y2="52"></Line>
</Canvas>

, и вот пример пользовательского элемента управления, который отображает 4-тактный музыкальный файл c оценка

<UserControl x:Class="EzHarmony.ScoreUserControl.OneStaffScore"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:EzHarmony.ScoreUserControl"
         mc:Ignorable="d" >
<WrapPanel>
    <local:BarRenderer></local:BarRenderer>
    <local:BarRenderer></local:BarRenderer>
    <local:BarRenderer></local:BarRenderer>
    <local:BarRenderer></local:BarRenderer>
</WrapPanel>

, но результат показывает только один столбец.

Я полагаю, это из-за Line 's X, Y поля одинаковы. как я могу исправить это так, чтобы линии каждого рендера Bar были нарисованы в их области?

Ожидаемый результат должен быть примерно таким:

Спасибо.

Answer 1

каким-то образом все BarRenderers (Canvases) сократились до нуля. добавьте их некоторого размера:

<WrapPanel>
    <local:BarRenderer Width="200" Height="52"/>
    <local:BarRenderer Width="200" Height="52"/>
    <local:BarRenderer Width="200" Height="52"/>
    <local:BarRenderer Width="200" Height="52"/>
</WrapPanel>

это выглядело только как одна полоса, потому что контент Canvas отображался даже за пределами границ, а 4 BarRenderers отображались друг над другом, в одном месте