Prism으로 시작하는 UWP app Part8 - Prism 화면 레이어와 Popup

Windows App(Universal App)/Beginner 2019. 4. 1. 22:14

* Prism 앱의 레이어에 대해 설명합니다.


. 재정의 불가능 영역 : Popup, ContentDialog, MediaElement
. 재정의 가능 영역 : 일반 Page
. 기타 영역 : MessageDialog

 

 

 

* 소스 : https://github.com/kaki104/PrismSample

저작자표시비영리변경금지

'Windows App(Universal App) > Beginner' 카테고리의 다른 글

Prism으로 시작하는 UWP app Part10 - WebView에서 JavaScript 연동  (0) 2019.05.26
Prism으로 시작하는 UWP app Part9 - VS2019 Upgrade & WebView  (0) 2019.05.22
Prism으로 시작하는 UWP app Part8 - Prism 화면 레이어와 Popup  (0) 2019.04.01
Prism으로 시작하는 UWP app Part7 - 검색과 CommandBar 구현  (0) 2019.03.25
Prism으로 시작하는 UWP app Part6 - 상세 페이지 구현  (0) 2019.03.20
Prism으로 시작하는 UWP app Part5 - View에서 ViewModel로 사용자 인터렉션 연결하기  (0) 2019.03.14
블로그 이미지

kaki104

This blog covers the latest technologies in Microsoft .Net. In 2020, I will be talking about Uno Platform frequently. http://youtube.com/FutureOfDotNet https://twitter.com/kaki104

Tag MVVM, popup, PRISM, UWP, Windows Template Studio, XAML
트랙백 0개, 댓글 0개가 달렸습니다

댓글을 달아 주세요

계산기 앱 셈플입니다.

Windows App(Universal App)/Beginner 2018. 8. 21. 22:00

페이스북 그룹에 올려주신 문의 내용에 맞는 셈플을 만들어 보았습니다.
https://www.facebook.com/groups/w10app 



Q. 안녕하세요.
숫자 키패드에 마우스 클릭이나 키보드 둘 다 입력이 가능하도록 mvvm을 사용하여 구현하고 싶습니다.
기존 event-driven에서는 두 개의 event를 구현해서 button에 연결하면 되었는데,이를 mvvm으로 하려니 문제가 생겼네요.
제가 알기로는 mvvm하에서는 xaml상에서 버튼 컨트롤에 command로 연결해줘야 하는 것으로 알고 있습니다. 즉 버튼 컨트롤에 하나의 이벤트만 커맨드로 처리할 수 있다고 저는 알고 있는데, 이러면 이벤트 두 개 중 하나만 구현 가능한 건가요?
mvvm하에서도 event-driven과 같이 마우스 클릭이나 키보드 둘 다 사용 가능하게 구현하고 싶은데, 이를 어떻게 구현해야 하나요?



A. 버튼에 단축키를 설정하면 간단하게 해결하실 수 있습니다.


참고

https://docs.microsoft.com/en-us/windows/uwp/design/input/keyboard-accelerators


                <!--숫자 키패드는 키를 추가해줘야 합니다.-->
                <Button Grid.Column="0" Grid.Row="0" Content="1"
                        Command="{Binding InputCommand}" CommandParameter="1">
                    <Button.KeyboardAccelerators>
                        <KeyboardAccelerator Key="Number1" />
                    </Button.KeyboardAccelerators>
                </Button>


1버튼에 숫자키1를 단축키로 설정하고, InputCommand를 실행 합니다. 실행할 때 CommandParameter로 1을 넘겨 줍니다.



        private void Init()
        {
            InputNumbers = "0";
            InputCommand = new RelayCommand<object>(ExecuteInputCommand);
        }

        /// <summary>
        ///     인풋 커맨드 실행
        /// </summary>
        /// <param name="obj"></param>
        private void ExecuteInputCommand(object obj)
        {
            if (!(obj is string number)) return;

            
            var num = int.Parse(InputNumbers.Replace(",", ""));

            //backspace키는 shell에서 사용하고 있기 때문에 사용이 않되는 듯..
            switch (number)
            {
                case "*":
                    break;
                case "B":
                    num = num.ToString().Length == 1
                        ? 0
                        : int.Parse(num.ToString().Substring(0, num.ToString().Length - 1));
                    break;
                default:
                    num = int.Parse(num + number);
                    break;
            }

            InputNumbers = string.Format("{0:N0}", num);
        }


InputNumbers라는 프로퍼티에 숫자를 string.Format을 이용해서 변환을 해서 집어 넣습니다.


그러면 3자리마다 컴마가 입력됩니다. 숫자 FormatString에 대한 자세한 사항은 검색을 이용하면 쉽게 찾으실 수 있습니다.


BackSpace키는 쉘에서 네비게이션 Back을 하는 키로 사용되고 있어서 B키를 하나 지우는 키로 사용했습니다. 


Windows Tempalte Studio를 이용해서 만든 앱이 아니라면, 사용이 가능할 것이라고 생각됩니다.


자세한 내용은 소스를 참고하세요


깃허브 소스

https://github.com/kaki104/BasicSamples


저작자표시비영리변경금지

'Windows App(Universal App) > Beginner' 카테고리의 다른 글

Prism으로 시작하는 UWP app 개발 part1  (0) 2019.02.28
Windows 10 for ARM Install Lumia 950/XL  (0) 2019.01.30
계산기 앱 셈플입니다.  (4) 2018.08.21
검색 버튼을 눌렀을 때 택스트 박스 표시하기  (2) 2018.08.06
Azure App Service를 이용해서 NAS의 MySQL 연결하기  (0) 2018.07.11
NAS에 Database 설치를?  (0) 2018.06.30
블로그 이미지

kaki104

This blog covers the latest technologies in Microsoft .Net. In 2020, I will be talking about Uno Platform frequently. http://youtube.com/FutureOfDotNet https://twitter.com/kaki104

Tag KeyboardAccelerators, MVVM, UWP
트랙백 0개, 댓글 4개가 달렸습니다

댓글을 달아 주세요

  • 페북에 질문 올렸던 사람입니다. 2018.08.24 18:36  댓글주소  수정/삭제  댓글쓰기

    안녕하세요.

    페북에 해당 질문 올렸던 사람입니다. 답변 감사드립니다.
    질문 하나만 더 드리겠습니다. BackSpace키 구현 문제인데요. Windows 10에 번들로 달려나온 계산기 앱에서는 BackSpace 키가 사용이 가능하던데 이건 어떻게 구현한 걸까요?

  • kaki104 2018.08.24 19:10 신고  댓글주소  수정/삭제  댓글쓰기

    계산기 앱을 화면 하나 짜리 기본 템플릿으로 만들면 사용이 가능하지 않을까 생각됩니다.
    화이팅

    • 페북에 질문 올렸던 사람입니다. 2018.09.03 12:26  댓글주소  수정/삭제

      질문 하나 더 드릴께요. (자꾸 질문만 해서 죄송합니다)

      올려주신 샘플의 UI를 수정해서 해 보려고 command 와 command parameter를 수정해서 돌려보니 아예 키나 마우스 둘 다 먹지를 않네요. XAML에서 텍스트블록에도 바인딩은 다 했고요. 뭐가 잘못된 건지 모르겠네요...

  • kaki104 2018.09.03 20:03 신고  댓글주소  수정/삭제  댓글쓰기

    소스를 올려주셔야 왜 않되는지 확인이 가능할 것 같습니다.

글 보관함

달력

«   2020/12   »
일 월 화 수 목 금 토
    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    

티스토리툴바