내급여 UWP 앱 개발 part2

내급여 UWP 앱 개발

Part1

Part2

Part3

Part4

 

지난 Part1에 이어서 바로 시작을 하도록 하겠습니다.

 

 

0. 모델에 변경사항이 있습니다.

 

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

        /// <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 => _todayWorkTime;
            set => Set(ref _todayWorkTime, value);
        }

        /// <summary>
        ///     비고
        /// </summary>
        public string Description
        {
            get => _description;
            set => Set(ref _description, value);
        }
    }

 

 

1. 디자인 타임에 사용할 데이터 생성

 

xaml 의 장점은 디자인 타임에 디자인과 데이터를 함께 볼 수 있다는 점입니다. 그렇게 디자인 타임에 데이터를 보기 위해서는 디자인 타임 데이터를 추가해 주어야 합니다.

 

GridViewModel을 수정합니다. 기본 생성자를 추가한 후 디자인 타임 데이터를 생성해서 Works에 집어 넣습니다.

빌드!!를 꼭 하고 GridPage.xaml에 있는 RadDataGrid와 연결 합니다.

 

    /// <summary>
    /// 그리드 뷰모델
    /// </summary>
    public class GridViewModel : Observable
    {
        private IList<WorkItem> _works;

        /// <summary>
        ///     기본 생성자
        /// </summary>
        public GridViewModel()
        {

            //디자인 타임 데이터 생성
            Works = new List<WorkItem>
            {
                new WorkItem
                {
                    Id = 1,
                    WorkDay = DateTime.Parse("2017-08-23"),
                    StartWork = DateTime.Parse("08:00"),
                    EndWork = DateTime.Parse("19:00"),
                    IsHoliday = true,
                    Description = "test"
                },
                new WorkItem
                {
                    Id = 2,
                    WorkDay = DateTime.Parse("2017-08-24"),
                    StartWork = DateTime.Parse("08:00"),
                    EndWork = DateTime.Parse("19:00"),
                    Description = "what?"
                },
            };

        }
        /// <summary>
        /// 근무 목록
        /// </summary>
        public IList<WorkItem> Works
        {
            get => _works;
            set => Set(ref _works, value);
        }
    }

 

 

2. GridPage.xaml에 디자인 타임 데이터 보이도록 연결

 

바로 연결을 할려고 했는데..일단 코드 비하인드에 필요없는 코드를 제거 하고 정리 합니다.

 

GridPage.xaml.cs

 

    /// <summary>
    ///     그리드 페이지
    /// </summary>
    public sealed partial class GridPage : Page
    {
        public GridPage()
        {
            InitializeComponent();
        }

        /// <summary>
        ///     뷰모델
        /// </summary>
        public GridViewModel ViewModel => DataContext as GridViewModel;
    }

 

그냥 코드를 입력해도 동작은 하지만..그렇게 코드로 입력할려면 뭐하러 비주얼스튜디오를 사용하겠습니까? 툴은 이용하라고 있는 것!!

 

가장 먼저 할 작업은 ViewModel을 DataContext에 집어 넣는 것 입니다. 

 

하나씩 따라해 보시죠

 

페이지를 선택합니다. -> 프로퍼티창에서 DataContext를 찾고 -> New 버튼 클릭 -> Select Object에서 gridview로 검색 -> GridViewModel 선택 -> OK

 

 

위의 작업을 하면 아래와 같은 코드가 추가 됩니다.

 

<Page
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:tg="using:Telerik.UI.Xaml.Controls.Grid"
    xmlns:ViewModels="using:MyPay.ViewModels"
    x:Class="MyPay.Views.GridPage"
    mc:Ignorable="d">

    <Page.DataContext>
        <ViewModels:GridViewModel/>
    </Page.DataContext>

...

 

뷰모델에 만들어 놓은 Works를 RadDataGrid에 연결 합니다.

 

RadDataGrid를 선택 -> ItemsSource 프로퍼티를 찾고 -> 오른쪽 네모 클릭 -> Create Data Binding... 선택 -> 그림 처럼 나오면 DataContext와 뷰모델이 잘 연결된 것이고, 그렇치 않으면 연결을 다시 해주시면 됩니다. 여하튼! Works를 선택하고 OK를 누릅니다.

 

 

xaml 코드는 아래와 같이 변합니다. 물론 그냥 손으로 쓰셔도 됩니다만.....같이 해야 가치가 있다는..... 쿨럭;;;;

 

        <Grid
            Grid.Row="1"
            Background="{ThemeResource SystemControlPageBackgroundChromeLowBrush}">
            <tg:RadDataGrid ColumnDataOperationsMode="Flyout" x:Name="grid"
                            ItemsSource="{Binding Works}" />
        </Grid>

 

아까 만들어 놓은 디자인 타임 데이터가 보이고 있습니다~ 짜잔~

 

아래처럼 깔끔하게 보이게 하려면 먼저 디자인 타임 해상도를 선택합니다. 저는 12인치 테블릿 화면으로 변경했구요 가로 방향을 선택했습니다. 또한, 확대 비율을 100%로 놓았습니다.

 

 

 

3. 각 컬럼 형태 및 바인딩 하기

 

지금은 WorkItem의 형태대로 각 컬럼이 만들어져서 자동으로 연결되었습니다. 그런데, 실제로 사용하려면 각 컬럼마다 화면에 보이는 형태라든지 입력 방법등을 지정할 수 있어야겠지요?

 

제일 먼저!

 

RadDataGrid를 선택하고 프로퍼티창에서 AutoGenerateColumns 프로퍼티를 찾아 보시면 체크가 되어있을 것입니다. 그 프로퍼티 때문에 바인딩이 되면 자동으로 컬럼을 생성하게 되는 것이니 체크를 해제하겠습니다.

 

 

Part1에서 보면 화면에 첫번째 컬럼은 근무일자였습니다. 그러니 첫번째 컬럼은 날짜 형태로 지정하면 되겠네요.

RadDataGrid를 선택하고 Columns 프로퍼티를 찾고 오른쪽에 ...버튼을 클릭하세요 -> 팝업이 하나뜨는데 거기서 하단부에 콤보박스를 선택해서 Other type...을 선택하시면 Select Object라는 팝업이 출력됩니다.

여기서 컬럼의 타입을 지정할 수 있습니다. DataGridDateColumn을 선택하고, OK를 클릭합니다.

 

 

그러면 이전 팝업으로 돌아오는데 여기서 Add 버튼을 눌러서 DataGridDataColumn을 추가합니다. 추가를 하고 CellContentFormat에 {0:d}라고 입력, Header에 근무일자, PropertyName에 WorkDay라고 입력을 하고 OK를 클릭합니다.

 

컬럼이 추가되자마자 바로 데이터가 보이면 좋은데 아쉽게도 빌드를 한번 해주어야 보입니다. 빌드를 살짝 한번 눌러주세요

 

 

이쯤하고 실행을 한번 해보겠습니다.

음..날짜는 나오는데..헤더에 한글이 나오지 않습니다.;; 이힝..지금 한글 나오지 않는 것 때문에 한시간 가량 삽질을 했는데.. 해결이 되지 않아..이슈로 등록해 놓았습니다. 뭐라고 이야기를 해주겠죠;; 일단은 영문으로 갑니다.

 

 

위의 방법으로 몇개의 컬럼을 더 추가해 보겠습니다. 방법은 동일하며, bool형태와 택스트 형태를 추가합니다.

 

            <tg:RadDataGrid ColumnDataOperationsMode="Flyout" x:Name="grid"
                            ItemsSource="{Binding Works}" AutoGenerateColumns="False">
                <tg:RadDataGrid.Columns>
                    <tg:DataGridDateColumn PropertyName="WorkDay" Header="Work Day" CellContentFormat="{}{0:d}" />
                    <tg:DataGridBooleanColumn Header="Holiday" PropertyName="IsHoliday" />
                    <tg:DataGridTextColumn Header="Description" PropertyName="Description" />
                </tg:RadDataGrid.Columns>
            </tg:RadDataGrid>

 

실행을 해보니 이렇게 나옵니다~

 

 

 

시간이 늦어서 오늘은 이만하도록 하겠습니다. 다음에 봐용