Xamarin - 不使用网格占据屏幕中的整个区域答案

【问题标题】：Xamarin - Not occupying the whole area in the screen using gridXamarin - 不使用网格占据屏幕中的整个区域
【发布时间】：2018-05-14 12:28:04
【问题描述】：

我在屏幕底部有 4 个按钮作为菜单，我使用网格来显示 4 个具有相同宽度和高度的按钮，并将占据整个屏幕。我有这些代码，但结果不是我想要的。它没有占据整个屏幕。请帮助我如何实现它。谢谢。

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

看起来是这样的：

【问题讨论】：

为什么每次stacklayout前后都有boxviews？

标签： xaml xamarin xamarin.forms xamarin.android

【解决方案1】：

尝试用以下代码替换您的代码：

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

【讨论】：

您好，为什么要从 absolute 改为 stacklayout ？此菜单应保持原样
你是指屏幕下方？
如果你想在屏幕底部显示菜单，那么你可以使用 VerticalOption="End"。因为绝对布局在 Xamarin 表单中并不可取。它会影响应用程序的性能。所以在需要布局重叠的时候用它就好了。