계산기 앱 셈플입니다.
페이스북 그룹에 올려주신 문의 내용에 맞는 셈플을 만들어 보았습니다.
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 |