根据WPF控件的当前位置设置X，Y边距

Question

我制作了一个简单的用户控件，用于呈现简单的音乐栏。

<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小节乐谱的示例用户控件

<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的X，Y边距都相同。如何解决此问题，以便每个Bar渲染器的线条都将绘制在其区域中？

预期的输出应该是这样的：

谢谢。

Answer 1

以某种方式将所有BarRenderers（画布）缩小为零。添加一些大小：

<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>

它看起来像只有一个条，因为即使在边界之外也显示了画布内容，并且在同一位置的顶部彼此显示了4个BarRenderer