読者です 読者をやめる 読者になる 読者になる

くうと徒然なるままに

Thank you for watching !!

Xamarin.Forms の Grid でボーダーカラーを設定する

Xamarin Xamarin.Forms

自己紹介

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

やっていくこと

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

解説

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

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

解決方法リスト

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

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

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

注意点

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

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

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>

実行結果

f:id:kuxumarin:20170108190856p:plain

まとめ

結構いい感じに実装できたと思います。 実際に使うときは少し工夫を加えれば使える感じになると思います。

参考サイト

stackoverflow.com

おすすめ書籍

個人的に読みやすく好きな本たちでした

かずきのXamarin.Forms入門

かずきのXamarin.Forms入門

.NET開発テクノロジ入門2016年版Visual Studio 2015対応版

.NET開発テクノロジ入門2016年版Visual Studio 2015対応版