CODEWITHSUNDEEP
xamlxamarinxamarin.formsxamarin.android
Jen143
Jen143

Reputation: 835

Xamarin - Not occupying the whole area in the screen using grid

I have 4 buttons in the bottom part of the screen as menus and I had used grid to show 4 buttons with same width and height and will occupy the whole screen. I have these codes but the result is not they way i wanted. It is not occupying the whole screen. Please help me how can I achieve it. Thanks.

<AbsoluteLayout BackgroundColor="#BC3022" MinimumHeightRequest="20" Padding="0,10,10,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                <Grid ColumnSpacing="0">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                    </Grid.RowDefinitions>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <BoxView Grid.Row="0" Grid.Column="0"/>
                    <StackLayout Grid.Row="0" Grid.Column="0" Padding="10,2,10,2">
                        <Image Source="home.png" WidthRequest="40" HeightRequest="25"/>
                        <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Home</Label>
                    </StackLayout>
                    <BoxView Grid.Row="0" Grid.Column="1"/>
                    <StackLayout Grid.Row="0" Grid.Column="1" Padding="10,2,10,2">
                        <Image Source="jobs.png" WidthRequest="40"  HeightRequest="25">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="OnJobsGestureTap" NumberOfTapsRequired="1" />
                            </Image.GestureRecognizers>
                        </Image>
                        <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Jobs</Label>
                    </StackLayout>
                    <BoxView Grid.Row="0" Grid.Column="2"/>
                    <StackLayout Grid.Row="0" Grid.Column="2" Padding="10,2,10,2">
                        <Image Source="sync.png" WidthRequest="40" HeightRequest="25"/>
                        <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Sync</Label>
                    </StackLayout>
                    <BoxView Grid.Row="0" Grid.Column="3"/>
                    <StackLayout Grid.Row="0" Grid.Column="3" Padding="10,2,10,2">
                        <Image Source="logout.png" WidthRequest="40" HeightRequest="25">
                            <Image.GestureRecognizers>
                                <TapGestureRecognizer Tapped="OnLogoutGestureTap" NumberOfTapsRequired="1" />
                            </Image.GestureRecognizers>
                        </Image>
                        <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Signout</Label>
                    </StackLayout>
                </Grid>
            </AbsoluteLayout>

This is how it looks:

enter image description here

Upvotes: 0

Views: 978

Answers (1)

Srusti Thakkar
Srusti Thakkar

Reputation: 1901

Try to replace your code with below code: 

<StackLayout BackgroundColor="#BC3022" MinimumHeightRequest="20" Padding="10,10,10,10" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
            <Grid ColumnSpacing="0">
                <Grid.RowDefinitions>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="25*" />
                    <ColumnDefinition Width="25*" />
                    <ColumnDefinition Width="25*" />
                    <ColumnDefinition Width="25*" />
                </Grid.ColumnDefinitions>
                <BoxView Grid.Row="0" Grid.Column="0"/>
                <StackLayout Grid.Row="0" Grid.Column="0" Padding="10,2,10,2">
                    <Image Source="home.png" WidthRequest="40" HeightRequest="25"/>
                    <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Home</Label>
                </StackLayout>
                <BoxView Grid.Row="0" Grid.Column="1"/>
                <StackLayout Grid.Row="0" Grid.Column="1" Padding="10,2,10,2">
                    <Image Source="jobs.png" WidthRequest="40"  HeightRequest="25">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnJobsGestureTap" NumberOfTapsRequired="1" />
                        </Image.GestureRecognizers>
                    </Image>
                    <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Jobs</Label>
                </StackLayout>
                <BoxView Grid.Row="0" Grid.Column="2"/>
                <StackLayout Grid.Row="0" Grid.Column="2" Padding="10,2,10,2">
                    <Image Source="sync.png" WidthRequest="40" HeightRequest="25"/>
                    <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Sync</Label>
                </StackLayout>
                <BoxView Grid.Row="0" Grid.Column="3"/>
                <StackLayout Grid.Row="0" Grid.Column="3" Padding="10,2,10,2">
                    <Image Source="logout.png" WidthRequest="40" HeightRequest="25">
                        <Image.GestureRecognizers>
                            <TapGestureRecognizer Tapped="OnLogoutGestureTap" NumberOfTapsRequired="1" />
                        </Image.GestureRecognizers>
                    </Image>
                    <Label Text="" TextColor="White" FontSize="15" HorizontalOptions="Center">Signout</Label>
                </StackLayout>
            </Grid>           
        </StackLayout>

Upvotes: 1

Related Questions