【C#】【WPF】Caliburn Micro で、MVVMで画面を遷移するサンプルコード

２回めとなる今回は、Caliburn Microで、MVVMで画面を遷移するサンプルコードを作ってみましょう。

（０）Visual Studioで、CMSample3のプロジェクトを作成する。

（１）NuGetで、Caliburn Micro Startをインストールする。

（２）App.Xaml.csを削除する。

（３）App.xamlを編集する。

<Application x:Class="CMSample3.App"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:local="clr-namespace:CMSample3"
             >
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary>
                    <local:AppBootstrapper x:Key="bootstrapper" />
                </ResourceDictionary>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

（４）MainWindows.xamlを削除する。

　　　　実行すると、うまく動く。

（５）日本語を使うために、ShellView.xamlウインドウを再作成する。

　　　　再作成でできた、ShellView.xaml.csは、いらないので削除する。
　　　　Helloを「こんにちは」に変えて実行すると、うまく動く。

（６）IShell.csを修正する。

using Caliburn.Micro;

namespace CMSample3 {
    public interface IShell {
        void ActivateItem(Screen hoge);
    }
}

（７）IBase.csを作成する。

namespace CMSample3
{
    public interface IBase { }
}

（８）IFront.csを作成する。

namespace CMSample3
{
    public interface IFront { }
}

（９）BaseViewModel.csを作成する。

using Caliburn.Micro;

namespace CMSample3
{
    class BaseViewModel : Screen
    {
        public void DisplayFront()
        {
            ((IShell)this.Parent).ActivateItem(new FrontViewModel());
        }
    }
}

（１０）FrontViewModel.csを作成する。

using Caliburn.Micro;

namespace CMSample3
{
    class FrontViewModel : Screen
    {
        public void hoge()
        {
            ((IShell)this.Parent).ActivateItem(new FrontViewModel());
        }
    }
}

（１１）ShellViewModel.csを修正する。

using Caliburn.Micro;

namespace CMSample3 {
    public class ShellViewModel : 
        Conductor<Screen>.Collection.OneActive, IShell 
    {
        public ShellViewModel()
        {
            this.ActivateItem(new BaseViewModel());
        }
    }
}

（１２）ShellView.xamlを修正する。

<Window x:Class="CMSample3.ShellView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:CMSample3"
        mc:Ignorable="d"
        Title="ShellView" Height="450" Width="800">

    <ContentControl x:Name="ActiveItem"/>
</Window>

（１３）BaseView.xamlを作成する。(ユーザーコントロール）

<UserControl x:Class="CMSample3.BaseView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CMSample3"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Button Name="DisplayFront" Content="フロント表示" HorizontalAlignment="Left" Margin="141,140,0,0" VerticalAlignment="Top" Width="75"/>
        <Label Content="ベース画面" Background="LightBlue" HorizontalAlignment="Left" Margin="141,76,0,0" VerticalAlignment="Top"/>
    </Grid>
</UserControl>

（１４）FrontView.xamlを作成する。(ユーザーコントロール）

<UserControl x:Class="CMSample3.FrontView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:local="clr-namespace:CMSample3"
             mc:Ignorable="d" 
             d:DesignHeight="450" d:DesignWidth="800">
    <Grid>
        <Ellipse Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Margin="297,61,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
        <Button x:Name="TryClose" Content="閉じる" HorizontalAlignment="Left" Margin="253,279,0,0" VerticalAlignment="Top" Width="75"/>
        <Label Content="フロント画面" Background="LightGreen" HorizontalAlignment="Left" Margin="253,230,0,0" VerticalAlignment="Top"/>
    </Grid>
</UserControl>

（１５）実行すると、BaseView.xamlの画面が表示される。「フロント表示」ボタンと「閉じる」ボタンで、画面遷移する。

　　　　　「フロント表示」ボタンを押すと、FrontView.xamlの画面が表示される。
　　　　　「閉じる」ボタンを押すと、BaseView.xamlの画面に戻る。
　　　　　「フロント表示」ボタンを再び押すと、再度、
　　　　　FrontView.xamlが表示される。

これで、今回は終了です。

お付き合い、ありがとうございました。(^-^)