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

Posted 2023-04-13

【中文标题】如何在 Xamarin.Forms 的 Grid 中启用边框

【英文标题】：How to enable borders in Grid in Xamarin.Forms

【发布时间】：2015-10-05 12:59:48

【问题描述】：

我正在 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) ,
    
;

【参考方案1】：

GridView 没有 Border 属性，但是：

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

【讨论】：

除非我遗漏了什么。这会创建不均匀的边框 - 即：网格的顶部和底部将为 1 像素，但分隔符均为 2 像素。对于像这样的基本控制来说，缺乏合适的盒子模型似乎是一个真正的问题。

我同意，这只适用于简单的网格。我有一个网格列表，其中包含图像、可变数量的列，并且所有列都需要在整个列表中具有相同的宽度。不想使用 BoxView 尝试获取单元格边框。

@Kinetic - 在网格上使用“填充”来设置外部周围的线条粗细。 Padding=2, RowSpacing=2, ColumnSpacing=2 将在各处提供 2 个（与设备无关）像素。

【参考方案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>

【讨论】：

不错。太糟糕了，Xamarin 不只是提供一些东西来绘制矩形和文本，我可能可以用比这个 xaml 东西更少的代码行来创建我的网格。

哦，还有图片。将节省大量时间和精力。

这里的问题是你不能在最左边有垂直，因为同一列用于定义水平边框。相反，我为每个垂直的每一行创建一个框，然后为每一行绘制一个水平。反之亦然 - 垂直不会拉伸整个高度。

这是一场维护噩梦

【参考方案3】：

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

        </Grid>
    </Grid>

【讨论】：

我说的是行和列之间的间距边界。

最好的解决方法是使用框架，但目前它不适用于 android 帧>

【参考方案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>

*编辑：自从写这篇文章以来，我已经改变了我做这件事的方式。现在，就像 Daniel Luberda 的回答一样，我只需将Grid.BackgroundColor 设置为Color.Black，然后我可以删除所有BoxViews，我就完成了。我这样做是因为我认为屏幕上的视图很少会更好，尤其是如果您将上述内容放在ListView 中。

另外，由于我的很多页面都会在页面加载时为Buttons 设置动画（使用ScaleTo()），我最初将Grid.BackgroundColor 设置为Color.Transparent 或Color.White，然后在动画完成后，我把它改成Color.Black。到目前为止效果很好。

【参考方案5】：

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

创建一个您希望元素具有边框的网格。将列和行之间的间距设置为 0。为 Grid 的每个元素创建另一个 Grid，其中包含 Boxview，并且您的视图位于该 Boxview 之上。然后，将每个 BoxView 进行填充和扩展。然后根据需要调整这些“下”网格的填充。网格中的每个元素都将被平等地分开。

虽然这很重。

【讨论】：

您能为此分享一些 C# 吗？那太好了。

注意：“为网格的每个元素制作另一个网格，其中包含一个 Boxview” 这将是很多“嵌套”网格。如果有很多行和列，这样的页面可能会很慢出现。为了速度，对外部网格的行和列使用“硬编码”（例如“20”而不是“自动”）大小。