Search code examples
xamlxamarinxamarin.formsxamarin.androidxamarin.ios

Xamarin Forms Center Grid horizontal

I have a problem. I am trying to achieve the following Grid: enter image description here

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: enter image description here

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?

Solution

  • 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>