自己紹介

初めまして、大学一年生のくぅと言います。 C# と Xamarin を好きです。まだまだ未熟ですが、色々吸収していきます。

やっていくこと

Xamarin.Forms の Grid にボーダーカラーをつける

解説

Xamarin.Forms の Grid コントロールには残念ながら BorderColor プロパティがありません。そこで、解決策を考えてみました。

調査の結果 StackOverFlow にいい質問があったのでそれを参考に解説していきます。

解決方法リスト

グリッドに背景色をつけ、中身としてBoxView を配置する
グリッドの要素の間に 1pxのBoxView を設置し、ボーダーカラーとする

調査した中で、グリッドに背景色をつける方が難易度や拡張性等で大体の場合ではいいかなと思ったので、こちらでいきます。

具体的には、グリッド要素の背景色にボーダーカラーにしたい色を設定し、中に配置したGrid View に白等の適切な色を設定してください

注意点

グリッドの中にBoxView を１回置いてから他の要素を置かないとマスが四角にならないのです。

以下の写真は直接ボタンを配置した時の画像です。（四角になってないのがわかるかと）

f:id:kuxumarin:20170108191053p:plain

サンプルコード

<Grid BackgroundColor="Black">
    <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <BoxView Grid.Row="0" Grid.Column="0" BackgroundColor="White" />
        <Label Text="1" Grid.Row="0" Grid.Column="0" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="0" Grid.Column="1" BackgroundColor="White" />
        <Label Text="2" Grid.Row="0" Grid.Column="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="0" Grid.Column="2" BackgroundColor="White" />
        <Label Text="3" Grid.Row="0" Grid.Column="2" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="1" Grid.Column="0" BackgroundColor="White" />
        <Label Text="4" Grid.Row="1" Grid.Column="0" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="1" Grid.Column="1" BackgroundColor="White" />
        <Label Text="5" Grid.Row="1" Grid.Column="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="1" Grid.Column="2" BackgroundColor="White" />
        <Label Text="6" Grid.Row="1" Grid.Column="2" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="2" Grid.Column="0" BackgroundColor="White" />
        <Label Text="7" Grid.Row="2" Grid.Column="0" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="2" Grid.Column="1" BackgroundColor="White" />
        <Label Text="8" Grid.Row="2" Grid.Column="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
        <BoxView Grid.Row="2" Grid.Column="2" BackgroundColor="White" />
        <Label Text="9" Grid.Row="2" Grid.Column="2" VerticalTextAlignment="Center" HorizontalTextAlignment="Center"/>
    </Grid>