web-dev-qa-db-ja.com

Xamarin.Formsのグリッドで境界線を有効にする方法

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) },
    }
};
c#xamarinxamarin.forms
22
Zachary Bell

BorderにはGridViewプロパティはありませんが、次のとおりです。

grid.BackgroundColor希望する境界色の値に設定し、grid.ColumnSpacingおよびgrid.RowSpacingをいくつかの値に設定し、グリッドに追加するすべてのコントロールにBackgroundColorが正しく設定されていることを確認します。

25
Daniel Luberda

カスタムレンダラーまたはエフェクトを作成する必要のない完全な回答（XAML）を以下に示します。

コードは少し冗長ですが理解しやすく、結果は画像のようになります

enter image description here

グリッドに境界線を配置するコードを次に示します（さらに、左端に青い線がないことに気付くように、境界線を完全に制御できます）

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

enter image description here

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

        </Grid>
    </Grid>
10
Abdullah Tahan

私の例はSturlaの例に似ていますが、少し違うので、そのままにしておきます。

コードはあまりきれいではありませんが、各列の間に1px BoxViewを追加し、Gridの上部に1つ、Gridの下部に1つ追加することで、同様のことを行いました。 、 そのようです：

<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をColor.Blackに設定するだけで、BoxViewsをすべて削除して完了です。これは、特に上記のようなものをListViewに入れている場合、画面上にビューをほとんど持たない方がはるかに良いと思うためです。

また、ページの読み込み時に（ScaleTo()を使用して）多くのページがButtonsをアニメーション化するため、最初にGrid.BackgroundColorをColor.TransparentまたはColor.Whiteに設定し、アニメーションが完了したら変更しますそれをColor.Blackに。これまでのところかなりうまく機能しています。

6
hvaughan3

Daniel Luberda's anwserよりも境界線が等しいソリューションが必要な場合は、次のようにします。

要素に境界線を追加するグリッドを作成します。コロンと行の間隔を0にします。グリッドの各要素に対して、Boxviewを含む別のGridを作成し、そのBoxviewの上にビューを作成します。次に、各BoxViewを入力して展開します。次に、これらの「アンダー」グリッドのパディングを自由に調整します。グリッドの各要素は等しく分離されます。

これはかなり重いです。

3
Francis R.