2014.11.22 第2回 Japan Xamarin User Group Conference 東日本編

1. 2014.11.22 第2回Japan XamarinUser Group Conference 東日本編
Xamarin.Formsのグラフィック描画の考慮事項について
BoxViewの美味しい食べ方

2. 自己紹介
識別子ＳＩＮ/札幌ワークス
Twitter@furuya02
仕事某社でシステムサポート
スタッフCLR/H
ブログSIN@SAPPOROWORKSの覚書
Microsoft MVP for Visual C# (2013/1～)
フリーソフトBlackJumboDog

3. Xamarin.Formsでの描画
考慮しなけれならない事項が２つあります
１デバイスごとの画面サイズの違い
モバイルアプリで共通の問題
２PCLとレンダラーでのサイズの違い
Xamarin.Formsの特有の問題
本日は、こちらの話だけ・・

4. Xamarin.FormsのBoxView
矩形しか描けない、最弱のコントロール（すいません）
何か描きたいときは、レンダラーで拡張してください

5. PCLとレンダラー側のサイズを検証する
ノーマルのBoxViewとBoxViewを継承したMyBoxViewを並べてみる
Android
iOS
WindowsPhone
BoxView
MyBoxView

6. レンダラーを実装する
Xamarin.Forms上のコントロールのWidth/Heightを使用する
PCL側
public class MyBoxView: BoxView{}
レンダラー側（例：Android）
[assembly: ExportRenderer(typeof(MyBoxView), typeof(MyBoxViewRenderer))]
namespace App1.Droid {
class MyBoxViewRenderer:BoxRenderer{
public override void Draw(Canvas canvas){
varmyBoxView= (MyBoxView)Element;//Xamarin.Forms側のオブジェクトの取得
using (varpaint = new Paint()){
varrect= new RectF(0, 0, (float)myBoxView.Width, (float)myBoxView.Height);
paint.Color= myBoxView.Color.ToAndroid();//塗りつぶしの色を指定
canvas.DrawRoundRect(rect,0,0, paint);//四角形描画(塗りつぶし)
}
}
Forms側オブジェクトの Width/Heightを使用する
Forms側オブジェクトの Colorを使用する

7. サイズが合わない
BoxViewそのままと、レンダラーで描画する拡張BoxViewを比べると・・・
XX
Android
iOS
WindowsPhone
Androidだけ サイズが違う
BoxView
MyBoxView

8. Width/Heightの値が違う
Androidだけの問題
Forms側のサイズ値を使用す る場合は、倍率を処理する 必要がある

9. 比率を取得してPCL側のサイズに乗ずる
これで、すべて解決・・安心してサイズを使用してください

10. 続きはブログで・・・
SIN@SAPPOROWORKSの覚書http://furuya02.hatenablog.com/

11. ご清聴ありがとうございました
札幌ワークス
http://www.sapporoworks.ne.jp/spw