Forum Xamarin.Forms
We are excited to announce that the Xamarin Forums are moving to the new Microsoft Q&A experience. Q&A is the home for technical questions and answers at across all products at Microsoft now including Xamarin!

We encourage you to head over to Microsoft Q&A for .NET for posting new questions and get involved today.

How to add BoxView in relative layout with WidthConstraint dependent on external data

LearningThisStuffLearningThisStuff Member
edited July 1 in Xamarin.Forms

Hi guys,

I'm currently trying to display tasks with BoxViews like this

However the width of this BoxViews should be dependent on the length of the task at hand.
I tried this with RelativeLayout + BoxViews and tried DataBinding on the Constraint Factor but then found out DataBinding is not useable in ConstraintExpressions.
Does anyone has a straight forward solution to this issue that doesn't come to my mind?

Also if you have an idea how I can archieve the same outcome with another method, please let me know

Sorry if its something obvious I'm not aware of yet, I'm a newbie in Xamarin Forms.
Thanks in advance!

Answers

  • jezhjezh Member, Xamarin Team Xamurai
    edited July 9

    You can try to use StackLayout to achieve this.When we check document Xamarin.Forms StackLayout ,we will know:

    A StackLayout organizes child views in a one-dimensional stack, either horizontally or vertically. By default, a StackLayout is oriented vertically. In addition, a StackLayout can be used as a parent layout that contains other child layouts.

    I made a simple demo, you can check it:

     public class HorizontalStackLayoutPageCS : ContentPage
        {
            StackLayout children_stackLayout;
            static int i = 0;
    
    
            public HorizontalStackLayoutPageCS()
            {
                Title = "Horizontal StackLayout demo";
                var root_stackLayout = new StackLayout {
                    Orientation = StackOrientation.Vertical,
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions = LayoutOptions.Start,
    
                };
    
                Button addBtn = new Button { Text = "Add BoxView", WidthRequest = 200, HeightRequest = 80, BackgroundColor = Color.Gray };
    
                addBtn.Clicked += AddBtn_Clicked;
                root_stackLayout.Children.Add(addBtn);
    
                 children_stackLayout = new StackLayout
                {
                    Margin = new Thickness(20),
                    Orientation = StackOrientation.Horizontal,
                    HorizontalOptions = LayoutOptions.Center,
                    VerticalOptions=LayoutOptions.Start,
                    Children =
                    {
                        new BoxView { Color = Color.Red ,HeightRequest=80},
                    }
                };
    
                root_stackLayout.Children.Add(children_stackLayout);
                Content = root_stackLayout;
    
    
            }
    
            private void AddBtn_Clicked(object sender, System.EventArgs e)
            {
                    if (i == 0)
                    {
                        var boxview = new BoxView { Color = Color.Yellow, WidthRequest = 120, HeightRequest = 60 };
                        children_stackLayout.Children.Add(boxview);
                    }
                    else if (i==1){
                        var boxview = new BoxView { Color = Color.Blue, WidthRequest = 30, HeightRequest = 60 };
                        children_stackLayout.Children.Add(boxview);
                    }
                    else if (i == 2)
                    {
                        var boxview = new BoxView { Color = Color.Green, WidthRequest = 60, HeightRequest = 60 };
                        children_stackLayout.Children.Add(boxview);
                    }else 
                  {
                    var boxview = new BoxView { Color = Color.Orange, WidthRequest = 100, HeightRequest = 60 };
                    children_stackLayout.Children.Add(boxview);
                  }
    
                  i++;
            }
        }
    

    The result is:

  • jezhjezh Member, Xamarin Team Xamurai

    Hi @LearningThisStuff, have you resolved your question?

Sign In or Register to comment.