티스토리 뷰
반응형
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
반응형
'WPF .NET' 카테고리의 다른 글
Kiosk 만들기 - Part3 (0) | 2023.10.20 |
---|---|
Prism - ContentControl에 화면 생성해서 넣기 1/2 (2) | 2023.10.19 |
Kiosk 만들기 - Part1 (0) | 2023.10.16 |
Kiosk 만들기 - Part0 (0) | 2023.10.13 |
CommunityToolkit.Mvvm Login 페이지 추가하고 사용 (0) | 2023.07.24 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- kiosk
- Behavior
- .net 5.0
- XAML
- #uwp
- .net
- #Windows Template Studio
- Always Encrypted
- Visual Studio 2022
- #prism
- C#
- #MVVM
- Bot Framework
- dotNETconf
- ef core
- uno-platform
- Microsoft
- PRISM
- MVVM
- WPF
- Build 2016
- IOT
- LINQ
- UWP
- ComboBox
- windows 11
- visual studio 2019
- Windows 10
- uno platform
- Cross-platform
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
글 보관함