Is it possible to define height and width in percentage in Xamarin forms?

Shelly_Bhogal

How we can define height and width in percentage in Xamarin forms so that it can support different screens?

ClintStLaurent

That's basically what the '' value is for in your grid column and width definitions.
But its not percent, exactly. Think of it as number of pieces of the pie.
If one column is 3 and one is 4* that's a total of 7* total width. The first column will be 3/7 of the total. The second with be 4/7 of the total.
If you want percentage then just make sure your columns add up to 100, then divide accordingly.

seanyda

Here is a Grid with 2 Columns, 35% of the page and 65%.

g = new Grid
            {
                ColumnDefinitions = {
                    new ColumnDefinition { Width = new GridLength(0.35, GridUnitType.Star)},
                    new ColumnDefinition { Width = new GridLength(0.65, GridUnitType.Star)},
                },
                ColumnSpacing = 0,
                RowSpacing = 0
            };

ClintStLaurent

You can say 0.35 or 35... as long as all your units are in the same units the relative percentages remain the same. .35+.65=1... 35+65=100 - all the same only different. In XAML we tent to just use whole numbers.

Or in XAML

          <Grid>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="35*" />
              <ColumnDefinition Width="65*" />
            </Grid.ColumnDefinitions>

Shelly_Bhogal

Thanks Clint StLaurent and Sean Davies for the great explanation.

SteveShaw.5557

Note that if you have some columns (or rows) defined with absolute numbers (e.g. "20") or with "Auto", and some defined with asterisks ("*", "2*") then the asterisk columns divide the "leftover" size, after the absolute and auto columns (or rows) take their space.

Example: 5 rows with values:*, 40, 2*, Auto, *: One block gets a fixed size 40, one block grows to fit its contents Auto, and the 3 other blocks divide the remaining space, perhaps filled with a background color, with a 2x larger filler between the two original blocks.

GerryH

It would save a lot of time if Xamarin could provide the ability to draw text, lines, circles, plus measure how much space is needed to for text, along with a "Paint" method. I have spent hours trying to get a complex grid to fill the screen nicely (on different screen sizes) and I am getting tired of it.

In particular "CenterAndExpand" should be renamed to "CenterAndNotExpand" since it does not expand.

ClintStLaurent

This is not Windows Forms or GDI++ ... nor 1998

You can do that sort of low-level drawing in custom renderers on each platform. But the PCL/.NETStandard is supposed to be agnostic of all that by design.

There are also nugets out that for doing shape drawing if you google around. Maybe one of those will help you out.

on different screen sizes)

Screen size normally won't matter with good math. The control self sizes... Divide in half, divide in half... or by percent... whatever... You shouldn't be doing work that is size dependent or even knows what the size is. As soon as you need to know the size you're going down a bad direction. - Or at least that's the basic philosophy.

XamarinProblems

Sorry to revive this thread, but it seems an exstention of the question and I thought benificial to anyone else who might visit this question. Does anyone here know if there is a way to assign the width as auto but give it a limit to auto size to?

the specific scenarion requires of me to create a string consisting of 3 different labels that is using one line at max.

The 3 labels:
String - icon - String.

The to ensure the 3 labels only use 1 line the labels follow LineBreakMode="TailTruncation" if they take more than about half the space on the screen but if they take less they should only take that space. e.g.

         screen size
|_____________________________ | 

     big labels
| ababba.. (icon) abababa...__|

     small labels
| ab (icon) ab_________________|

     mixed 1
| ab (icon) aababababaaba...__|

     mixed 2
| abaaba... (icon) ab___________|

My current solution I make a grid with ColumnDefinition Width="" | Width="auto" | Width="" that will ruin the scenarios with label 1 being small. e.g. the small label scenario creates the below and not the wanted above.

| ab________(icon) ab___________|

Hence why i need it to be able to say auto size if needed but only take half the available space if label is too long.

ClintStLaurent

You assign both in number of "stars"
*
2*
8*
etc.
But its not percent.
Think of it as "number of slices out of the total - LIke a pizza.
If you have a total of 22* of width in your form, and one control uses 11* that's going to be half. And so on.

XamarinProblems

@ClintStLaurent Sorry didnt notice the post removed my *'s. In the post where i wrote my current difinitions it should say:
ColumnDefinition Width=" * " | Width="auto" | Width=" * "

Which means they get an equal half of the remaining pizza slices, the issue is sometimes string 1 might only need one slice of pizza to fit and then it should only take that much and leave the rest for last string. Current setup creates the last scenario described, while want it should make if possible is the "small labels" scenario.

For that you would usually use Auto but with Auto you cant diffine that the autosize is not allowed to take more than the remaining half, if you get what i mean. So if i assign auto to the first string it will take maybe 80% of the space potencially producing:

| aababababaaba (icon) ab...|

When i want what is described as the "Big labels" scenario

The strings are not in a controlled environment so i can't manually assing the numbers for the amount of pizza they should get. i have to be able to say take maximum 50% but less if you dont need it.