Как включить границы в Grid в Xamarin.forms

Ответ 1

Нет свойства Border для GridView, но:

Просто установите grid.BackgroundColor на требуемое значение цвета границы, затем установите значение grid.ColumnSpacing и grid.RowSpacing на некоторое значение и убедитесь, что все элементы управления, которые вы добавляете в сетку, правильно настроены BackgroundColor.

Ответ 2

Вот полный ответ (в XAML) без необходимости писать собственный рендерер или Effect.

Код немного подробный, но понятный, и результат похож на изображение

Вот код, чтобы поместить границы в вашу сетку (и чем больше у вас будет полный контроль над ними, как вы заметили, что в левой части нет синей линии)

<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>

Ответ 3

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

        </Grid>
    </Grid>

Ответ 4

Просто заметил, что мой пример похож на Sturla, но немного отличается, поэтому я оставлю его.

Код не супер хорош, но я сделал что-то подобное, добавив 1px BoxView между каждым столбцом, а затем 1 поверх вашего 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>

* Edit: с момента написания этого, я изменил способ, которым я немного это делаю. Теперь, как и Даниэль Люберда, я просто установил Grid.BackgroundColor в Color.Black, а затем я могу удалить все BoxView, и я закончил. Я делаю это, потому что я предполагаю, что гораздо лучше иметь несколько просмотров на экране, особенно если вы помещаете что-то вроде выше в ListView.

Кроме того, поскольку многие мои страницы будут анимировать Button при загрузке страницы (используя ScaleTo()), я сначала устанавливаю Grid.BackgroundColor в Color.Transparent или Color.White, а затем, как только анимация будет выполнена, Я меняю его на Color.Black. До сих пор хорошо работает.

Ответ 5

Если вы хотите получить решение с более равными границами, чем Daniel Luberda anwser, вот что я использовал:

Создайте сетку, в которой вы хотите, чтобы элемент имел границы. Поместите интервал между colomns и rows равным 0. Для каждого элемента сетки создайте еще одну сетку с боковым представлением в ней и ваш взгляд поверх этого Boxview. Затем добавьте каждый BoxView для заполнения и расширения. Затем отрегулируйте прописку этих "под" -Grids, как вам хотелось бы. Каждый элемент вашей сетки будет разделен равным.

Это довольно тяжело.