はかせのラボ

私の頭の中を書いていく雑記ブログです

WPF Livet使ってWPFアプリを作り始めた

C#

どうも、hakaseです。
もうそろ北海道を脱出してから一年になります。

コロナとかで色々大変でしたが、
なんとか家事等にも慣れてきてデュエマ等の開発以外の趣味も増え、
すこぶる元気に過ごせています。

ただまぁなんやかんやでプログラム書くのは好きなので、
まったりプログラムも書いてました。

今回は自宅で細々と書いては捨ててを繰り返している
Livetを使ったアプリ開発について
備忘録も兼ねて書いていきたいと思います。

なおxamlとかMVVMとかBindingとか出てきますが、
そういった用語だとかはまた別で解説記事上げますので
この記事では解説しません。
(書いてて読みづらい＆ようわからんってなってしまったので)

解説記事はなるはやで上げるのでお待ちください。

目次

環境

Windows10
VS2019
Livet

Livet(りべっと)とは

まずこの記事ではLivetというMVVMフレームワークを使用します。
どういうことができるフレームワークかというと、
MVVMという設計をしやすくするものです。

ダウンロードはこちら

い つ も の

基本編入門編ではもはやおなじみHello Worldのプログラムを組みます。

上記のリンクからLivetをダウンロードしてもらうと
VS2019にLivetのプロジェクトテンプレートが追加されるので
それを使ってプロジェクトを作ります。
f:id:hakase0274:20210131163418p:plain
.NetCoreか.NetFrameworkかはお好みでどうぞ。

MVVMではModel/View/ViewModelのどれを使っても
Hello Worldが出せるのでこの記事では全パターンやってみます。
(どれもそんな難しくないので)

まずはViewから
テンプレートを作成した時勝手にできる
MainWIndow.xamlに下のコードを追加。

<Grid>
    <TextBlock Text="Hello World"/>
</Grid>

そして実行
f:id:hakase0274:20210131164315p:plain

次ViewModelを使うパターン
まずMainWindow.xamlの先頭にあるWindowのタグ内に下記のコードを追加

xmlns:vm="clr-namespace:LivetApp1.ViewModels"

そしてWindowタグの下あたりに追加

<Window.DataContext>
    <vm:MainWindowViewModel />
</Window.DataContext>

そのあとViewパターンで追加したコードを一部変更

<Grid>
    <TextBlock Text="{Binding BindText,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"/>
</Grid>

そしてこれまた勝手に作られているMainWIndowViewModel.csにこんなの追加

private string mBindText = "Hello World";
public string BindText
{
    get => mBindText;
    set => RaisePropertyChangedIfSet(ref mBindText,value);
}

はい実行
f:id:hakase0274:20210131164956p:plain

最後Model使うパターン
まずMainWindowViewModelをこんな感じに変更

public MainWindowViewModel() 
{
    mModel = new Model();
    var listener = new PropertyChangedEventListener(mModel);
    listener.RegisterHandler(nameof(Model.BindText), (s,e) => { RaisePropertyChanged(nameof(BindText)); });
    CompositeDisposable.Add(listener);
}

private Model mModel;

public string BindText 
{
    get => mModel.BindText;
    set => mModel.BindText = value;
}

そしてこれまたぬるっと作成されているModel.csに追加

private string mText = "HelloWorld";
public string BindText 
{
    get => mText;
    set => RaisePropertyChangedIfSet(ref mText,value);
}

最後の実行
f:id:hakase0274:20210131165625p:plain

はい全部無事Hello Worldがでました～

あとがき

今回は備忘録を兼ねてLivetのインストールから
Hello Worldまでやってみました。

WPFは色々と用語や前提知識があるので、
一記事だけでちゃんとした実装と解説を書くのは
少なくとも私の文章力では無理でした。

全部をまとめた長尺の記事を書くのもありかと思いましたが、
私の気力が持たないのと読む側も辛いだろうということで
少しずつ記事を拡充していく方向性で行くことにしました。

一応コード等は全てgithubの方に上げているので
こちらのコードを見てもらってそれでもわからないことは
Twitter等で聞いてもらえればと思います。
(そうすればどこが分かりにくかったとかの情報が収集され記事のクオリティがあがるかも)
github.com

それでは今回はこの辺でノシ