VS2019中Xamarin Forms Grid元素项横向排列及相关问题解决

我来帮你解决这两个在Visual Studio 2019中用Xamarin.Forms开发时遇到的问题：

一、修复Grid列定义错误，实现多按钮并排显示 #

你碰到的ContentPage不支持直接内容报错，根源是列定义代码有语法错误——第一个<ColumnDefinition Width="20*/>少了闭合的双引号，应该写成<ColumnDefinition Width="20*"/>。

另外要注意，Grid.ColumnDefinitions必须放在<Grid>标签内部，不能直接放到ContentPage下面。正确的布局代码应该是这样的，给每个按钮指定对应的列索引，就能实现一行内并排多个按钮：

<ContentPage.Content>
    <Grid BackgroundColor="blue" HeightRequest="60" VerticalOptions="End">
        <!-- 定义5个等宽列，每列占20%的Grid宽度 -->
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="20*"/>
            <ColumnDefinition Width="20*"/>
        </Grid.ColumnDefinitions>

        <!-- 第一个按钮放在第0列，列索引从0开始 -->
        <ImageButton Source="alarm.png" HeightRequest="25" WidthRequest="25" 
                     Grid.Column="0" HorizontalOptions="Center"/>
        <!-- 第二个按钮放在第1列 -->
        <ImageButton Source="alarm.png" HeightRequest="25" WidthRequest="25" 
                     Grid.Column="1" HorizontalOptions="Center"/>
        <!-- 继续添加更多按钮，只要指定不同的Grid.Column值就行 -->
        <ImageButton Source="alarm.png" HeightRequest="25" WidthRequest="25" 
                     Grid.Column="2" HorizontalOptions="Center"/>
        <ImageButton Source="alarm.png" HeightRequest="25" WidthRequest="25" 
                     Grid.Column="3" HorizontalOptions="Center"/>
        <ImageButton Source="alarm.png" HeightRequest="25" WidthRequest="25" 
                     Grid.Column="4" HorizontalOptions="Center"/>
    </Grid>
</ContentPage.Content>

这里用HorizontalOptions="Center"让按钮在列内居中，布局会更整齐，也不会出现之前StackLayout那种放不下多个按钮的问题。

二、移除ImageButton的灰色背景 #

你后来补充的方法完全正确——给ImageButton设置BackgroundColor="transparent"就能去掉默认的灰色背景方块：

<ImageButton Source="alarm.png" HeightRequest="25" WidthRequest="25" 
             Grid.Column="0" HorizontalOptions="Center"
             BackgroundColor="transparent"/>

如果你的项目里有很多ImageButton都需要去掉灰色背景，也可以在App.xaml里添加全局样式，一次性搞定，不用每个按钮都写属性：

<Application.Resources>
    <Style TargetType="ImageButton">
        <Setter Property="BackgroundColor" Value="transparent"/>
    </Style>
</Application.Resources>

内容的提问来源于stack exchange，提问作者Code_Student09