CODEWITHSUNDEEP
xamlxamarin.forms
Innomotion Media
Innomotion Media

Reputation: 53

Xamarin.Forms XAML How to show columns in center of grid (not left bind)

I have this grid object:

            <!--Legende-->
            <Grid Grid.Row="0">

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

                     <Grid.RowDefinitions>
                         <RowDefinition Height="0.8*"/>
                         <RowDefinition Height="2*"/>
                         <RowDefinition Height="0.8*"/>
                     </Grid.RowDefinitions>


                     <Grid Grid.Column="0" Grid.Row="1" HorizontalOptions="Center">

                         <BoxView BackgroundColor="#faea57" CornerRadius="25"></BoxView>
                    
                         <Label
                             Padding="10,0,10,0"
                             VerticalOptions="Center"
                             Grid.Column="0"
                             Text="Geplant"
                             FontSize="14"
                             FontFamily="Galvji-01.ttf"
                             TextColor="#ffffff"/>

                    </Grid>

                     <Grid Grid.Column="1" Grid.Row="1" HorizontalOptions="Center">

                    <BoxView BackgroundColor="#75f056" CornerRadius="25"></BoxView>
                    
                    <Label
                        Padding="10,0,10,0"
                        VerticalOptions="Center"
                        Text="Aktiv"
                        FontSize="14"
                        FontFamily="Galvji-01.ttf"
                        TextColor="#ffffff"/>

                </Grid>

                     <Grid Grid.Column="2" Grid.Row="1" HorizontalOptions="Center">

                    <BoxView BackgroundColor="#fa594d" CornerRadius="25"></BoxView>
                    
                    <Label         
                        Padding="10,0,10,0"
                        VerticalOptions="Center"
                        Text="Abgeschlossen"
                        FontSize="14"
                        FontFamily="Galvji-01.ttf"
                        TextColor="#ffffff"/>

                </Grid>

                </Grid>

The result is this:

enter image description here

The 3 boxviews with the text are bind to the left ob the screen. However, I want those three objets to be rendered in the CENTRE.

I cannot work with padding, since the amount of padding varies from phone to phone so I have to work with attributes like "center", but I cannot seem to figure out how to do that.

Help would be awesome!

Thanks

Upvotes: 0

Views: 313

Answers (1)

Lucas Zhang
Lucas Zhang

Reputation: 18861

You could set two extra space column to get the effect like padding.

<Grid.ColumnDefinitions>
                         <ColumnDefinition Width="0.2*"/>  // left
                         <ColumnDefinition Width="auto"/>
                         <ColumnDefinition Width="auto"/>
                         <ColumnDefinition Width="auto"/>
                         <ColumnDefinition Width="0.2*"/>  // right
                    </Grid.ColumnDefinitions>

                     <Grid.RowDefinitions>
                         <RowDefinition Height="0.8*"/>
                         <RowDefinition Height="2*"/>
                         <RowDefinition Height="0.8*"/>
                     </Grid.RowDefinitions>


                     <Grid Grid.Column="1" Grid.Row="1" HorizontalOptions="Center">

                         <BoxView BackgroundColor="#faea57" CornerRadius="25"></BoxView>
                    
                         <Label
                             Padding="10,0,10,0"
                             VerticalOptions="Center"
                             Grid.Column="0"
                             Text="Geplant"
                             FontSize="14"
                             FontFamily="Galvji-01.ttf"
                             TextColor="#ffffff"/>

                    </Grid>

                     <Grid Grid.Column="2" Grid.Row="1" HorizontalOptions="Center">

                    <BoxView BackgroundColor="#75f056" CornerRadius="25"></BoxView>
                    
                    <Label
                        Padding="10,0,10,0"
                        VerticalOptions="Center"
                        Text="Aktiv"
                        FontSize="14"
                        FontFamily="Galvji-01.ttf"
                        TextColor="#ffffff"/>

                </Grid>

                     <Grid Grid.Column="3" Grid.Row="1" HorizontalOptions="Center">

                    <BoxView BackgroundColor="#fa594d" CornerRadius="25"></BoxView>
                    
                    <Label         
                        Padding="10,0,10,0"
                        VerticalOptions="Center"
                        Text="Abgeschlossen"
                        FontSize="14"
                        FontFamily="Galvji-01.ttf"
                        TextColor="#ffffff"/>

                </Grid>

                </Grid>

Upvotes: 1

Related Questions