CODEWITHSUNDEEP
xamlxamarinxamarin.forms
Alan2
Alan2

Reputation: 24572

How can I define a far left column and two far right columns using Grid.ColumnDefinitions

I have three grid columns that I would like to be filled:

<Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition Width="?"/>
  <ColumnDefinition Width="?"/>
</Grid.ColumnDefinitions>

Column order 

 Column 1                          Column 2  Column 3

Can someone help me and tell me how I should define this so that column 1 is far left and column 2 & 3 are far right?

Upvotes: 1

Views: 108

Answers (3)

Markus Michel
Markus Michel

Reputation: 2299

You can change the relative width by setting your Width to "Times Star". Basically " * " is just a short for " 1* ".

So if you have three column definitions, set to " * ", Xamarin.Forms will create a grid of three equally sized columns. In some cases it might be necessary to use spacer columns or columnspans, but there is a simpler way:

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="3*" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

This will result in a grid, where the first column will be 3 times as wide as the other two columns.

Upvotes: 1

Jon
Jon

Reputation: 579

Try this:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

The two right-most columns will be sized to fit their content, and the first column will stretch to fill the remaining space.

Alternatively, you could do something like this:

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" /> <!-- Left Column --> 
        <ColumnDefinition Width="*" />    <!-- Spacer column -->
        <ColumnDefinition Width="Auto" /> <!-- Right Column 1 -->
        <ColumnDefinition Width="Auto" /> <!-- Right Column 2 -->
    </Grid.ColumnDefinitions>

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/layouts/grid

Upvotes: 1

Arvind Chourasiya
Arvind Chourasiya

Reputation: 17422

You can try code below

Solution 1 (Recommended)

<StackLayout >
    <ScrollView>
        <Grid x:Name="TableGrid" VerticalOptions="CenterAndExpand"  BackgroundColor="Silver" Margin="10" Padding="1" RowSpacing="1" ColumnSpacing="1">
        <Grid.RowDefinitions>
            <RowDefinition Height="40" />
        </Grid.RowDefinitions>

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

        <Label Text="First name" x:Name="lblFirst"  Grid.ColumnSpan="2" Grid.Row="0" Style="{DynamicResource headerTablet}"/>
        <Label Text="Last name" x:Name="lb1Sec" Grid.Column="2" Grid.Row="0"  Style="{DynamicResource headerTablet}"/>
        <Label Text="Gender" Grid.Column="3" x:Name="lblThird" Grid.Row="0" Style="{DynamicResource headerTablet}"/>
    </Grid>
    </ScrollView>
    </StackLayout>

Solution 2

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="myProj.Pages.Page1">
<ContentPage.Resources>
    <ResourceDictionary>
    <Style x:Key="headerTablet" TargetType="Label">
        <Setter Property="TextColor" Value="White" />
        <Setter Property="FontAttributes" Value="Bold" />
        <Setter Property="BackgroundColor" Value="Silver" />
        <Setter Property="FontSize" Value="17" />
        <Setter Property="VerticalTextAlignment" Value="Center" />
        <Setter Property="HorizontalTextAlignment" Value="Center" />
    </Style>                                  
    </ResourceDictionary>
</ContentPage.Resources>
<StackLayout >
    <ScrollView>
    <Grid x:Name="TableGrid" VerticalOptions="CenterAndExpand"  BackgroundColor="Silver" Margin="10" Padding="1" RowSpacing="1" ColumnSpacing="1">
    <Grid.RowDefinitions>
        <RowDefinition Height="40" />
    </Grid.RowDefinitions>

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

    <Label Text="First name" x:Name="lblFirst"   Grid.Row="0" Style="{DynamicResource headerTablet}"/>
    <Label  x:Name="lblHidden" Grid.Column="1" Grid.Row="0"  Style="{DynamicResource headerTablet}"/>
    <Label Text="Last name" x:Name="lb1Sec" Grid.Column="2" Grid.Row="0"  Style="{DynamicResource headerTablet}"/>
    <Label Text="Gender" Grid.Column="3" x:Name="lblThird" Grid.Row="0" Style="{DynamicResource headerTablet}"/>
    </Grid>
    </ScrollView>
</StackLayout>
</ContentPage>

Solution 3

<Grid.ColumnDefinitions>
<ColumnDefinition Width="180" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>

Output screenshot below

enter image description here

Upvotes: 1

Related Questions