Xamarin Forms Box Sizing

ghasanghasan Member ✭✭

I have started doing development on Xamarin Forms recently, and one of the things that I keep thinking about is the Box Model in Xamarin Forms.

So basically, does padding and border count as part of the width, or are they added on top?

For example, if I do <Frame WidthRequest="100" HeightRequest="100" Padding="20,0"/>, does this mean the total space the frame will occupy horizontally is 140', similarly, will the total space it occupy vertically is 140? Or will it be only 100 both horizontally and vertically, while the padding is taken from the WidthRequest/HeightRequest size?

This is know as Box Sizing in HTML/CSS, but not sure what it is called in Xamarin Forms?

I am suffering lately especially working with Frames, which they seem to be inconsistent to me.

Thanks for help.

Best Answer

  • ghasanghasan ✭✭
    edited February 12 Accepted Answer

    @ColeX

    Thank you for your explanation, it really helped me understand the different behaviours of Frame.

    I tried your last snippet:

     <StackLayout HorizontalOptions="Start" VerticalOptions="Start">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">                
            </StackLayout>
        </Frame>
    </StackLayout>
    

    But the width of the frame was actually 140. The padding was added.

    <StackLayout HorizontalOptions="Start" VerticalOptions="Start">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20" x:Name="frame">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
        <Label Text="{Binding Width, Source={x:Reference frame}}"/>
        <Label Text="{Binding Height, Source={x:Reference frame}}"/>
    </StackLayout>
    

    And then I made a couple of tests, first setting the width of the parent StackLayout to the same exact of the frame.

    <StackLayout HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="100">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20" x:Name="frame">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
        <Label Text="{Binding Width, Source={x:Reference frame}}"/>
        <Label Text="{Binding Height, Source={x:Reference frame}}"/>
    </StackLayout>
    

    And this is the result:

    Then setting it just a bit higher than the width of the frame.

    <StackLayout HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="110">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20" x:Name="frame">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
        <Label Text="{Binding Width, Source={x:Reference frame}}"/>
        <Label Text="{Binding Height, Source={x:Reference frame}}"/>
    </StackLayout>
    

    And this is the result:


    Now I think I can formulate how the box sizing in Xamarin.Forms works. First, if there is an extra space for the element, the padding will be added to the width requested. Otherwise, the padding will take it is portion from the width requested.

Answers

  • ColeXColeX Member, Xamarin Team Xamurai
    edited February 11

    I made a test , see the below screenshots.

    Frame without parent layout

    <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">                
            </StackLayout>
        </Frame>
    

    Frame inside stacklayout without setting LayoutOptions

    <StackLayout >
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
    </StackLayout>
    

    Frame inside stacklayout with setting LayoutOptions

     <StackLayout HorizontalOptions="Start" VerticalOptions="Start">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">                
            </StackLayout>
        </Frame>
    </StackLayout>
    

    Now you should be able to understand when WidthRequest and HeightRequest works , check this explanation :https://stackoverflow.com/a/35859280/8187800

    Let's come back to your question.

    So basically, does padding and border count as part of the width, or are they added on top?

    Regardless of in HTML/CSS , xamarin or other else paltform , Padding will never affect the width or height , it just represents the distance between an element and its child elements, and is used to separate the control from its own content .

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @ColeX said:
    I made a test , see the below screenshots.

    Frame without parent layout

    <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">                
            </StackLayout>
        </Frame>
    

    Frame inside stacklayout without setting LayoutOptions

    <StackLayout >
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
    </StackLayout>
    

    Frame inside stacklayout with setting LayoutOptions

     <StackLayout HorizontalOptions="Start" VerticalOptions="Start">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">                
            </StackLayout>
        </Frame>
    </StackLayout>
    

    Now you should be able to understand when WidthRequest and HeightRequest works , check this explanation :https://stackoverflow.com/a/35859280/8187800

    Let's come back to your question.

    So basically, does padding and border count as part of the width, or are they added on top?

    Regardless of in HTML/CSS , xamarin or other else paltform , Padding will never affect the width or height , it just represents the distance between an element and its child elements, and is used to separate the control from its own content .

    Excellent explanation.

  • ghasanghasan Member ✭✭
    edited February 12 Accepted Answer

    @ColeX

    Thank you for your explanation, it really helped me understand the different behaviours of Frame.

    I tried your last snippet:

     <StackLayout HorizontalOptions="Start" VerticalOptions="Start">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20">
            <StackLayout BackgroundColor="Green">                
            </StackLayout>
        </Frame>
    </StackLayout>
    

    But the width of the frame was actually 140. The padding was added.

    <StackLayout HorizontalOptions="Start" VerticalOptions="Start">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20" x:Name="frame">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
        <Label Text="{Binding Width, Source={x:Reference frame}}"/>
        <Label Text="{Binding Height, Source={x:Reference frame}}"/>
    </StackLayout>
    

    And then I made a couple of tests, first setting the width of the parent StackLayout to the same exact of the frame.

    <StackLayout HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="100">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20" x:Name="frame">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
        <Label Text="{Binding Width, Source={x:Reference frame}}"/>
        <Label Text="{Binding Height, Source={x:Reference frame}}"/>
    </StackLayout>
    

    And this is the result:

    Then setting it just a bit higher than the width of the frame.

    <StackLayout HorizontalOptions="Start" VerticalOptions="Start" WidthRequest="110">
        <Frame WidthRequest="100" HeightRequest="100" BackgroundColor="Red" Padding="20" x:Name="frame">
            <StackLayout BackgroundColor="Green">
            </StackLayout>
        </Frame>
        <Label Text="{Binding Width, Source={x:Reference frame}}"/>
        <Label Text="{Binding Height, Source={x:Reference frame}}"/>
    </StackLayout>
    

    And this is the result:


    Now I think I can formulate how the box sizing in Xamarin.Forms works. First, if there is an extra space for the element, the padding will be added to the width requested. Otherwise, the padding will take it is portion from the width requested.

  • ColeXColeX Member, Xamarin Team Xamurai

    @ghasan You are right .

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @ghasan You have just learnt what the WidthRequest actually means. This WidthRequest and HeightRequest are two things in Xamarin Forms that are understood only by experience, at least to me, as I have migrated from platforms that have Width and Height which are fixed and they are ReadOnly in XF.

    Anyway your one step closer to be an XF professional...

  • ghasanghasan Member ✭✭
    edited February 13

    @ShantimohanElchuri said:
    @ghasan You have just learnt what the WidthRequest actually means. This WidthRequest and HeightRequest are two things in Xamarin Forms that are understood only by experience, at least to me, as I have migrated from platforms that have Width and Height which are fixed and they are ReadOnly in XF.

    Anyway your one step closer to be an XF professional...

    Indeed, one needs to experience it to understand it. Thanks (y)

Sign In or Register to comment.