• 自己紹介
  • やっていくこと
  • 解説
    • 解決方法リスト
    • 注意点
  • サンプルコード
  • 実行結果
  • まとめ
  • 参考サイト
  • おすすめ書籍

自己紹介

初めまして、大学一年生のくぅと言います。 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入門

  • 作者: 大田 一希
  • 発売日: 2016/12/29
  • メディア: Kindle版
  • この商品を含むブログを見る

C#によるiOS、Android、Windowsアプリケーション開発入門 (MSDNプログラミングシリーズ)

C#によるiOS、Android、Windowsアプリケーション開発入門 (MSDNプログラミングシリーズ)

  • 作者: 増田智明,大西彰
  • 出版社/メーカー: 日経BP社
  • 発売日: 2014/06/04
  • メディア: 単行本
  • この商品を含むブログを見る

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

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

  • 作者: 五十嵐祐貴,生形可奈子,大田一希,古賀慎一,酒井達明,芝村達郎,田淵義人,日本マイクロソフト株式会社井上章
  • 出版社/メーカー: 日経BP社
  • 発売日: 2016/02/05
  • メディア: 単行本
  • この商品を含むブログ (2件) を見る