CODEWITHSUNDEEP
c#xamarinxamarin.forms
user979331
user979331

Reputation: 11961

Xamarin.Forms StackLayout into 3 columns

I am using Xamarin.Forms's StackLayout and this is what I got:

<StackLayout HorizontalOptions="Center" VerticalOptions="CenterAndExpand">
        <Entry x:Name="Community" WidthRequest="200" Placeholder="Community" />
        <Entry x:Name="Job" WidthRequest="200" Placeholder="Job" />
        <Entry x:Name="Model" WidthRequest="200" Placeholder="Model" />
        <Entry x:Name="Elevation" WidthRequest="200" Placeholder="Elevation" />
        <Entry x:Name="Email" WidthRequest="200" Placeholder="Email" />
        <Entry x:Name="C_Email" WidthRequest="200" Placeholder="C_Email" />
        <Entry x:Name="Buyer_Salutation" WidthRequest="200" Placeholder="Buyer_Salutation" />
        <Entry x:Name="Customer_Name" WidthRequest="200" Placeholder="Customer_Name" />
        <Entry x:Name="Customer_LName" WidthRequest="200" Placeholder="Customer_LName" />
        <Entry x:Name="C_Buyer_Salutation" WidthRequest="200" Placeholder="C_Buyer_Salutation" />
        <Entry x:Name="CoBuyer_Name" WidthRequest="200" Placeholder="CoBuyer_Name" />
        <Entry x:Name="CoBuyer_LName" WidthRequest="200" Placeholder="CoBuyer_LName" />
        <Entry x:Name="Address1" WidthRequest="200" Placeholder="Address1" />
        <Entry x:Name="City" WidthRequest="200" Placeholder="City" />
        <Entry x:Name="Province" WidthRequest="200" Placeholder="Province" />
        <Entry x:Name="Zip" WidthRequest="200" Placeholder="Zip" />
        <Entry x:Name="Phone1Cell" WidthRequest="200" Placeholder="Phone1Cell" />
        <Entry x:Name="Phone1Work" WidthRequest="200" Placeholder="Phone1Work" />
        <Entry x:Name="Phone2Main" WidthRequest="200" Placeholder="Phone2Main" />
        <Entry x:Name="Phone2Cell" WidthRequest="200" Placeholder="Phone2Cell" />
        <Entry x:Name="Phone2Work" WidthRequest="200" Placeholder="Phone2Work" />
    </StackLayout>

Nevertheless, when I run my app it displays all my Entries in 1 column, stacked on top of each other.

How do I get 3 StackLayout so I can separate these?

Upvotes: 1

Views: 406

Answers (1)

Guilherme Nimer
Guilherme Nimer

Reputation: 555

Here's a example you can use to separate in columns without grid.

<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">

    <StackLayout Margin="5,0,5,0" HorizontalOptions="FillAndExpand">
               <Entry x:Name="Community" WidthRequest="200" Placeholder="Community" />
        <Entry x:Name="Job" WidthRequest="200" Placeholder="Job" />
        <Entry x:Name="Model" WidthRequest="200" Placeholder="Model" />
        <Entry x:Name="Elevation" WidthRequest="200" Placeholder="Elevation" />
        <Entry x:Name="Email" WidthRequest="200" Placeholder="Email" />
        <Entry x:Name="C_Email" WidthRequest="200" Placeholder="C_Email" />
        <Entry x:Name="Buyer_Salutation" WidthRequest="200" Placeholder="Buyer_Salutation" />
    </StackLayout>
    <StackLayout Margin="5,0,5,0" HorizontalOptions="FillAndExpand">

        <Entry x:Name="Customer_Name" WidthRequest="200" Placeholder="Customer_Name" />
        <Entry x:Name="Customer_LName" WidthRequest="200" Placeholder="Customer_LName" />
        <Entry x:Name="C_Buyer_Salutation" WidthRequest="200" Placeholder="C_Buyer_Salutation" />
        <Entry x:Name="CoBuyer_Name" WidthRequest="200" Placeholder="CoBuyer_Name" />
        <Entry x:Name="CoBuyer_LName" WidthRequest="200" Placeholder="CoBuyer_LName" />
        <Entry x:Name="Address1" WidthRequest="200" Placeholder="Address1" />
        <Entry x:Name="City" WidthRequest="200" Placeholder="City" />
        <Entry x:Name="Province" WidthRequest="200" Placeholder="Province" />
        <Entry x:Name="Zip" WidthRequest="200" Placeholder="Zip" />

    </StackLayout>
    <StackLayout Margin="5,0,5,0" HorizontalOptions="FillAndExpand">

        <Entry x:Name="Phone1Cell" WidthRequest="200" Placeholder="Phone1Cell" />
        <Entry x:Name="Phone1Work" WidthRequest="200" Placeholder="Phone1Work" />
        <Entry x:Name="Phone2Main" WidthRequest="200" Placeholder="Phone2Main" />
        <Entry x:Name="Phone2Cell" WidthRequest="200" Placeholder="Phone2Cell" />
        <Entry x:Name="Phone2Work" WidthRequest="200" Placeholder="Phone2Work" />
    </StackLayout>

</StackLayout>

Upvotes: 2

Related Questions