Xamarin Forms Center Grid horizontal

Question

I have a problem. I am trying to achieve the following Grid:

To do that, I thought that I should set both the ColumnWidth to Auto and set the HorizontalOptions of the Grid to Center, so the Grid is centred in the middle of the screen creating equal spaces at the left and right side, but no matter what I try, I can't seem to move the columns from the right side. Here is what I have now:

And here is my code:

<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
    <StackLayout Orientation="Vertical">
        <CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid RowSpacing="0" HorizontalOptions="Center">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="25" />
                            <RowDefinition Height="25" />
                        </Grid.RowDefinitions>

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

                        <Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
                        <Label Grid.Row="1" Grid.Column="1" Text="9762.33" TextColor="White" FontSize="18"/>
                        <Label Grid.RowSpan="2" Grid.Column="2" Text="-$476.22  (-4.77%)" VerticalOptions="CenterAndExpand" FontAttributes="Bold" TextColor="Red" FontSize="18" Margin="15,0,0,0"/>
                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </StackLayout>
</Frame>

How can I create my wanted result?

According to your screenshot, you have four columns in grid, but you just set two columns, please modify it. Then if you want to equal the space, you need to set ColumnDefinition Width="*" — Cherry Bu - MSFT

Anand Anand · Accepted Answer · 2020-06-03T04:56:37

Can you try this?

<Frame BorderColor="#00D8FF" Padding="0" HorizontalOptions="FillAndExpand" BackgroundColor="Transparent">
    <StackLayout Orientation="Vertical">
        <CarouselView ItemsSource="{Binding coinDataList}" HeightRequest="50">
            <CarouselView.ItemTemplate>
                <DataTemplate>
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>

                        <Label Grid.Row="0" Grid.Column="1" Text="BTC-USDT" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
                        <Label Grid.Row="1" Grid.Column="1" Text="9762.33" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>
                        <Label Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" Text="-$476.22  (-4.77%)" FontAttributes="Bold" TextColor="#00D8FF" FontSize="18"/>

                    </Grid>
                </DataTemplate>
            </CarouselView.ItemTemplate>
        </CarouselView>
    </StackLayout>
</Frame>

Xamarin Forms Center Grid horizontal

1 Answers