Draw a Vertical line

SreeeeSreeee INMember ✭✭✭✭

Hi everyone,

I am trying to draw a vertical line in my project using box view.

    <StackLayout
                Orientation="Vertical">
            <BoxView  
               VerticalOptions="CenterAndExpand"
               HorizontalOptions="Fill"
               WidthRequest="50"
               HeightRequest="1" 
               Color="Blue"/>
        </StackLayout>

But the line is always showing in horizontal format. I try to change the orientation of stacklayout to vertical, but no change in the line orientation. No orientation property is available for box view. How can I draw a vertical line covering the full page?

Thanks in advance....

Best Answers

  • JimBennettJimBennett GB ✭✭✭✭
    Accepted Answer

    Well your box is 50 points wide by 1 point high - which will be a horizontal line. Maybe try 1 wide by 50 high?
    Also orientation is the way the children of the stack panel are arranged, nothing to do with rotation.

  • JimBennettJimBennett GB ✭✭✭✭
    Accepted Answer

    You just need to set the vertical options to fill, horizontal options to start/center/end, whichever is applicable, set a width request to the width you want and don't set a height request.

    <BoxView  
        VerticalOptions="Fill"
        HorizontalOptions="Center"
        WidthRequest="1"
        Color="Blue"/>
    
  • SreeeeSreeee IN ✭✭✭✭
    Accepted Answer

    Need to avoid the stacklayout for filling the line into the whole page.
    Full code for vertical line:

        <?xml version="1.0" encoding="utf-8" ?>
        <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     xmlns:local="clr-namespace:Vertical_Line"
                     x:Class="Vertical_Line.MainPage">
    
            <BoxView  
                   VerticalOptions="Fill"
                   HorizontalOptions="Center"
                   WidthRequest="1"
                   Color="Blue"/>
        </ContentPage>
    

    Thank you very much @JimBennett for your attention....

  • SreeeeSreeee IN ✭✭✭✭
    Accepted Answer

    Solved by apply the following code in my project:

      <ListView ItemsSource="{Binding Items}"
            CachingStrategy="RecycleElement"
            HasUnevenRows="True">
    
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="20">
                            <StackLayout Padding="5" BackgroundColor="LimeGreen">
                                <Label Text="{Binding .}" 
                                 Style="{DynamicResource ListItemTextStyle}" />
                                <Label Text="{Binding .}" 
                                 Style="{DynamicResource ListItemDetailTextStyle}"/>
                            </StackLayout>
                            <BoxView  
                                   VerticalOptions="Fill"
                                   HorizontalOptions="Start"
                                   WidthRequest="1"
                                   Color="Blue"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    

    // Code Behind

      public partial class ListViewPage1 : ContentPage
        {
            public ObservableCollection<string> Items { get; set; }
    
        public ListViewPage1()
        {
            InitializeComponent();
    
            Items = new ObservableCollection<string>
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5"
            };
    
            BindingContext = this;
        }
      }
    

Answers

  • JimBennettJimBennett GBXamarin Team, Insider, University, Developer Group Leader ✭✭✭✭
    Accepted Answer

    Well your box is 50 points wide by 1 point high - which will be a horizontal line. Maybe try 1 wide by 50 high?
    Also orientation is the way the children of the stack panel are arranged, nothing to do with rotation.

  • SreeeeSreeee INMember ✭✭✭✭

    I already try that width and height format before post this question. If I use those measurements my output will be like following

  • SreeeeSreeee INMember ✭✭✭✭

    Got it. Need to change the HorizontalOptions to start from Fill, then I got the vertical line. But I want to draw this line to the entire page. How can I achieve that?

  • JimBennettJimBennett GBXamarin Team, Insider, University, Developer Group Leader ✭✭✭✭
    Accepted Answer

    You just need to set the vertical options to fill, horizontal options to start/center/end, whichever is applicable, set a width request to the width you want and don't set a height request.

    <BoxView  
        VerticalOptions="Fill"
        HorizontalOptions="Center"
        WidthRequest="1"
        Color="Blue"/>
    
  • SreeeeSreeee INMember ✭✭✭✭
    Accepted Answer

    Need to avoid the stacklayout for filling the line into the whole page.
    Full code for vertical line:

        <?xml version="1.0" encoding="utf-8" ?>
        <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                     xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                     xmlns:local="clr-namespace:Vertical_Line"
                     x:Class="Vertical_Line.MainPage">
    
            <BoxView  
                   VerticalOptions="Fill"
                   HorizontalOptions="Center"
                   WidthRequest="1"
                   Color="Blue"/>
        </ContentPage>
    

    Thank you very much @JimBennett for your attention....

  • SreeeeSreeee INMember ✭✭✭✭

    Thanks for your suggestions @JimBennett
    I need to draw this line under a list of items, like the following picture:

    My code is:

        <StackLayout>
                    <Image
                    Source="blue_holo_circle.png">
             <ListView>
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <ViewCell>
                                <StackLayout
                                   items inside listview like profile,name,time,like etc>
                        </StackLayout>
                            </ViewCell>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </StackLayout>
    

    At where I add the code for the line, I try to add before listview, but the line is not coming under the list. Can you tell how to draw the line under the list items?

  • SreeeeSreeee INMember ✭✭✭✭
    Accepted Answer

    Solved by apply the following code in my project:

      <ListView ItemsSource="{Binding Items}"
            CachingStrategy="RecycleElement"
            HasUnevenRows="True">
    
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout Padding="20">
                            <StackLayout Padding="5" BackgroundColor="LimeGreen">
                                <Label Text="{Binding .}" 
                                 Style="{DynamicResource ListItemTextStyle}" />
                                <Label Text="{Binding .}" 
                                 Style="{DynamicResource ListItemDetailTextStyle}"/>
                            </StackLayout>
                            <BoxView  
                                   VerticalOptions="Fill"
                                   HorizontalOptions="Start"
                                   WidthRequest="1"
                                   Color="Blue"/>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    

    // Code Behind

      public partial class ListViewPage1 : ContentPage
        {
            public ObservableCollection<string> Items { get; set; }
    
        public ListViewPage1()
        {
            InitializeComponent();
    
            Items = new ObservableCollection<string>
            {
                "Item 1",
                "Item 2",
                "Item 3",
                "Item 4",
                "Item 5"
            };
    
            BindingContext = this;
        }
      }
    
Sign In or Register to comment.