Kiosk 만들기 - Part2

Intro 화면 작업을 진행합니다.

1. Intro 화면의 기능

• 동영상 무한 반복 재생
• 클릭시 주문 시작 화면으로 이동

동영상 재생은 MediaElement 컨트롤을 이용합니다. 이 컨트롤에 대한 자세한 사항은 여기를 참고합니다.

동영상은 Microsoft sample 동영상을 사용했습니다.

 

KioskIntro.xaml

<MediaElement
    x:Name="IntroVideo"
    Margin="5"
    VerticalAlignment="Top">
    <MediaElement.Triggers>
        <EventTrigger RoutedEvent="MediaElement.Loaded">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <MediaTimeline
                            RepeatBehavior="Forever"
                            Source="https://mediaplatstorage1.blob.core.windows.net/windows-universal-samples-media/elephantsdream-clip-h264_sd-aac_eng-aac_spa-aac_eng_commentary.mp4"
                            Storyboard.TargetName="IntroVideo" />
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </MediaElement.Triggers>
    <b:Interaction.Triggers>
        <b:EventTrigger EventName="MouseDown">
            <b:InvokeCommandAction Command="{Binding MouseDownCommand}" />
        </b:EventTrigger>
    </b:Interaction.Triggers>
</MediaElement>

• EventTrigger를 이용해서 MediaElement가 Loaded될 때 Action을 실행하도록 설정했습니다.
• Storyboard를 만들었습니다.
• Storyboard에서만 사용할 수 있는 MediaTimeline을 이용해서 동영상을 반복적으로 재생하도록 만들었습니다.
• 반복 재생에 대한 자세한 사항은 여기를 참고하기 바랍니다.
• b:Interaction.Triggers와 EventTrigger를 이용해서 MouseDown 이벤트가 발생하면 InvokeCommandAction을 실행하도록 설정했습니다.
• b: 네임스페이스(xmlns:b="http://schemas.microsoft.com/xaml/behaviors")는 Microsoft.Xaml.Behaviors.Wpf nuget package가 설치되어 있어야지만 사용 가능합니다.

화면 하단에 Border를 추가하고 그 곳을 클릭해도 MouseDownCommand를 실행하도록 만들어 두었습니다.

 

ViewModelBase.cs

/// <summary>
/// 뷰모델 베이스, 바인드어블베이스, 네이게이션어웨어
/// </summary>
public abstract class ViewModelBase : BindableBase, INavigationAware
{
    /// <summary>
    /// 컨테이터 프로바이더
    /// </summary>
    protected IContainerProvider ContainerProvider;
    /// <summary>
    /// 리즌 메니저
    /// </summary>
    protected IRegionManager RegionManager;

    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;
        RegionManager = ContainerProvider.Resolve<IRegionManager>();
    }
    /// <summary>
    /// 네비게이션 되었을 때
    /// </summary>
    /// <param name="navigationContext"></param>
    public virtual void OnNavigatedTo(NavigationContext navigationContext)
    {
    }
    /// <summary>
    /// 네비게이션이 가능한지
    /// </summary>
    /// <param name="navigationContext"></param>
    /// <returns></returns>
    public virtual bool IsNavigationTarget(NavigationContext navigationContext)
    {
        return true;
    }
    /// <summary>
    /// 네비게이션 되기 전에
    /// </summary>
    /// <param name="navigationContext"></param>
    public virtual void OnNavigatedFrom(NavigationContext navigationContext)
    {
    }

}

 

• 모든 화면에서 RegionManager를 사용하기 때문에 ViewModelBase에 RegionManager를 주입했습니다.
• 뷰모델 내부에서 RegionManager을 사용할 수 있지만, 외부에서 사용할 수 없도록 protected로 만들었습니다.
• ContainerProvider 내부에 Prism 라이브러리에서 제공하는 기능이 들어가있기 때문에 IRegionManager를 이용해서 가져올 수 있습니다.
• INavigationAware를 추가해서 RegionManager.RequestNavigate()를 이용해서 네비게이션 시켰을 때 실행할 내용을 추가할 수 있도록 작업 했습니다.
• OnNavigatedTo, IsNavigationTarget, OnNavigatedFrom 메서드를 뷰모델에서 사용할 수 있도록 virtual 키워드를 추가했습니다.

 

KioskIntroViewModel.cs

/// <summary>
/// 키오스크 인트로 뷰모델
/// </summary>
public class KioskIntroViewModel : ViewModelBase
{
    /// <summary>
    /// 마우스 다운 커맨드
    /// </summary>
    public ICommand MouseDownCommand { get; set; }
    /// <summary>
    /// 기본 생성자
    /// </summary>
    public KioskIntroViewModel()
    {
    }
    /// <summary>
    /// 런타임 생성자
    /// </summary>
    /// <param name="containerProvider"></param>
    public KioskIntroViewModel(IContainerProvider containerProvider) : base(containerProvider)
    {
        Init();
    }

    private void Init()
    {
        MouseDownCommand = new DelegateCommand(OnMouseDown);
    }
    /// <summary>
    /// 마우스 다운 커맨드 실행
    /// </summary>
    private void OnMouseDown()
    {
        //OrderStart 화면으로 네비게이션
        RegionManager.RequestNavigate("KioskContentRegion", "OrderStart");
    }

    public override void OnNavigatedFrom(NavigationContext navigationContext)
    {
        //동영상 플레이 중지 혹은 작업 중지
    }
}

• MouseDownCommand Property를 하나 추가했습니다.
• Init()에서 MouseDownCommand를 DelegateCommand로 생성했습니다.
• OnMouseDown 메서드에서 RegionManager.RequestNavigate()를 이용해서 주문 시작 화면으로 이동 시킵니다.
• 동영상 재생이 xaml에서 자체적으로 동작하고 있기 때문에 OnNavigatedFrom에서 중지하는 코드를 추가하지 않았습니다. 

주문시작 화면 OrderStart.xaml과 OrderStartViewModel.cs는 다른 화면 만드는 방식으로 만들어서 추가하시면 됩니다.

2. 소스

GitHub - kaki104/PrismKiosk at Part2/add-kiosak-intro

GitHub - kaki104/PrismKiosk