Chinaunix首页 | 论坛 | 博客
  • 博客访问: 5026419
  • 博文数量: 891
  • 博客积分: 17977
  • 博客等级: 上将
  • 技术积分: 8636
  • 用 户 组: 普通用户
  • 注册时间: 2005-08-26 09:59
个人简介

一个好老好老的老程序员了。

文章分类

全部博文(891)

文章存档

2020年(8)

2019年(40)

2018年(88)

2017年(130)

2015年(5)

2014年(12)

2013年(41)

2012年(36)

2011年(272)

2010年(1)

2009年(53)

2008年(65)

2007年(47)

2006年(81)

2005年(12)

分类: Android平台

2019-11-06 10:21:38

单元格分隔和边框
Grid没有任何内置的单元格分隔符或边框。 但是如果你想要一些,你可以自己添加它们。 GridCellDividers程序在其资源字典中定义名为dividerThickness的GridLength值。 这用于网格中每个其他行和列的高度和宽度。 这里的想法是这些行和列用于分隔符,而其他行和列用于常规内容:

点击(此处)折叠或打开

  1. <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
  2.              xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
  3.              x:Class="GridCellDividers.GridCellDividersPage">
  4.     <ContentPage.Padding>
  5.         <OnPlatform x:TypeArguments="Thickness"
  6.                     iOS="0, 20, 0, 0"
  7.                     Android="0"
  8.                     WinPhone="0" />
  9.     </ContentPage.Padding>
  10.     <Grid>
  11.         <Grid.Resources>
  12.             <ResourceDictionary>
  13.                 <GridLength x:Key="dividerThickness">2</GridLength>
  14.  
  15.                 <Style TargetType="BoxView">
  16.                     <Setter Property="Color" Value="Accent" />
  17.                 </Style>
  18.                 <Style TargetType="Label">
  19.                     <Setter Property="HorizontalOptions" Value="Center" />
  20.                     <Setter Property="VerticalOptions" Value="Center" />
  21.                 </Style>
  22.             </ResourceDictionary>
  23.         </Grid.Resources>
  24.         <Grid.RowDefinitions>
  25.             <RowDefinition Height="{StaticResource dividerThickness}" />
  26.             <RowDefinition Height="*" />
  27.             <RowDefinition Height="{StaticResource dividerThickness}" />
  28.             <RowDefinition Height="*" />
  29.             <RowDefinition Height="{StaticResource dividerThickness}" />
  30.             <RowDefinition Height="*" />
  31.             <RowDefinition Height="{StaticResource dividerThickness}" />
  32.         </Grid.RowDefinitions>
  33.         <Grid.ColumnDefinitions>
  34.             <ColumnDefinition Width="{StaticResource dividerThickness}" />
  35.             <ColumnDefinition Width="*" />
  36.             <ColumnDefinition Width="{StaticResource dividerThickness}" />
  37.             <ColumnDefinition Width="*" />
  38.             <ColumnDefinition Width="{StaticResource dividerThickness}" />
  39.             <ColumnDefinition Width="*" />
  40.             <ColumnDefinition Width="{StaticResource dividerThickness}" />
  41.         </Grid.ColumnDefinitions>
  42.         <BoxView Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="7" />
  43.         <BoxView Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="7" />
  44.         <BoxView Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="7" />
  45.         <BoxView Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="7" />
  46.         <BoxView Grid.Row="0" Grid.Column="0" Grid.RowSpan="7" />
  47.         <BoxView Grid.Row="0" Grid.Column="2" Grid.RowSpan="7" />
  48.         <BoxView Grid.Row="0" Grid.Column="4" Grid.RowSpan="7" />
  49.         <BoxView Grid.Row="0" Grid.Column="6" Grid.RowSpan="7" />
  50.         <Label Text="Grid"
  51.                Grid.Row="1" Grid.Column="1" />
  52.         <Label Text="Cell"
  53.                Grid.Row="3" Grid.Column="3" />
  54.         <Label Text="Dividers"
  55.                Grid.Row="5" Grid.Column="5" />
  56.     </Grid>
  57. </ContentPage>


分隔符的每一行和每列都被BoxView占据,其中的Obcent颜色来自隐式样式。 对于水平分隔符,高度由RowDefinition设置,宽度由Grid.ColumnSpan附加的可绑定属性控制; 类似的方法适用于垂直分隔线。

Grid还包含三个Label元素,只是为了演示常规内容如何适应这些分隔符:
2018_10_05_164140
没有必要将整行和列分配给这些分隔符。 请记住,可视对象可以共享单元格,因此可以将BoxView(或两个或三个或四个)添加到单元格并设置水平和垂直选项,使其拥抱单元格的墙壁并类似于边框。
这是一个名为GridCellBorders的类似程序,它在与GridCellDividers相同的三个单元格中显示内容,但这三个单元格也用边框装饰。
Resources字典包含不少于七种针对BoxView的样式! 基本样式设置颜色,另外两个样式设置水平和垂直边框的HeightRequest和WidthRequest,然后另外四个样式将VerticalOptions设置为Start和End为顶部和底部边框,HorizontalOptions设置为Start和End为左边和 正确的边界。 边框Thickness字典条目是double,因为它用于设置BoxView元素的WidthRequest和HeightRequest属性:

在左上角的单元格中,Label和四个BoxView元素各自将其Grid.Row和Grid.Column属性设置为0.但是,对于中间网格和右下角网格,采用了一种相当简单的方法 :具有单个单元格的另一个网格占据单元格,并且该单单元格网格包含Label和四个BoxView元素。 只需在单格网格上设置Grid.Row和Grid.Column即可实现简单性:

点击(此处)折叠或打开

  1. <Grid Grid.Row="1" Grid.Column="1">
  2.     <Label Text="Cell" />
  3.     <BoxView Style="{StaticResource topBorderStyle}" />
  4.     <BoxView Style="{StaticResource bottomBorderStyle}" />
  5.     <BoxView Style="{StaticResource leftBorderStyle}" />
  6.     <BoxView Style="{StaticResource rightBorderStyle}" />
  7. </Grid>


将Grid嵌套在另一个Grid中时,使用Grid.Row和Grid.Column属性可能会造成混淆。 此单元格网格占据其父级的第二行和第二列,即占据整个页面的网格。
另外,请记住,当Grid自行铺设时,它只会查看其子项的Grid.Row和Grid.Column设置,而不会查看其可视树中的孙子或其他后代。
这是结果:
2018_10_05_165213
边界的角落不符合可能有点令人不安,但这是由于网格的默认行和列间距。 将RowSpacing和ColumnSpacing属性设置为0,并且角将会遇到,尽管这些线仍然看起来有些不连续,因为边框位于不同的单元格中。 如果这是不可接受的,请使用GridCellDividers中显示的技术。
如果您希望在GridCellDividers中显示所有带有分隔符的行和列,则另一种技术是设置Grid的BackgroundColor属性,并使用RowSpacing和ColumnSpacing属性让该颜色透过单元格之间的空间。 但是所有细胞必须包含具有不透明背景的内容,以使这种技术具有视觉上的说服力。

阅读(102) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~