내급여 UWP 앱 개발 part1

지난번 포스트에서 Windows Template Studio를 이용해서 앱 탬플릿을 간단하게 만들 수 있는 것을 확인 했습니다. 하지만.. 탬플릿은 템플릿일 뿐!! 진짜 만들어 봐야 응가인지 아닌지 알 수 있겠죠?

 

특히, 해당 템플릿을 사용하면 Telerik 컨트롤들을 사용할 수 있는데, 예전부터 Telerik에서 나온 컨트롤들을 이용해서 WPF, Silverlight 프로젝트를 진행했던 과거가 있어서, UWP에서는 어떤 컨트롤들이 있는지 궁금했습니다. 이번 기회에 궁금증도 풀겸 간단한 앱을 하나 만들어 보려고 합니다.

 

0. 참고 포스트

Windows Template Studio를 이용해서 UWP 앱 개발 시작하기

http://kaki104.tistory.com/546

 

기본 환경 및 Windows Template Studio에 대한 설명은 이 포스트를 참고하세요

 

 

1. 시작하기

 

화면은 크게 2개입니다. 하나는 근무 시간 입력화면이고 다른 하나는 설정 화면입니다.

 

근무 시간 입력화면에 사용될 컨트롤은 Telerik사의 RadDataGrid를 사용할 예정입니다.

RadDataGrid Overview

http://docs.telerik.com/windows-universal/controls/raddatagrid/overview

 

 

 

 

2. 프로젝트 만들기

 

비주얼스튜디오 2017을 실행 -> File -> New -> Project

 

Windows Template Studio (Universal Windows)를 선택 -> MyPay 입력 -> 폴더 선택 -> OK

 

 

Pivot and Tabs선택, MVVM Basic 선택 후 Next 클릭

 

 

Settings + 버튼을 눌러서 설정 화면 추가, Grid + 버튼 눌러서 그리드 추가 후 Create 버튼을 눌러서 프로젝트를 생성합니다.

 

 

생성된 프로젝트를 실행하고, Grid를 선택하면 아래와 같은 화면이 나옵니다.

이제 진짜로 손을 보면서 만들어 보겠습니다.

 

 

 

3. Main 삭제하기

 

Main 페이지는 아무런 내용이 없는 페이지이기 때문에 필요 없습니다. 삭제를 하도록 하겠습니다.

 

PivotPage.xaml을 선택한 후 PivotItem 중 MainPage가 있는 부분을 삭제 합니다.

 

MainPage.xaml을 선택한 후 Delete키를 눌러서 삭제 합니다.

 

 

다시 실행을 하면 Grid와 Settings만 보입니다.

 

 

 

4. RadDataGrid 디자인 타임에 발생하는 오류 처리

 

RadDataGrid를 선택하고 뭐좀 해볼려고 했더니, 바로 디자인 타임에 오류가 발생합니다. 찾아보니 Update를 해주면 해결이 되네요..

 

 

프로젝트를 선택하고 마우스 오른쪽 클릭해서 컨텍스트 메뉴를 출력하고 Manage NuGet Packages...를 선택합니다.

 

 

Telerik.UI.for.UniversalWindowsPlatform 선택 -> Versions에서 1.0.0.5를 선택하고 Update 버튼을 클릭해서 업데이트를 진행 합니다. 참고로 기존 버전은 1.0.0.4입니다.

 

설치가 완료된 후 비주얼스튜디오를 재시작하고 빌드를 하면 정상적으로 표시 됩니다.

 

 

 

5. 모델 만들기

 

Models 폴더에 WorkItem이라는 클래스를 생성합니다.

 

using System;
using MyPay.Helpers;

namespace MyPay.Models
{
    /// <summary>
    ///     근무 아이템, Observable은 프로퍼티 체인지 이벤트를 발생 시키기 위해서 상속받음
    /// </summary>
    public class WorkItem : Observable
    {
        private DateTime _basicWorkTime;
        private DateTime _overTime15;
        private DateTime _overTime20;
        private DateTime _overTime25;

        /// <summary>
        ///     아이디
        /// </summary>
        public int Id { get; set; }

        /// <summary>
        ///     근무일
        /// </summary>
        public DateTime WorkDay { get; set; }

        /// <summary>
        ///     휴일여부
        /// </summary>
        public bool Isholiday { get; set; }

        /// <summary>
        ///     시작시간
        /// </summary>
        public DateTime StartWork { get; set; }

        /// <summary>
        ///     종료시간
        /// </summary>
        public DateTime EndWork { get; set; }

        /// <summary>
        ///     기본 근무 시간 1.0
        /// </summary>
        public DateTime BasicWorkTime
        {
            get => _basicWorkTime;
            set => Set(ref _basicWorkTime, value);
        }

        /// <summary>
        ///     1.5 근무 시간
        /// </summary>
        public DateTime OverTime15
        {
            get => _overTime15;
            set => Set(ref _overTime15, value);
        }

        /// <summary>
        ///     2.0 근무 시간
        /// </summary>
        public DateTime OverTime20
        {
            get => _overTime20;
            set => Set(ref _overTime20, value);
        }

        /// <summary>
        ///     2.5 근무 시간
        /// </summary>
        public DateTime OverTime25
        {
            get => _overTime25;
            set => Set(ref _overTime25, value);
        }

        /// <summary>
        ///     총 근무 시간
        /// </summary>
        public DateTime TodayWorkTime { get; set; }
    }
}

 

 

 

오늘은 여기까지만 하겠습니당~ 너무 많이 하면 힘드니까요~ 하하;;