際際滷

@mitsuba_yu
Avalonia は
Casual Mac Apps
�_�kの�yの�来となりうるか。

? H.N. :築�~ �� [@mitsuba yu]
? silkyfeel Organizer
? Microsoft MVP for Windows Development
? Designer / Developer / Photographer
? Keynoteの燕�はいつも徭蛍で顔唹
? 恷除はHasselbladのカメラを聞うのが�Sしい。
? http://c-mitsuba.hatenablog.com
Profile

? What is Avalonia
? Cross-Platform / XAML based Cross-Platform
? Avalonia
? Cross-Platform への ��繁議スタンス
? Avalonia をとりあえず�g佩してみる
? １云アプリをつくってみた
? tanzanite for Mac build in Avalonia
? まとめ
Agenda

? Avaloniaの�F�r泣のバ�`ジョンは0.10.0です。
? Avaloniaは�Fバ�`ジョンをAlpha/Beta井とは冱っていません。
? が、アップデ�`ト肝及では云セッションの坪否宥りに�嘛�靴�
い��呂�△襪�發靴譴泙擦鵝�
? 嚠めご尖盾ください。
Okotowari

? Avaloniaとはどんなものか。
? �l�けの室�gなのか。
? 麿のCross-Platformとは、どう�`うのか。
? Avaloniaでどこまでできるのか、どこまでやってみたのか。
? ��繁議にはかなりイケてるのでご�B初。
Takeaway

7
? クロスプラットフォ�`ムとは、碧��が畠く�なるハ�`ドウェア
またはOS貧で、揖じ碧��のものを�咾�垢海箸��瓦襯廛蹈�
ラムのこと。�WikiPedia 勣�s�
? 箭えば、１つのプロジェクトでWindows、Mac、iOS、
Androidで�嘛�垢襯▲廛蠅��譴燭蠅垢�瑤里茲Δ編�。
? Write Once Run Anywhere !!!!
? Ex:) Unity, Xamarin, React Native, Flutter, Cordova, Titanium
Cross-Platform

8
? クロスプラットフォ�`ムで、UIをXAMLで�峰できるプラット
フォ�`ムたち。
? 恷除メジャ�`なのはこの4つぐらい�
? Xamarin.Forms
? CSHTML5
? Uno Platform
? Avalonia
XAML based Cross-Platform

9
? Xamarinで�x�kできるプラットフォ�`ムの１つ。
? Monoで恬られている。
? Xamarinはそれぞれのプラットフォ�`ムのロジックコ�`ドをC#
で�峰できる室�g。
? Xamarin.Android => axml / c#
? Xamarin.iOS => Storyboard | Interface Builder / C#
Xamarin

11
? そのXamarinのUI何蛍をXAMLで�峰できるようにして、
Cross-Platform晒したのがXamarin.Forms
? �峰できるXAMLはXAMLの侘をしているけど、Xamarinで鏡徭
て協�xされたコントロ�`ルが謹く、いわゆる圭冱がキツイ。
? Xamarinとしての容しが、Mobile Cross-Platformなので、
iOS/Androidの秤�鵑篭爐い��Desktop�h廠での秤�鵑呂�覆�
富ない。
Xamarin.Forms

13
? 匯鬄�Xamarin.MacもForms.Macも、贋壓はしている。
? が、ほとんど秤�鵑�覆い傍箸靴ぁ�
? Mac耕嗤なUI協�xには、�Y蕉Interface Builderが駅勣であった
りして、頼莎にXAMLでラッピングされているわけではない。
? ので、Macのアプリをかんたんに恬りたい�にはちょっと�い
てないな。��繁議に�
Xamarin.Forms

14
? C#/XAML for HTML5な室�g。
? HTMLの旗わりに、XAMLで。JSの旗わりにC#で�峰できる、
Web�_�k喘のプラットフォ�`ム
? Migrate existing Silverlight, WPF, UWP, and Xamarin apps to
the Web なんて�ってる。
? 劣ちょっと乾ってみた��では、なかなか措く竃栖てて中易い
�室�g議に。�
? Webのみで、Cross-Platformか�と冱われると�`うかも�
CSHTML5

15
? 書イケイケのXAML based Cross-Platform。
? UWPをベ�`スに�O�され、Windows, WebAssembly, iOS, Mac,
Android, Linuxで�嘛�垢襦�
? サンプルコ�`ドも謹いし、WinUIを函り�zんだりイケイケ。
? 2018定5埖にファ�`ストリリ�`スされている。
Uno Platform

16
? �gはXamarinの貧で�嘛�垢襦�嘛�靴討い拭�
? 冱い�QえればよりWindows Appsな�_�k宀の�蕕法�
UWP�Lによりよく恬られたXamarin.Forms。
ほぼUWPのノリでXAMLを�峰できる。
? メインはモバイルプラットフォ�`ムだけど、匯�MacApps�_�k
のドキュメントも富しずつ��えてきた。
Uno Platform

17
Uno Platform
? Monoから用抜した

19
? 屎しくは、AvaloniaUI/Avalonia という兆念。
? .NET5(.NET Core) + GTK3で恬られている。
? 念峰のと揖じように、XAML/C#でアプリ�_�kが辛嬬。
? 2015定から�_�kが�Mめられている。
Avalonia

20
? UnoがUWPなら、AvaloniaはWPFベ�`スの�O�。
? ほぼWPFのノリでXAMLを�峰できる。
? 麿のCross-Platformに曳べて室�gスタックが院い。
? �O�とコンセプトとして、麿のCross-Platformに曳べて、
Desktop貧で�嘛�垢襯▲廛蠅�Cross-Platformに�い。
Avalonia

21
? 屎岷あんまり佚喘してない。
? すべてのプラットフォ�`ムの恷寄巷�s方な�C嬬しか聞えない。
? �g廾するプラットフォ�`ムが��えると、エラ�`だったり、鯛ち
たときに、どのレイヤ�`で��}があるのか俳り蛍けが�yしい。
? ex)WindowsとAndroidでは�咾�里法�iOSではなぜか�咾��
? �Y蕉それぞれのプラットフォ�`ムの岑�Rが駅勣。
Cross-Platform

22
? WPFなら匯鵬でできるのに、噫侭のプラットフォ�`ムで
￣まともに￣�_�kしようとすると、どうしていいか蛍かんない。
? そのために仟しく冱�Z?ツ�`ル�えるのはめんどい。
? でもでも、��gな宴旋ツ�`ルぐらいは恬りたいよね。
? .o0( Silverlight OOB とか、その泣めっちゃ措かった�
? やっぱり、��Tれたスタイルで、いろんなプラットフォ�`ム
のアプリが恬れるのは、やっぱ措いよね。
Cross-Platform

23
? だから、Cross-Platformはしないけど、Cross-Platformな
ライブラリの脅栽の措い�C嬬だけを聞ってアプリを恬ろう。
? StoryboardもInterfaceBuilderもSwiftも岑らずにMacApps
を�_�kできる弊順�は�薦議じゃない�
? っていうスタンス。
Cross-Platform

Avaloniaをとりあえず
�g佩してみる
24

25
? dotnet CLI
dotnet new -i Avalonia.Templates
? VS Code
? VS for Mac
? JetBrains Rider
? Visual Studio
? https://marketplace.visualstudio.com/items?
itemName=AvaloniaTeam.AvaloniaforVisualStudio
Develop

27
? Avalonia Application
Project Template

28
? Avalonia MVVM Application
Project Template

29
? Avalonia MVVM Application
Project Template

30
? App.xaml.csでVMの兜豚晒されてる
Project Template

31
? VSでF5で�g佩するだけ。
Exec onWindows

32
? Terminalからコマンドで�g佩する。
? csprojのあるフォルダで、dotnet run
? ��IDEで�g佩
Exec on Mac

XAMLとデザイナ�`を�XくDEMO
33

35
? UWP�u
? PCにインスト�`ルされてる
フォントを販吭の猟忖で燕幣する。
? 販吭のフォント兆をコピ�`
? フォント匯�EはSharpDXで函誼
? ��繁議に晩�デザイン恬�IはMac。
ホントはMacで圀しかった。
? Formsとかでやろうとしたけど、
房ってるUIが恬れずに、イマイチ。
tanzanite - font selector tool -

36
tanzanite for Mac - font selector tool -

37
? インスト�`ルされているフォント匯�Eを函誼する。
? 販吭の猟忖双を、畠てのフォントで燕幣する。
? 猟忖弼、嘘尚弼、フォントサイズを販吭に�O協する。
? 匯�Eからお�櫃鉾襪螢侫�鵐箸鬟團奪�▲奪廚靴討い��
? お�櫃鉾襪螢侫�鵐箸離侫�鵐斑獷鬟灰圦`する。
? お�櫃鉾襪蠅鮟盂�垢襦�

38
? System.Drawing.Text.InstalledFontCollection
? Macだと、corecompat.system.drawingが聞える。
が、畠てのフォントが函れるわけではない��i
https://github.com/CoreCompat/CoreCompat
?

39
SkiaSharp
? Skia Graphics Library
? Googleが�I�Г靴�OSSな2D Graphicsなライブラリ
? https://skia.org/
? SkiaSharp
? C#�けにラップしたライブラリ
? mono狼プラットフォ�`ムでよく�かける。
? Avaloniaにも�Mみ�zまれている。

40
Binding Font Collection
? SkiaSharp.SKFontManager.Default.FontFamilies
? 書指はこれを�駻叩�
? �g佩�h廠にインスト�`ルされている畠てのフォントと
フォントウェイトを函誼できる。

41
Binding FontCollection
? 噸粁どおり、XAMLとBindingで�g�F。

42

43
<ItemsControl Items="{Binding FontCollection}￣
HorizontalAlignment="Stretch" VerticalAlignment=＾Stretch">?
<ItemsControl.Styles>
<Style Selector="WrapPanel">
<Setter Property="HorizontalAlignment" Value="Stretch" />
<Setter Property="VerticalAlignment" Value="Stretch" />
<Setter Property=＾Width"
Value="{Binding Bounds.Width,ElementName=ScrollViewer}" />
</Style>
</ItemsControl.Styles>?
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Background="{Binding BackgroundColor}" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
? いつもどおり、IEnumerableをBinding

44

45
Binding Font Collection
? TextBlockにフォント兆と、燕幣したい猟忖双をBinding
<Button Background="Transparent"
Command="{Binding DataContext.AddFavoriteListCommand,ElementName=Window}"
CommandParameter="{Binding}">
<Grid>
<StackPanel HorizontalAlignment="Stretch" Margin="12">
<TextBlock FontSize="16" Text="{Binding}"
Foreground="{Binding
DataContext.TargetFontColor.Value,ElementName=Window}"
Margin="0,0,0,2" />
<TextBlock FontSize="{Binding Value,ElementName=FontSize}"
Text="{Binding Text,ElementName=TargetText}"
????????????????DataContext.TargetFontColor.Value,ElementName=Window}"
FontFamily="{Binding
?????????????Converter={StaticResource StringToFontFamilyConverter}}" />
</StackPanel>
</Grid>

46
? 匯�Eからお�櫃鉾襪螢侫�鵐箸鬟團奪�▲奪廚靴討い��

47
Fav Font Item
? �x�kフォントをお�櫃鉾襪螢螢好箸没啓咾垢�Command
<Button Background="Transparent"
Command="{Binding DataContext.AddFavoriteListCommand,ElementName=Window}"
CommandParameter="{Binding}">
<Grid>
<StackPanel HorizontalAlignment="Stretch" Margin="12">
<TextBlock FontSize="16" Text="{Binding}"
DataContext.TargetFontColor.Value,ElementName=Window}"
Margin="0,0,0,2" />
<TextBlock FontSize="{Binding Value,ElementName=FontSize}"
Text="{Binding Text,ElementName=TargetText}"
????????????????DataContext.TargetFontColor.Value,ElementName=Window}"
FontFamily="{Binding
?????????????Converter={StaticResource StringToFontFamilyConverter}}" />
</StackPanel>
</Grid>

48
Fav Font Item
? Popupでコピ�`と盾茅メニュ�`を燕幣

49
Fav Font Item (C#:VM)
AddFavoriteListCommand = new ReactiveCommand();
DeleteFavoriteListCommand = new ReactiveCommand();
CopyFontNameCommand = new ReactiveCommand();
var enumerable = SKFontManager.Default.FontFamilies.OrderBy(o => o);
FontCollection = new ObservableCollection<string>(enumerable);
FavoriteFontCollection = new ObservableCollection<string>();
AddFavoriteListCommand.Subscribe(o =>
{
var value = o.ToString();
if ((value != null) & FavoriteFontCollection.Contains(value)) return;
FavoriteFontCollection.Add(value);
});
DeleteFavoriteListCommand.Subscribe(o =>
{
if ((value != null) & FavoriteFontCollection.Contains(value)) FavoriteFontCollection.Remove(value);
});
CopyFontNameCommand.Subscribe(async o =>
{
if (value != null) await Application.Current.Clipboard.SetTextAsync(value);
});

50
Avalonia
? XAML狼�_�kの�U�Yがあれば、云輝に揖じノリで��韻襦�
? ReactivePropertyも、Interactivityも聞える。
? PrismとかMVVMhogehogeみたいなのも聞えるらしい
�蛍搾いMVVMライブラリ腕いなので、�d龍なし�
? 匯圭で、畠くハマらなかった、という�Uでもなかった。

51
? Style.Triggerがない。 -> Interactivity聞え。
? �r？プロパティ兆が�笋錣辰討い襦�
? TextBoxで晩云�Zが嬉てない。
? IMEの��Qが燕幣されない。
? MacのCommand + Qで�K阻ができない。
? Macのメニュ�`バ�`を恬りたい。
? .App Packing
Point

52
? ActualWidth/Heightがなくなった。
? Control.Bounds.Width/Heightに�筝釗�
? ItemsSourceがなくなった。
? ItemsにBinding辛嬬になった。
? いくつかのPropertyの兆念がWinRT��になった。
? PopupのIsLightDismissEnableとか。
? 庇�Lなプロパティ兆が玉く�筝釮気譴拭�
? 頼畠にWPFのXAMLコピペすると、餓蛍がでる。
? とはいえ、寄した��}ではない。
Property

53
? TextBoxで晩云�Zが嬉てない。
? TextBlockの晩云�Zは屎しく燕幣される。
? プロジェクトを恬撹したままだと、TextBoxの晩云�Zが猟忖
晒けする。
? 苧幣議にフォントを峺協する。
? IMEの��Qが燕幣されない。
? そういうものらしい。�_協すれば燕幣される。
TextBox / IME

54
? FontFamilyに�}方のフォントを峺協できる。
? �桑に贋壓するフォントが聞われる。
? Cross Platformらしい何蛍
? Windowに峺協すれば、塘和のコントロ�`ルのフォントが��
�Qわる。TextBoxにだけ苧幣議にフォント峺協しても措い。
<Window
Title="tanzanite for mac - font selector tool -"
x:Name=＾Window"
FontFamily="Meiryo UI, Osaka">
TextBox / IME

55
? MacのCommand + Qで�K阻ができない。
? Macのメニュ�`バ�`を恬りたい。
? MacAppのショ�`トカットはメニュ�`バ�`で協�xされる。
? メニュ�`バ�`を�g廾して、
兜めてCommand + Qが聞える。
Mac MenuBar

56
? しかも、麿のと�`って、XAMLで��韻襭�
<Application xmlns="https://github.com/avaloniaui"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:tanzanite_for_mac"
Name="tanzanite - font selector tool -"
x:Class=＾tanzanite_for_mac.App￣>
<NativeMenu.Menu>
<NativeMenu>
<NativeMenuItem Header="About tanzanite for mac" IsEnabled="True"
Command="{Binding AboutCommand}" />
</NativeMenu>
</NativeMenu.Menu>
</Application>
Mac MenuBar

57
? App.xamlに慌宥メニュ�`を、Windowには耕嗤メニュ�`を。
? ただし、Windowにも腎のNativeMenuが駅勣。
? 兜指軟��rにメニュ�`が燕幣されず、匯業掲アクティブにすると燕幣される。
? たぶんバグ。
? でも、ここをXAMLでBindableで��韻襪里�邯漾�
<Window xmlns="https://github.com/avaloniaui">
<NativeMenu.Menu>
<NativeMenu>
</NativeMenu>
</NativeMenu.Menu>
Mac MenuBar

58
? About MyApp
<NativeMenuItem
Header=
"About tanzanite for
mac￣
Command=
＾{Binding
AboutCommand}" />
Mac MenuBar

59
? https://avaloniaui.net/docs/packing/macOS
? ほぼここにあるままでOK
? アプリアイコンicnsは、児云議にはMacで恬撹する。
? Release喘.App恬撹するには、この２つをcsprojのある��銈�
コマンド�g佩すれば恬られる。
dotnet restore -r osx-x64
dotnet msbuild -t:BundleApp -p:RuntimeIdentifier=osx-x64
-p:CFBundleDisplayName=MyBestThingEver -p:UseAppHost=true
.App Packing

60
? SkiaSharpで函誼したフォント兆だと、Windowsで�嘛�気擦�
��蓮�娜蒋Zに屎しくフォントが�m喘されない。
? TextBoxに晩云�Z秘薦�rに、ビ�`プ咄がなる��しい。
? レイアウト�麻のコストが寄きくて、うまくアニメ�`ションさ
せれない。
Other Prombrem

61
Sum up
? Avaloniaを乾ってみてから、やってみたことまでを�B初。
? WPFベ�`スでUWPのコントロ�`ルのようなリッチさはない。
�でもFluentなUIテ�`マは贋壓する�
? ネイティブUIもXAMLで�峰できる。
? プラットフォ�`ムとしては�Qして仟しい何�ではない。
? ちょっと乾ってみた狼�並が晩云�Zである。
しっかりした坪否は、哂�Zの巷塀ドキュメントが匯桑。
割�g業も措い。

62
Sum up
? Style.Triggerが聞えないのは祐い。コントロ�`ルのプロパティ
兆が�O蓮に�笋錣辰討い襦�IME巓りがイケてない。
? でも、WPFと揖じ岑�R揖じ�峰でMacApp�_�kができるのは掲
械に寄きい。箔めてたもの。
? 書指のtanzanite.appで寄悶120MBぐらいのサイズにはなる。
PCがタ�`ゲットなので、�Sせるかな。
? ��繁議にイマ恷容しのプラットフォ�`ム。
? ぜひXAML狼�_�k宀には乾ってみてもらいたい。

際際滷

Avalonia for MacApps

More Related Content

What's hot (20)

Similar to Avalonia for MacApps (20)

More from c-mitsuba (20)

Recently uploaded (9)

Avalonia for MacApps