UI
Shapesの機能を使うにはXamarin.Forms 4.7以上にします. [Xamarin.Forms] Tips and tricks working with Shapesjaviersuarezruiz.wordpress.com ツールでSVGを描いてShapeで使う www.youtube.com Method Draw 作図して,それをSVGで出力できる. editor.m…
CollectionViewをネストすると,以下のような表示になる. <CollectionView ItemsSource="{Binding AnimeInfos}"> <CollectionView.ItemsLayout> <LinearItemsLayout ItemSpacing="10" Orientation="Vertical" /> </CollectionView.ItemsLayout> <CollectionView.ItemTemplate> <DataTemplate> <Grid> <Frame BackgroundColor="LightPink"> </frame></grid></datatemplate></collectionview.itemtemplate></collectionview>
ステータスバーの色はナビゲーションバーの色や,アプリを代表する色に揃えると見栄えがよくなる. montemagno.com こちらの記事のとおりにすればAndroidのステータスバーの色と文字の色を変更することができる. ただ,記事の中ではActivityの取得にPlugin.Curr…
docs.microsoft.com 変換 docs.microsoft.com System.Drawing.ColorとXamarin.Forms.Colorの間で相互に変換する場合は以下のように,変換先の型の変数に代入するだけでよい. Xamarin.Forms.Color xfColor = Xamarin.Forms.Color.FromRgb(0, 72, 255); System.…
docs.microsoft.com リスト表示するときに,何かしらの項目でグループ化して表示したいときがあります. 例えば,年代であったり,名字であったり,好きなゲームのジャンルであったり,動物の種類であったりといった具合です. CollectionViewにはデータをグルーピ…
docs.microsoft.com これはグルーピングしたCollectionViewのスクロールの場合. private async void FilterButton_Tapped(object sender, EventArgs e) { var choices = _viewModel.GroupedSessions.Select(g => $"{g.TrackID} : {g.TrackName}"); string ch…
ContentPage内で指定するので,Shellに限ったことではないと思う. 以下のようにすると,上部のNavbarにボタンが追加される. <ContentPage.ToolbarItems> <ToolbarItem Text="Add" Clicked="AddItem_Clicked" /> </ContentPage.ToolbarItems> 複数も可. <ContentPage.ToolbarItems> <ToolbarItem Text="Add" /> <ToolbarItem Text="Hello" /> </ContentPage.ToolbarItems> こんな感…
選択時の背景色を変更する方法はこちらの記事に書きました. shuhelohelo.hatenablog.com 背景色を変更しましたが,文字の色によっては見えにくくなることもあります. このため,選択時の背景色に合わせて文字色も変更されるようにします. 選択時の色のときは,F…
各項目が選択されたときの色(Selcted Color)を変更する方法はこちら↓ forums.xamarin.com ShellにはItemTemplateがあって,ここで指定したDataTemplateはFlyoutの各アイテムの見た目の定義になる. これを定義しなければデフォルトのスタイルが使用される. <Shell.ItemTemplate> <DataTemplate> <Grid Style="{StaticResource FloutItemStyle}"> <Grid.ColumnDefinitions> <ColumnDefinition Width="0.2*" /></columndefinition></grid.columndefinitions></grid></datatemplate></shell.itemtemplate>…
docs.microsoft.com github.com 公式のサンプルのとおり,各テンプレートは以下のとおり FlyoutHeaderのテンプレート <Shell.FlyoutHeaderTemplate> <DataTemplate> <Grid BackgroundColor="Black" HeightRequest="200"> </grid></datatemplate></shell.flyoutheadertemplate>
全部↓の公式のサンプルを見たら良かった. github.com 以下のようにShellContent毎にStyleを指定している. <FlyoutItem Route="animals" Title="Animals" FlyoutDisplayOptions="AsMultipleItems"> <Tab Title="Domestic" Route="domestic" Icon="paw.png"> </tab></flyoutitem>
blog.verslu.is Xamarin.Forms 4.7 pre-1以降で使えるとのことなので使ってみた. まずは現時点で最新のXamarin.Forms 4.7 pre-4をインストールする. Nugetパッケージマネージャからインストール(アップデート)をする. プレビュー版を検索候補に出す場合は,検…
Xamarin.FormsにはRefreshViewというコントロールがあって,これは画面を下に引っ張ってデータを更新するPull-To-Refreshという動作を提供するものです. とても便利でIsRefreshingというプロパティを持っていて,このtrue,falseを切り替えることでデータ更新中…
タイトルのとおり,RefreshViewで囲んだコントロールはPull-To-Refresh(下に引っ張って更新)できるようになる. Imageは試した. 画像を下に引っ張ると別の画像に変わる,といったことができる. <RefreshView Command="{Binding AvatarRefreshCommand}" IsRefreshing="{Binding IsAvatarRefreshing}"> </refreshview>
mallibone.com Shellは先頭のShellContentがデフォルトで表示されることを利用し,ローディングページ(LoadingPage)をShellContentとして先頭に置いている. LoadingPageはLoadingPage.xaml.csで以下のように初期化処理を行っている. internal LoadingViewMode…
www.youtube.com LottieはAirBnBが開発した,アニメーションを表示するライブラリ. 表示させるアニメーションはこちらのサイトに公開されている. lottiefiles.com 動画はiOSの例なので,Androidはどうしようかと探した.この記事はAndroidの情報です.参考にした…
Experimentalですが,OSのLightテーマ,Darkテーマの切り替えに応じてUIの見た目を切り替える仕組みが提供されています. それがOnAppThemeマークアップ拡張です. 以下のように記述することで,OSのLightテーマ,Darkテーマに応じて,それぞれに指定した値が適用さ…
docs.microsoft.com www.youtube.com アプリケーション内で使用する値やStyleなどをResourceDictionaryに定義しておき,StaticResourceとして使用することはよくあります. <Color x:Key="PrimaryColor">#547799</Color> ... <Label TextColor="{StaticResource PrimaryColor}"/> このResourceの値はプログラム中で変更することができます. App.Current</label>…
以下のサンプルアプリを実行したとき,Entryの見た目と挙動が違っていたので,どういう仕組なのか色々調べた結果. github.com どんな挙動かというと以下のとおり. Entryに背景色がついていて,focusが当たると色が変わる. これはVisual="Material"としただけで…
docs.microsoft.com devblogs.microsoft.com iOSとAndroidで可能な限り同じマテリアルデザインの見た目に統一することができる. これまではそれぞれネイティブのコントロールをそのまま使っていたところを,見た目を統一できる,かつデザインを新し目のものに…
FlyoutItemの各アイテムの背景色,フォントカラーなどを変更したい場合は以下のような定義をShell.Resources内に定義する. <Style ApplyToDerivedTypes="True" Class="FlyoutItemLayoutStyle" TargetType="Layout"> <Setter Property="HeightRequest" Value="44" /> <Setter TargetName="FlyoutItemLabel" Property="Label.FontSize" Value="16" /> </setter></setter>
参考 https://xamgirl.com/adjusting-elements-when-keyboard-shows-in-xamarin-forms ソフトキーボード表示時のデフォルトの動作 Entryにフォーカスが移動すると,ソフトウェアキーボードが表示されます. このとき,選択されたEntryが隠れないようにソフトウ…
github.com SharpnadoのGitHubリポジトリにあるサンプル動画でわかるように,このライブラリが提供する機能の一つとしてリスト状に表示した各アイテムをドラッグアンドドロップで位置を入れ替えることができるHorizontalListViewというコントロールがあります…
Xamarin.Forms 4.5からEmbedded Fontsというプレビュー版の機能があって,これはどういうものかというと,これまでフォントを追加する場合は各プラットフォームのプロジェクト内にフォントファイルを配置する必要がありましたが,フォントファイルを共有プロジ…
UIのアニメーションについていくつか記事をかきました. shuhelohelo.hatenablog.com 今回作ったのはボタンを押すと,その周りに複数のボタンが表示される,たまに見るやつです. アニメーション自体はScaleTo,FadeTo,TranslateToの3つを組み合わせた簡単なもの…
どういうことかというと,画面の表面に透明なレイヤーを設けて,そこにメッセージを重ねるといった表現をしたい場合,上(表)のレイヤーがユーザーの操作を拾うため,下のレイヤーのコントロールを操作できません. 例えば以下のようにテキストボックスやボタンを…
docs.microsoft.com Labelに収まらない文字列を｢...｣で省略する3種類のTruncationがとても便利. <StackLayout> <Frame HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="200"> <Label Text="何も指定しない場合は,テキストは折り返される." /> </Frame> <Frame HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="200"> </frame></stacklayout>
CSSと同様に,コントロールの見た目を予め定義し,それを各コントロールに指定することで,見た目を変更することができます. 基本的にはResourceDictionaryにStyleとして定義して使用します. これによって同じ見た目の定義を1回行うだけで,同じ見た目のコントロ…
Setting the NavigationBar colors in Xamarin.Formstheconfuzedsourcecode.wordpress.com NavigationPageのBarBackgroundColorとBarTextColorというプロパティで変更することができます. 指定の方法は,C#であればApp.xaml.csでNavigationPageをインス…
追記 この記事はNavigationPageを使う場合には有効だけれども,Shellを使う場合は有効ではない. ShellのNavigationBarの色を変更するには以下の記事にあるように,Android側のMainActivity.csでWindow.SetStatusBarColor(Android.Graphics.Color.Argb(255, 44,…
