この記事はSFC-RG Advent Calendar 2019の10日目です。

概要

AvaloniaUIで簡単になんか作る。

動機

マルチプラットフォームなGUIを作りたい。
子プロセスで別のプログラム動かしたい。
HTMLとCSSが苦手。
C#が好き。

注意

筆者もそこまでAvaloniaUIとか詳しくない。
MVVMを全く理解していない。
XAMLの書き方も我流。

間違ってたら優しく教えてくれると嬉しいです。

環境構築

DotnetCoreSDKを入れる。（本記事では3.0.100）
https://dotnet.microsoft.com/download
AvaloniaUIのテンプレートを入れる。

cd ~
mkdir workspace
cd workspace
git clone https://github.com/AvaloniaUI/avalonia-dotnet-templates
dotnet new --install ~/workspace/avalonia-dotnet-templates

プロジェクトの作成

MyAppという名前でプロジェクトを作成

cd ~/workspace
dotnet new avalonia.mvvm -o MyApp
cd MyApp

初期状態はこんな感じ

> ls
App.xaml    Assets      MyApp.csproj    ViewLocator.cs  Views
App.xaml.cs Models      Program.cs  ViewModels  nuget.config

動かしてみる

dotnet run

windowが出ました。

UIを作っていく

Views/MainWindow.xamlを弄っていく。

WidthとHeightを追加してwindowのサイズを決める。(ここでは800 * 800)

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="clr-namespace:MyApp.ViewModels;assembly=MyApp"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
        Width="800" Height="800"
        x:Class="MyApp.Views.MainWindow"
        Icon="/Assets/avalonia-logo.ico"
        Title="MyApp">

ボタンを足してやる。あとTextBlockは邪魔なので消す。
Window.Stylesでは各パーツのデザインをクラス毎にまとめて設定できる。
(ここではButtonパーツのtestというクラス)

<Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>
    <Window.Styles>
        <Style Selector="Button.test">
            <Setter Property="Width" Value="100" />
            <Setter Property="Height" Value="25" />
        </Style>
    </Window.Styles>

    <Button Classes="test"> Click Me! </Button>

</Window>

実行してみる

ど真ん中にボタンが登場。

バインドしてみる

ボタンに名前をつける。

<Button Classes="test" Name ="testButton"> Click Me! </Button>

MainzWindow.xaml.csを弄る。

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using Avalonia.Interactivity;

namespace MyApp.Views
{
    public class MainWindow : Window
    {
        private Button _testButton;

        public MainWindow()
        {
            InitializeComponent();
            // xaml内から該当のボタンを探す
            _testButton = this.FindControl<Button>("testButton");
            // バインドする
            _testButton.Click += TestButtonClicked;
        }

        private void InitializeComponent()
        {
            AvaloniaXamlLoader.Load(this);
        }

        private void TestButtonClicked(object sender, RoutedEventArgs e)
        {
            // クリックされたらボタンのサイズを変える
            _testButton.Height = 200;
        }
    }
}

実行