Caliburn.Microでの画面分割

2023.05.31

Caliburnを使って画面の部品を分けて開発していくときの手順について覚書。

例として、画面を左右にわけて表示するサンプル。

元になる画面xamlを修正

MainView.xamlに記載。

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <ContentControl x:Name="LeftPane" Grid.Column="0"/>
        <ContentControl x:Name="RightPane" Grid.Column="1"/>
    </Grid>

ContentControlに名前をつけて記載します。

ViewModelを作成

ViewModels\LeftViewModel.csとViewModels\RightViewModel.csをそれぞれ作成。

	public class LeftViewModel : Screen
	{
	}

	public class RightViewModel : Screen
	{
	}

Viewを作成

Views¥LeftView.xamlとViews\RightView.xamlをそれぞれユーザーコントロールで作成。

    <Grid>
        <Label Content="This is left pane"/>
    </Grid>

    <Grid>
        <Label Content="This is right pane."/>
    </Grid>

Bootstrapperに登録

			container.PerRequest<ShellViewModel>();
			container.PerRequest<MainViewModel>();
			container.PerRequest<LeftViewModel>();  //追加
			container.PerRequest<RightViewModel>();  //追加

MainViewModelのプロパティとしてViewModelを登録

        public LeftViewModel LeftPane { get; }
        public RightViewModel RightPane { get; }
        public MainViewModel()
        {
            LeftPane = IoC.Get<LeftViewModel>();
            RightPane = IoC.Get<RightViewModel>();
        }

これでデバッグすると左右にバラバラに出る。

CaliburnはViewModelを配置していくとViewがついてくる感じ。

むしろこれに慣れてたのでCommunityToolKit.MVVMが気持ちわるい。