しっぽを追いかけて

ぐるぐるしながら考えています

Unity と猫の話題が中心   掲載内容は個人の私見であり、所属組織の見解ではありません

XAML

Xamarin.Forms で文字列で DateTime を XAML に指定できるようにする

前回 は XAML で DateTime を指定しましたが <DatePicker> <DatePicker.Date> <sys:DateTime x:FactoryMethod="Parse"> <x:Arguments> <x:String>2015/02/27</x:String> </x:Arguments> </sys:DateTime> </DatePicker.Date> </DatePicker> こんな回りくどい指定の仕方は面倒なのでやっぱり WPF のように直接文字列で指定できるようにしてみます

Xamarin.Forms で XAML から DateTime を指定する

WPF の XAML では DateTime を文字列で直接指定することができますが、Xamarin.Forms ではエラーになってしまいます ではどうやって指定するかというと、DatePicker の API に書かれていました

Xamarin.Forms で数値が含まれる範囲に応じて任意の値に切り替える

数値を配色や文字列に変換する Converter を作りましたが、必要な値に応じて Converter を用意するのは少し面倒です というわけで、変換後の値を任意の型にできるような汎用的な Converter にしてみたいと思います

Xamarin.Forms で数値が含まれる範囲に応じて文字列を切り替える

前回 の続編、今度は文字列を切り替えてみます 相変わらず Converter を作ります!

Xamarin.Forms で数値が含まれる範囲に応じて配色を切り替える

本当はそろそろ Android にも進出しようと思っていたのですが、Xamarin のライセンス申請がなかなか進まず・・・ というわけでライセンスが発行されるまでしばし Xamarin.Forms であれこれ試してみました Excel なんかで数値が含まれる範囲に応じてセルの配…

Xamarin に追加してほしい機能を投票できるサイト

前回 の不完全ダブルタップ拡大縮小コントロールですが、なんと Android エミュレーターではダブルタップが認識されないというご報告をいただきました ・・・Xamarin.Forms の TapGestureRecognizer.NumberOfTapsRequired を利用しているだけなのに認識でき…

ダブルタップで Xamarin.Forms の ScrollView の拡縮を切り替えてみたい(失敗)

Xamarin.Forms には ScrollView というスクロール可能なレイアウトがありますが、Windows ランタイムのような拡大縮小機能がありません 何とかできないかビヘイビアを作って試してみました

Xamarin でデータの型によってリスト内の表示を切り替えたい(2)

前回の記事 では、TypeTemplateSelector にデータの型ごとに DataTemplate を持たせることで、型ごとのテンプレート選択を実装していました ただ、この方法だとデータの型が増えるたびに TemplateSelector にプロパティを追加したり、分岐条件を追加する必要…

Xamarin でデータの型によってリスト内の表示を切り替えたい(1)

ItemsControl を利用して今度はリスト内にバインドされたデータの型によって、各行の表示を切り替えてみたいと思います 今回のソリューション構成はこちら ViewModel を 2つと、TypeTemplateSelector という DataTemplateSelector を追加しました

Xamarin で交互に背景色を変えたリストを表示したい

ItemsControl は便利なコントロールなのでどんどん拡張していきたい! というわけで、リストの背景色を交互に替える表示を ItemsControl を利用して作りたいと思います 今回のソリューションはこれまでのものを拡張して下記のようになります

Xamarin で ItemsControl っぽいコントロールを作りたい(2)

前回 で ItemsControl っぽいものを作りましたが、さらに ItemsPanel を切り替えるようにしてみます 修正対象は上記の通り

Xamarin で ItemsControl っぽいコントロールを作りたい(1)

以前 プラットフォームごとに配色の異なるアナログ時計を表示するアプリを実装した際に ItemsControl 風の AbsoluteLayout を作りました これに少し手を入れてもうちょい ItemsControl に近いコントロールを Xamarin.Forms で作ってみたいと思います とはい…

Xamarin でタップするたびに外観を切り替えるコントロールを作る

前回 は GetureRecognizer と Setter を連携する Behavior を作ることで、タップに反応するコントロールを作りました 今回はさらに発展させて、タップのたびに外観が変わるような実装を試してみたいと思います 例によって修正箇所は上記のみ

Xamarin で Gesture と Trigger の連携を XAML で記述したい

前回 は Behavior を利用して GestureRecognizer を契機に BackgroundColor を反転させるコントロールを作りました 今回はもう少し発展させて、GestureRecognizer を契機に TriggerAction の Setter を実行するような XAML を書いてみたいと思います 修正す…

Xamarin でコードビハインド、ViewModel を使わずに GestureRecognizer に反応させたい

Xamarin.Forms のコントロールは Tapped イベントすら持ってないので、Trigger でインタラクションを記述することがまだ難しいです; なので Tapped のジェスチャに反応する機能を拡張する GestureRecognizer を利用してコントロールを作ってみたいと思いま…

Xamarin.Forms で Trigger に反応するコントロールを作りたい

せっかく Xamarin.Forms 1.3.0 から Styles と Triggers が追加されたので、どこまでできるかカスタムコントロールを作ろうと思います! まずは初歩的なところからタップに反応して外観が変化するコントロールに挑戦

続・Xamarin でプラットフォームごとに別ファイルでリソースを XAML 定義したい

前回の投稿 ではプラットフォームごとに別 XAML ファイルでリソースを定義してみましたが、まだ生ぬるい! 共通コードの中でプラットフォームの分岐処理が含まれてしまっていたのでこれを排除しようと思います 今回改修するクラスは上記の青網掛けの部分

Xamarin × ResourceDictionary でプラットフォームごとに配色を変えたい

インフルエンザにかかってしまいまだ体調が本調子ではないですが、タイトルの通り DI コンテナではなく今度は ResourceDictionary で配色を切り替えてみたいと思います

Unity のプロパティ注入だけでプラットフォームごとに Xamarin アプリの配色を切り替える

Xamarin でプラットフォームごとに配色を切り替える場合、一般には下記のような XAML を記述すると思います <OnPlatform x:Key="SecondHandColor" x:TypeArguments="Color" iOS="Red" Android="Aqua" WinPhone="#80FF80" /> ただ、こうしてしまうと共通コードに各プラットフォームごとの分岐処理を記述するのと同様なので、後で特定のプラットフォームだけの修正をしよう</onplatform>…

Xamarin.iOS の Anchor プロパティが正しく解釈されない件

すでにわんくまとか Qiita で公開しちゃってるのでバレバレですが、Xamarin の BoxView のアナログ時計サンプル を XAML × MVVM に移植しようとしてハマったのが、Xamarin.iOS だけ AnchorX や AnchorY が正しく解釈されない問題です;

Xamarin で ViewModel から画面状態の変化を検知する

本来なら MVPVM で Presenter から View のイベントハンドラを設定したいところですが、あえて MVVM で、ViewModel から検知したいと思います 本家 XAML であればきっと EventToCommand みたいな Behavior を利用して検知するんでしょうが、今回は別の方法で…

Xamarin で ItemsControl 風 AbsoluteLayout

Xamarin には ViewModel のリストを UI に表示するコントロールは ListView と TableView しか用意されてません 本家 XAML では Canvas 内に ItemsControl を配置して ViewModel の内容に応じて任意の絶対座標に UI を表示するといったことが簡単にできるの…

Xamarin.Forms の Image に string の画像ファイルのローカルパスをデータバインディングする

WIndows ストアアプリなどの XAML では、下記のような感じで Image コントロールに対して直接画像ファイルのローカルパスをデータバインディングすることができます <Image Source="{Binding ImageUri}"/> この場合の ImageUri は次のような string による指定でも大丈夫です public class TopPag</image>…

Xamarin.Forms で Prism 風のパラメータつき画面遷移をつくる

Xamarin.Forms の画面遷移は NavigationPage による構築が基本らしく、NavigationPage.SetHasNavigationBar のメソッドでナビバーの表示有無を制御できるようです なので、NavigationPage を利用して Xamarin で Prism 風のパラメータつき画面遷移を行う実装…

Xamarin.Forms の画面遷移は NavigationPage 必須?!

とりあえず MVVM 基盤が整ってきたので次は画面遷移を何とかしたい できる限り Xamarin.Forms でがんばりたいので、Xamarin.Forms の Navigation について調べてみると VisualElement.Navigation というプロパティが用意されていました Push や Pop などのメ…

Xamarin で Prism と UnityContainer を使ってみる

少し前の投稿 で DI コンテナ *1 である Unity のプレリリース版が Xamarin 対応していることをご紹介しました(ゲーム開発の方じゃないです;) Prism との相性もよいので今度はこの Unity を Xamarin で使ってみようと思います *1:Dependecy Injection Con…

Xamarin.iOS で ViewModelLocator を使ってみる

前回 作成した Xamarin.Forms 用 ViewModelLocator をさっそく使ってみます

Xamarin で iOS と Windows Phone 8 用 BottomBar を作る

Windows ランタイムアプリにおける BottomAppBar くらいなら Xamarin.Forms に用意されているのではと探してみましたが、やはりない! Android はライセンスを持ってないのでできませんが、Xamarin で iOS と Windows Phone 8.0 で BottomBar というカスタム…

Xamarin.Forms の Grid のレイアウト仕様が独特

Xamarin.Forms で下記のような Grid を組んでみました

Xamarin.Forms の View にバインド可能プロパティを追加する

少し前に Xamarin.Forms でもユーザーコントロール的な View が作成できることがわかったので、今度はこうしたカスタム View に BindableProperty を追加してみようと思います 本家 XAML の依存関係プロパティのようなものみたいですね まずは ContentView …

Xamarin.Forms の画面で iOS アプリだけステータスバーの余白を確保するには

Xamarin.Forms の XAML で次のような ContentPage を記述したら・・・

Xamarin.Forms でユーザーコントロール的な View を作る

前回で Shared プロジェクトだとアセンブリ構成が微妙になるので PCL プロジェクトで作り直し Xamarin.Forms のサンプルだと Page の XAML しかないですが、もしかしたらユーザーコントロール的な View が作れるのかもしれないので、試してみました

Xamarin の Shared プロジェクトの弊害

Xamarin.Forms の Shared プロジェクトで Page に カスタム View を配置するため、下記のような XAML を記述したらエラー!

スワイプで数値の増減ができる UI

円弧シェイプを利用した数値の表現 - しっぽを追いかけて では Button で増減させていましたが、タッチ操作しやすくさせるためスワイプで増減できるようにしてみます!

円弧シェイプを利用した数値の表現

意外と用意されていない始点と終点角度を指定できる円弧 - しっぽを追いかけて で作った円弧シェイプを使って数字と円弧を合わせて表示するチャート?を作ってみました

意外と用意されていない始点と終点角度を指定できる円弧

WPF を含め XAML には XY 座標系で始点終点を指定して描く円弧の Path はありますが、始点終点を角度で指定する円弧がありません・・・ ないものは・・・作ってみました!

さらに UI の仮想化(2)

UI に表示されるデータの仮想化(2) - しっぽを追いかけて では段階的な仮想化を行いましたが、まだまだ UX を向上させるためにできることがあります! それは ISupportIncrementalLoading の段階的なデータ読み込みに時間がかかる場合、スクロールに時間…

UI に表示されるデータの仮想化(1)

ピクセル単位で仮想化するパネル ItemsWrapGrid & ItemsStackPanel - しっぽを追いかけて では UI の仮想化についてご紹介しましたが、UI 以前にそもそもアイテムのデータ量が多い場合は表示が遅れたり、メモリを大量に消費してしまうといった問題が起こりま…

ピクセル単位で仮想化するパネル ItemsWrapGrid & ItemsStackPanel

Windows ランタイムアプリの特定のパネルには、画面に表示されている領域だけ UI 項目を生成したり使いまわしたりして、使用メモリの削減やスクロール動作を高速化する「仮想化」という仕組みが用意されています

GridView の 表示領域をすき間なく詰めるには

GridView を下記のようにシンプルに記述した場合 <GridView Grid.RowSpan="2" ItemsSource="{Binding Source={StaticResource itemsViewSource}}" Padding="116,186,116,0"> <GridView.ItemsPanel> <ItemsPanelTemplate> <ItemsWrapGrid ItemHeight="250" ItemWidth="300" /> </ItemsPanelTemplate> </GridView.ItemsPanel> </gridview>

コンテンツ ViewModel をラッピングする ItemContainerViewModel のすすめ

通常 GridView などに写真のタイルを表示する場合、ItemsSource には ObservableCollection などのように表示するコンテンツ情報を持つ ViewModel をコレクションに入れてバインドすることが多いと思います こうする代わりに PhotoViewModel を下記のような …

ユーザーコントロールとテンプレートコントロールの使い分け

ユーザーコントロールとテンプレートコントロール(WPF だとカスタムコントロール)の使い分けについて、すでにどこかの偉い人が解説しているだろうと思ったら意外と情報がありませんでした 大雑把に表現するとユーザーコントロールは既存のコントロールを組…

MenuFlyout をラジオボタンっぽい強制単一選択にする

MenuFlyout の内部に下記のように ToggleMenuFlyoutItem を配置すると選択式のメニューとして表示できます <AppBarButton Label="ネコのえさ"> <AppBarButton.Icon> <PathIcon HorizontalAlignment="Center" VerticalAlignment="Center" Data="M0,16.0044549486488L30.0405913920894,16.0044549486488 ~ 中略 ~ " /> </AppBarButton.Icon> <AppBarButton.Flyout> </appbarbutton.flyout></appbarbutton>

デフォルトのデザインテーマ定義ファイル

Visual Studio のプロパティパネルからシステムリソースを開くとデフォルトのスタイルを選ぶことができます デフォルトのデザインの色や設定を確認するために、こういった方法で探すこともできるのですが大量にあるスタイルを1つずつ確認していくことになる…

リスト項目のデザインを交互に切り替える

Windows ランタイムアプリにはリスト項目の背景色を交互に切り替えるオプションはありませんが、ItemTemplateSelector を利用すればそういったことは実現できます

テンプレートセレクタは強力なデザイン実装手法

XAML を使った UI 構築の実装手法には便利な仕組みがたくさんありますが、自分が最も好きな仕組みは DataTemplateSelector などのテンプレートセレクタです! え?つい最近こんなネタを見たって?ネタがかぶっただけきっと気のせいです!! なんでテンプレー…

ウィンドウ幅に応じて列数が変化する GridView

普通はクロススライド(タイルをスクロール方向に交差する下にドラッグさせる)で項目を選択するため原則水平スクロールにするんですが、どうしても!GridView を縦スクロールしたい・・・という場合どうしたらよいか その場合はウィンドウ幅に応じて列数を…

本棚風 GridView をつくる

前回の レスポンシブな大理石風背景を表示する - しっぽを追いかけて をさらに拡張して本棚風にタイルを表示させてみたいと思います 完成イメージはこんな感じ

レスポンシブな大理石風背景を表示する

こんな感じの背景を表示させる場合、一枚画像で表示すると解像度が変化したときに柄が崩れたり、グラデが汚くなったりするのであまりよくありません これをレスポンシブに解像度に合わせてきれいに表示されるようにしたいと思います

UP by Jawbone のライフログを Windows アプリで取得する(3)

UP by Jawbone のライフログを Windows アプリで取得する(2)の続きです OAuth 2.0 の処理の流れはわかりましたが、途中のリダイレクト後の Uri 取得をどうするかが未解決でした とりあえずリダイレクト前までの処理を進めてみます