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

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

GridView 没有 Border 属性，但是：

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

Answer 2

这是完整的答案（在 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 3

刚注意到我的示例与 Sturla 的示例相似但略有不同，所以我将保留它。

代码不是很漂亮，但我做了类似的事情，在每一列之间添加了一个 1px BoxView，然后在 Grid 顶部添加了一个，在 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>

*编辑：自从写这篇文章以来，我改变了一些方式。现在，就像 Daniel Luberda 的回答一样，我只需将 Grid.BackgroundColor 设置为 Color.Black，然后我可以删除所有 BoxView，我就完成了。我这样做是因为我认为屏幕上的视图越少越好，特别是如果您将上面的内容放在 ListView.

中

此外，由于我的许多页面在页面加载时会为 Button 设置动画（使用 ScaleTo()），所以我最初将 Grid.BackgroundColor 设置为 Color.Transparent 或Color.White 然后一旦动画完成，我将其更改为 Color.Black。到目前为止效果很好。

Answer 4

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

        </Grid>
    </Grid>

Answer 5

如果您想要比 Daniel Luberda 的答案更平等边界的解决方案，这是我使用的：

创建一个您希望其中的元素具有边框的网格。将列和行之间的间距设置为 0。对于 Grid 的每个元素，创建另一个带有 Boxview 的 Grid，并将您的视图置于该 Boxview 之上。然后，将每个 BoxView 填充和展开。然后根据需要调整这些 "under"-Grids 的填充。网格中的每个元素将被平均分隔。

虽然这很重。

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

How to enable borders in Grid in Xamarin.Forms

c#

xamarin

xamarin.forms