如何在Xamarin.Forms中启用Grid中的边框

Question

我在Xamarin.Forms中构建一个网格。 我想添加像桌子一样的边框。 我认为我可以在定义行和列时添加边框，但是失败了。 谁能帮我？ 这是我目前的代码。

Grid grid = new Grid {
    VerticalOptions = LayoutOptions.FillAndExpand,
    RowDefinitions = {
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },
        new RowDefinition { Height = GridLength.Auto },

    },
    ColumnDefinitions = {
        new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) },
        new ColumnDefinition { Width = new GridLength (5, GridUnitType.Star) },
        new ColumnDefinition { Width = new GridLength (1, GridUnitType.Star) },
    }
};

Answer 1

以下是完整答案（在XAML中），无需编写自定义渲染器或效果。

代码有点冗长但易于理解，结果就像在图像

以下是将边框放在网格上的代码（如果你注意到最左边没有蓝线，那么你可以完全控制它们）

<Grid BackgroundColor="White">
  <Grid.RowDefinitions>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
    <RowDefinition Height="15"/>
    <RowDefinition Height="1"/>
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="Auto"  />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="10" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="50" />
    <ColumnDefinition Width="1" />
  </Grid.ColumnDefinitions>
  <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End" HorizontalOptions="FillAndExpand"/>
  <!--Your stuff here!-->
  <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>
   <!--Your stuff here!-->
  <BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>
   <!--Your stuff here!-->
  <BoxView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="8" BackgroundColor="Red" HeightRequest="1" VerticalOptions="End"  HorizontalOptions="FillAndExpand"/>

  <!--Vertical lines and no "stuff"-->
  <BoxView Grid.Column="1" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="3" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="5" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
  <BoxView Grid.Column="7" Grid.Row="0" Grid.RowSpan="7"  BackgroundColor="Blue" WidthRequest="1" VerticalOptions="FillAndExpand" HorizontalOptions="End"/>
</Grid>

Answer 2

Border没有GridView属性，但是：

只需将grid.BackgroundColor设置为所需的边框颜色值，然后将grid.ColumnSpacing和grid.RowSpacing设置为某个值，并确保添加到网格中的所有控件都拥有自己的BackgroundColor设置正确。

Answer 3

  <Grid BackgroundColor="White" >
        <BoxView BackgroundColor="Pink"  />
        <Grid BackgroundColor="White" Margin="5">

        </Grid>
    </Grid>

Answer 4

注意到我的例子类似于Sturla，但有点不同所以我会把它留下来。

代码并不是非常漂亮，但我做了类似的事情，在每列之间添加1px BoxView，然后在Grid顶部添加1个，在Grid底部添加一个<Grid VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" RowSpacing="0" ColumnSpacing="0"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="1"/> <RowDefinition Height="Auto"/> <RowDefinition Height="1"/> </Grid.RowDefinitions> <BoxView BackgroundColor="Black" HeightRequest="1" HorizontalOptions="FillAndExpand" Grid.Row="0"/> <Grid VerticalOptions="Start" ColumnSpacing="0" Grid.Row="1"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="1"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Button Text="Button 1"/> <BoxView BackgroundColor="Black" WidthRequest="1" VerticalOptions="FillAndExpand" Grid.Column="1"/> <Button Text="Button 1" Grid.Column="2"/> </Grid> <BoxView BackgroundColor="Black" HeightRequest="1" HorizontalOptions="FillAndExpand" Grid.Row="2"/> </Grid> ，像这样：

Grid.BackgroundColor

*编辑：自写这篇文章以来，我改变了我的方式。现在，就像Daniel Luberda的回答一样，我只需将Color.Black设置为BoxView然后我就可以移除所有ListView并完成。我这样做是因为我认为在屏幕上显示几个视图要好得多，特别是如果你在Button中添加类似上面的内容。

此外，由于我的很多网页会在页面加载时使用ScaleTo()动画Grid.BackgroundColor，因此我最初将Color.Transparent设置为Color.White或{{ 1}}然后动画完成后，我将其更改为Color.Black。到目前为止工作得很好。

Answer 5

如果你想要一个边界比Daniel Luberda＆an; s anwser更平等的解决方案，请使用以下内容：

创建一个网格，您希望元素具有边框。将colomns和rows之间的间距设置为0.对于Grid的每个元素，使另一个Grid中包含Boxview，并将视图放在该Boxview的顶部。然后，将每个BoxView填充并展开。然后根据您的需要调整这些＆＃34; -Grids下的填充。网格的每个元素都将被平分。

但这很重要。