Draw a line between two controls


I would like to create a simple structure of organizational chart, and so far, i'm dynamically adding buttons to StackLayout. When i click a button, i create another one and put him in StackPanel.

Now i would like to create a line, connecting clicked button and newly created one.

I would appreciate any help!


  • PabloGermanoPabloGermano UYMember ✭✭

    Hello there!
    Do you want to connect the buttons with a vertical line between each other?

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    Maybe use a BoxView with WidthRequest = 1 ?

  • BotjanKamenikBotjanKamenik USMember
    edited June 2015

    Yes, I would like to connect controls vertically. I dont see how BoxView would help me here :S

  • PabloGermanoPabloGermano UYMember ✭✭

    That´s the answer right there :)

    Use a BoxView WidthRequested="1"

  • AndrewMobileAndrewMobile USMember ✭✭✭✭

    depending on how advanced you want to go with your 'chart', another idea is to use this library:

  • BotjanKamenikBotjanKamenik USMember

    I just want very simple structure, i'm new to xamarin, and was thinking if there was a way, that when i add new button, it would draw a line from the created one to clicked. Just that. Very simple.

    I will look into library, you suggested. Thanks :smile:

  • PabloGermanoPabloGermano UYMember ✭✭
    edited June 2015

    In xaml it would be something like this:

                    <BoxView HeightRequested="100" WidthRequested="1" BackgroundColor="Black"/>

    This is how you use a BoxView (a simple rectangle) as a vertical line.

    Cheers smile:

  • hahahah awesome @YimingHsu and @PabloGermano

  • hyderabadihyderabadi USMember ✭✭✭

    @PabloGermano How can i get the HeightRequested="100" WidthRequested="1" these properties for boxview. Please help me.

    Thanks in advance.

  • batmacibatmaci DEMember ✭✭✭✭✭
    edited May 2018

    Does anybody know why this is not working? BoxView height is more than 1 although i set as 1.

    <StackLayout Orientation="Horizontal">
                    <BoxView BackgroundColor="Silver" HeightRequest="1"  HorizontalOptions="FillAndExpand"/>
                    <Label Text="OR"/>
                    <BoxView BackgroundColor="Silver" HeightRequest="1" HorizontalOptions="FillAndExpand"/>
  • DavidDancyDavidDancy AUMember ✭✭✭✭

    @batmaci I debug this kind of problem by setting a BackgroundColor on (in this case) the StackLayout. I suspect that the StackLayout isn't expanding to fill its available space, but is sizing itself to be the minimum required to host its 3 children. Since there's no WidthRequest on each BoxView I think they'll come out at 0 width and all you'll see is the Label.

    Two possible solutions: 1. Use WidthRequest to set the size of the BoxViews. 2. Use a WidthRequest or HorizontalOptions on the StackLayout to force it to expand horizontally.

    In general I find StackLayout often doesn't do what I think I told it to do, so unless I have no alternative I don't use it much. I almost always get better (i.e. predictable) results from Grid even though it's a bit more work to set up.

  • batmacibatmaci DEMember ✭✭✭✭✭

    @DavidDancy right, i figured out already. setting HorizontalOptions to center, start, end fixes the problem.

  • DanielHindrikesDanielHindrikes SEMember ✭✭

    Never use FillAndExpand if you really do not need it. Fill will do the job in the most cases. I have seen so many strange behaviours in apps because people have used FillAndExpand.

Sign In or Register to comment.