CODEWITHSUNDEEP
wpfcanvasuser-controls
Joy Hyuk Lee
Joy Hyuk Lee

Reputation: 776

Set X,Y margins depending on current location of the WPF control

I made a simple user control that renders a simple music bar.

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

and here is a sample user control that renders 4-bar music score

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

but the result shows only one bar. enter image description here

I guess it is because of Line's X, Y margins are all same. how can I fix it so every Bar renderer's lines will be drawn in their area?

The expected output should be something like: enter image description here

Thank you.

Upvotes: 1

Views: 56

Answers (1)

ASh
ASh

Reputation: 35730

somehow all BarRenderers (Canvases) shrunk to zero. add them some size:

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

it looked like only one bar, because Canvas content is displayed even outside bounds and 4 BarRenderers were displayed on top on each other, in the same location

Upvotes: 1

Related Questions