Kiosk 만들기 - Part1

1. 메인 화면 구성

아래 이미지와 같이 1개의 Window를 2개의 영역으로 분할해서 사용 합니다.

Kiosk 개발을 할 때 대부분 이렇게 1개의 윈도우에 화면을 분할해서 왼쪽 영역은 고객이 사용하고, 오른쪽 영역은 관리자가 사용 한다고 합니다.

 

최종 실행 화면

MainWindow.xaml

<Window
    x:Class="PrismKiosk.Views.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:prism="http://prismlibrary.com/"
    Title="{Binding Title}"
    Width="1920"
    Height="1080"
    prism:ViewModelLocator.AutoWireViewModel="True">
    <Grid>
        <Grid.ColumnDefinitions>
            <!--  키오스크 화면 영역  -->
            <ColumnDefinition Width="640" />
            <!--  간격  -->
            <ColumnDefinition Width="10" />
            <!--  관리자 화면 영역  -->
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <ContentControl prism:RegionManager.RegionName="KioskContentRegion" />
        <ContentControl Grid.Column="2" prism:RegionManager.RegionName="ManagerContentRegion" />
    </Grid>
</Window>

Prism의 Region을 이용해서 1개의 화면을 2개로 분리하도록 만들었습니다.

Region에 대한 자세한 설명은 여기를 참고하시기 바랍니다.

2. KioskContentRegion 영역에 출력할 Intro 화면 생성 및 연결

• Views 폴더 아래 KioskIntro라는 이름의 UserControl을 추가 합니다.
• ViewModels 폴더에 KioskIntroViewModel이라는 이름의 클래스를 추가합니다.

KioskIntro.xaml

<UserControl
    x:Class="PrismKiosk.Views.KioskIntro"
    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:local="clr-namespace:PrismKiosk.Views"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:prism="http://prismlibrary.com/"
    d:DesignHeight="450"
    d:DesignWidth="800"
    prism:ViewModelLocator.AutoWireViewModel="True"
    mc:Ignorable="d">
    <Grid>
        <TextBlock
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            FontSize="30"
            Text="Intro" />
    </Grid>
</UserControl>

이렇게 수정합니다.

prism:ViewModelLocator.AutoWireViewModel="True" 
KioskIntro라는 화면이 생성되면 자동으로 ViewModels 폴더아래에 있는 KioskIntroViewModel을 생성해서 DataContext에 입력합니다.

 

ViewModelBase.cs

모든 뷰모델에서 사용하는 공통 프로퍼티나 커맨드들을 가지는 뷰모델베이스를 하나 만들어 줍니다.

/// <summary>
/// 뷰모델 베이스
/// </summary>
public abstract class ViewModelBase : BindableBase
{
    /// <summary>
    /// 컨테이터 프로바이더
    /// </summary>
    protected IContainerProvider ContainerProvider;

    private bool _isBusy;
    /// <summary>
    /// IsBusy
    /// </summary>
    public bool IsBusy
    {
        get { return _isBusy; }
        set { SetProperty(ref _isBusy, value); }
    }
    /// <summary>
    /// 기본 생성자
    /// </summary>
    public ViewModelBase()
    {
    }
    /// <summary>
    /// 런타임 생성자
    /// </summary>
    /// <param name="containerProvider"></param>
    public ViewModelBase(IContainerProvider containerProvider)
    {
        ContainerProvider = containerProvider;
    }
}

Prism 최신 버전은 생성자 주입(Constructor Injection)만 지원하고 있습니다.

즉, Container에서 ViewModel이 생성이될 때 containerProvider를 주입해서 생성하게 됩니다. 주입된 containerProvider는 상송받은 뷰모델에서 접근할 수 있도록 protected field를 만들어서 연결합니다.

생성자에서 주입된 항목들은 readonly 속성을 추가해서 사용하면 좋습니다.
protected readonly IContainerProvider ContainerProvider;

 

KioskIntroViewModel.cs

ViewModelBase만 상속받은 간단한 뷰모델을 생성합니다.

/// <summary>
/// 키오스크 인트로 뷰모델
/// </summary>
public class KioskIntroViewModel : ViewModelBase
{
    public KioskIntroViewModel()
    {
        
    }
    public KioskIntroViewModel(IContainerProvider containerProvider) : base(containerProvider)
    {
    }
}

2. Type등록

KioskIntro라는 화면은 KioskContentRegion 이라는 곳에 Navigate가 되어야 합니다. 이렇게 Navigate가 되어야하는 화면은 미리 등록을 해야합니다.

App.xaml.cs

protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    //RegionNavigation을 사용할 화면을 등록
    containerRegistry.RegisterForNavigation<KioskIntro>();
}

3. RegionNavigate

앱이 시작되면 MainWindow가 가장 먼저 인스턴스되서 실행됩니다.

MainWindow는 인스턴스된 후에 다른 동작이 없기 때문에, 런타임 생성자에서 각 Region마다 시작 화면을 지정합니다.

 

MainWindowViewModel.cs

/// <summary>
/// 런타임 생성자
/// </summary>
/// <param name="containerProvider"></param>
public MainWindowViewModel(IContainerProvider containerProvider) : base(containerProvider)
{
    var regionManager = ContainerProvider.Resolve<IRegionManager>();
    //2개의 리즌에 시작할 화면 지정
    regionManager.RegisterViewWithRegion("KioskContentRegion", "KioskIntro");
}

이렇게하고 실행하면 MainWindow 왼쪽에 Intro 라는 글씨가 뜨는 것을 볼 수 있습니다.

위에서 작업한 대로 ManagerLogin 화면을 만들면 됩니다. 

작업을 완료하신 후 실행하면 맨 처음 이미지와 동일한 화면을 보실 수 있습니다.

4. 소스

GitHub - kaki104/PrismKiosk at Part1/init-default-settings

GitHub - kaki104/PrismKiosk