Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Xamarin.Forms - StackLayout labels going outside device width

Can set percentage widths for elements?

The problem ive got is the 2nd label pushes the button off screen, how can you force a label to only take up the space available. I've tried setting minimum width of the elements.

 new StackLayout
 {
     Orientation = StackOrientation.Horizontal,                                    
     Spacing = 0,
     Children = {       
         new Label() { Text = "TITLE", HorizontalOptions = LayoutOptions.Start},
         new Label() { Text = "fsdf dsfsd fsdfsdfs ewtrey vjdgyu jhy jgh tyjht rhyrt rgtu gtr ujtrey gt yu tgrt uh tyui y5r rtuyfgtj yrjhrytjtyjy jty t ruy ujh i rt", HorizontalOptions = LayoutOptions.Center, LineBreakMode = LineBreakMode.WordWrap},                                        
         new Button() { Text = "wee", HorizontalOptions = LayoutOptions.EndAndExpand}                                      
     }
 },       
like image 558
Cadab Avatar asked Jul 18 '14 10:07

Cadab


1 Answers

Try Using OnSizeAllocated(double width, double height),

Code In your Xamarin.Forms Page

protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);

        Metrics.Instance.Width=width;
        Metrics.Instance.Height=height;
    }

Singleton Class to Save the width and Height and Check orientation change

public class Metrics
    {

        private static Metrics _instance;

        protected SessionData ()
        {
        }

        public double Width{ get; set; } //Width

        public double Height{ get; set; } //Height
        }

Creating Stacklayout

   var StackchildSize = Metrics.Width/3; 
   new StackLayout
   {
   Orientation = StackOrientation.Horizontal,                                    
   Spacing = 0,
   Children = {       
     new Label() { Text = "TITLE", HorizontalOptions = LayoutOptions.Start
     WidthRequest=stackChildSize},
     new Label() { Text = "<Your Text>", WidthRequest=stackChildSize,},                                       
     new Button() { Text = "wee", HorizontalOptions = LayoutOptions.EndAndExpand,
     WidthRequest=stackChildSize,}                                      
 }

},

like image 96
Femil Shajin Avatar answered Oct 28 '22 03:10

Femil Shajin