rksoftware

Visual Studio とか C# とかが好きです

[クラシッデスクトップアプリ]Xamarin.Forms。WPF のコントロールのマッピングを見てみた

Xamarin.Forms のプレビュー版ではクラシックデスクトップアプリが作れるので試してみています。
まずは一通りコントロールを表示してそれぞれ WPF のどのコントロールにマッピングされるのかを見てみた話です。

まず Xamarin.Forms でクラシックデスクトップアプリの作り方から、という方は次の記事が参考になるかもしれません。

■ 確認方法

クラシックデスクトップアプリでは、UI の確認は非常に簡単です。
何もしなくても、標準で確認のための機能が備わっています。

※WPF のデバッグの様子
f:id:rksoftware:20180422030412j:plain

この画面上端中央の黒いコントロール。
皆が大嫌いな『WPF を初めて触るベテランエンジニア皆が最初に「こいつを消す方法」を聞いてくる非常に有益なツール』です。
日本語では XAML の UI デバッグツール というらしいです。
このツールをクリックするだけで、実際に生成されている UI コントロールやプロパティを確認することができます。

とても便利!

※コントロールが表示されるビュー

このツールのおかげで、謎の見えないコントロールにクリックが吸われたり、コントロールがどこか見えない場所に隠れたりといった悩みとは無縁です。
この便利ツールを使って、実際に表示されているコントロールを確認するだけでマッピングが確認できます。

■ 確認結果

Xamarin.Forms 使われるクラス (スーパークラス)
StackLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
AbsoluteLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
RelativeLayout Xamarin.Forms.Platform.WPF.FormsPanel Panel
Grid Xamarin.Forms.Platform.WPF.FormsPanel Panel
ContentView Xamarin.Forms.Platform.WPF.FormsPanel Panel
ScrollView ScrollViewer
Frame Border
ActivityIndicator ProgressBar
BoxView System.Windows.Shapes.Rectangle
Button Button
DatePicker DatePicker
Editor TextBox
Entry Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
Image Image
Label TextBlock
ListView ListView
Map Microsoft.Maps.MapControl.Map
OpenGLView System.Windows.Forms.Integration.WindowsFormsHost -> OpenTK.GLControl UserControl
Picker ComboBox
ProgressBar ProgressBar
SearchBar Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
Slider Slider
Stepper <Border><StackPanel><Button/><Button/></StackPanel></Border>
Switch CheckBox
TableView ListView
TimePicker Xamarin.Forms.Platform.WPF.FormsTimePicker TextBox
WebView WebBrowser
EntryCell Xamarin.Forms.Platform.WPF.FormsTextBox TextBox
ImageCell <Grid><Image/><TextBlock/><TextBlock/></Grid>
SwitchCell <Grid><TextBlock/><CheckBox/></Grid>
TextCell <StackPanel><TextBlock/><TextBlock/></StackPanel>
ViewCell Xamarin.Forms.Platform.WPF.CellControl ContentControl

そのままなマッピングもありますが、StackLayout が独自に定義した Panel のサブクラスだったりと結構いろいろありますね。
次はそれらの独自コントロールがどのような機能拡張がされているか確認してみたいところですが、今回はここまで。

[クラシックデスクトップアプリ] Xamarin.Forms で MAP コントロールを使う

Xamarin.Forms では MAP コントロールも扱えますが、少し注意が必要です。
使い方としては NuGet で Xamarin.Forms.Maps を取得してよしなにしてやればよいだけです。

しかし、そこではまってしまいました。

■ はまったポイント

NuGet パッケージは、Xamarin.Forms.Maps です。
そこで間違えて Xamarin.Forms.Map と最後の s を抜いて検索をしていました。
きちんと最後の s まで合ってないと検索で出てこないんですね...。

適当にではなく、きちんと調べて確実にコピペしていれば問題ない点ですが、私と同じ失敗をする方がいらっしゃるかもしれませんので、恥を忍んでメモしておきます。

■ WPF の場合

Xamarin.Forms.WPF のばあいはさらに、NuGet から Xamarin.Forms.Maps.WPF も追加する必要があります。
※Map コントロールを使用するしないにかかわらず、Xamarin.Forms.WPF の場合にはさらに Xamarin.Forms.Platform.WPF

■ その後の手順

NuGet からパッケージを取得しただけでは、画面に地図は出てきません。もう少し手順が必要です。

■ FormsMaps.Init() メソッド

まず、起動時のコードでいったん Xamarin.Forms.Maps 内の Init メソッドを呼びます。
これを書いておかないと、 Xamarin.Forms.WPF では マップが表示されません。

■ XAML の xmlns の追加

MAP コントロールは、独自のアセンブリ、名前空間になっているため、XAML で使用する場合、名前空間の指定をする必要があります。
xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
コントロールを使うところでは、次のようになります。 <maps:Map/>
全体としては次のようになります。
この例では、プロジェクト名を XWpfV3 として作成しています。

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
 xmlns:local="clr-namespace:XWpfV3"
 xmlns:maps="clr-namespace:Xamarin.Forms.Maps;assembly=Xamarin.Forms.Maps"
 x:Class="XWpfV3.MainPage"
 NavigationPage.HasNavigationBar="False">
  <StackLayout>
    <maps:Map/>

■ 実行

このように bing マップが表示されます。

f:id:rksoftware:20180420013658j:plain

■ NuGet パッケージ

補足として、WPF プロジェクトの NuGet は次のようになりました。

f:id:rksoftware:20180420013713j:plain
※執筆時

WPF はある視点で見れば現役人気最高のプラットフォームです。
簡単に試せますので、ぜひ試してみてください。

秋葉原 C# もくもく会 #35 勉強会を開催しました

■ C# もくもく会

C# もくもく会 #35 を開催しました。

C# もくもく会 は東京の秋葉原で毎週木曜日に開催している .NET 系の勉強会です。
もくもく自習を基本とし、分からないことを教えあったり情報共有したりしている会です。 定期開催していますので、お時間のある時に遊びに来ていただければと思います。
ちょっと詰まった時、ネット上で聞くのははずかしいなぁ、という課題のできた時などにも思い出していただけると嬉しいです。

f:id:rksoftware:20180419201546j:plain

最近は10名前後の方が集まっていただけるようになってきました。
今週も10名と大変多くの方にご参加いただきにぎやかになってきました。
特に C# で課題をお持ちでなくても是非遊びに来てください。

■ 目指す勉強会スタイル

世界一敷居の低い勉強会を目指しています。
何か聞きたいことがある場合は、聞く相手を決めずに独り言のようにつぶやくと誰かが拾ってくれる、そんなスタイルでやっています。

■ 次回予定

次回は 2018/04/26 に開催予定です。

C# に関心のある方、是非遊びに来てください。

城東.NET #19 勉強会を開催しました。

■ 城東.NET

城東.NET #19 を開催しました。

城東.NET は東京の最近は秋葉原で毎月第3水曜日に開催している .NET 系の勉強会です。
発表を中心として、発表でなくとも最近やった事や新しい情報などを参加者で共有している会です。

f:id:rksoftware:20180419201152j:plain

私は Xamarin でクラシックデスクトップアプリ(WPF)が作れるらしいので試してみた(続き) というタイトルで話をしました。

Xamarin.Forms.WPF でコントロールがどの WPF のコントロールにマッピングされるか見てみた話しです。

■ 次回予定

来月は 05月16日(水)に開催の予定です。

.NET に関心のある方、是非遊びに来てください。

秋葉原 C# もくもく会 #34 勉強会を開催しました

■ C# もくもく会

C# もくもく会 #34 を開催しました。

C# もくもく会 は東京の秋葉原で毎週木曜日に開催している .NET 系の勉強会です。
もくもく自習を基本とし、分からないことを教えあったり情報共有したりしている会です。

f:id:rksoftware:20180412201711j:plain

定期開催していますので、お時間のある時に遊びに来ていただければと思います。
ちょっと詰まった時、ネット上で聞くのははずかしいなぁ、という課題のできた時などにも思い出していただけると嬉しいです。

f:id:rksoftware:20180412202415j:plain

余談ですが何時も会場をお借りしているコワーキングスペースのプロジェクターへの接続が Apple TV と Chromecast になりより未来が来ました。
是非、このプロジェクタのワイヤレス接続という未来も体験してみてください。

■ 目指す勉強会スタイル

世界一敷居の低い勉強会を目指しています。
何か聞きたいことがある場合は、聞く相手を決めずに独り言のようにつぶやくと誰かが拾ってくれる、そんなスタイルでやっています。

■ 次回予定

次回は 2018/04/19 に開催予定です。

C# に関心のある方、是非遊びに来てください。

Visual Studio の 15.6.6 がリリースされました

前回のアップデートから 6 日ですが Visual Studio の 15.6.6 がリリースされました。
またペースが上がってきた感じで盛り上がってきましたね!

相変わらず日本語ページは遅いので、最新のリリースは英語版を参照するのがおすすめです。

■ 更新内容

今回も更新内容は少ないですが、重大な様相です。

  • プログラムデータベースファイル (PDB) の脆弱性が対策されました。この脆弱性をつくには、攻撃者がこの PDB ファイルにアクセスする必要があった。
  • ソリューションが最初にロードされたときに、Application Insights ユーザーが CodeLens requests と exceptions indicators が表示されないことがある問題が解消されたそうです。

PDB ファイルの脆弱性は影響のある方が多いと思います。前提が厳しく現実的に危機に陥ることは少ないかもしれませんが、確実にアップデートしましょう。

■ 更新方法

Visual Studio の更新はメニューの ツール > ツールと機能を取得 で開くインストーラーから行えます。

Android エミュレーターで XAML をプレビューする

Xamarin Live Player に XAML をプレビューする機能が追加されています。

というわけで、これまで

Android 実機

iOS シミュレーター

を試してきました。
今回は Android エミュレーターです。

■ Xamarin Live アプリ

Android エミュレーターにインストールされているアプリを確認してみると、どのタイミングで入ったか、Xamarin Live Player がインストールされています。

試しに以前に動かしたときにインストールされたのでしょうか?
とにかく、エミュレーター上に Xamarin Live Player があります。

■ 実行

エミュレーターを起動したら、これまでと同様 Shift + Alt + F5 という、ちょっと普通は押さないキーで実行です。
メニューからなら ツール > Xamarin Live Player > ライブ実行の現在のビュー です。

f:id:rksoftware:20180411013711j:plain

確かに、プレビューされました!
画像は用意しませんが、XAML を変更するとプレビューも変化します。すばらしい。

■ 使えそう

とりあえず、XAML 完璧にマスターしていない場合、普通に役に立ちそうです。
Android エミュレーターなら Windows PC 単体でも使えるので、皆さんも良くやっているでしょう電車の中で立ちコーディングなどでも手軽にできるのがうれしいですね。