N'Story

WaitIndicator 적용방법

[ WaitIndicator.xaml ]

xmlns:dx="http://schemas.devexpress.com/winfx/2008/xaml/core" 
dx:ThemeManager.ThemeName="LightGray" >     //Wait 디자인 변경

    <dx:WaitIndicator Content="Loading..." DeferedVisibility="True">  
            <dx:WaitIndicator.ContentTemplate> 
                <DataTemplate> 
                    <StackPanel Orientation="Vertical"> 
                        <TextBlock FontSize="17" Text="잠시만 기다려주십시오." /> 
                        <TextBlock Text="{Binding}" /> 
                    </StackPanel> 
                </DataTemplate> 
            </dx:WaitIndicator.ContentTemplate> 
    </dx:WaitIndicator>

[ WaitIndicator.xaml.cs ]        추가부분

public static void ShowSplashScreen()

{

    if (!DevExpress.Xpf.Core.DXSplashScreen.IsActive)

    {

        DevExpress.Xpf.Core.DXSplashScreen.Show<WaitIndicator>();

    }

}

public static void CloseSplashScreen()

{

    if (DevExpress.Xpf.Core.DXSplashScreen.IsActive)

    {

        DevExpress.Xpf.Core.DXSplashScreen.Close();

    }

}

[ ButtonClick_Event ] 부분에 사용

WaitIndicator.ShowSplashScreen();

if (DevExpress.Xpf.Core.DXSplashScreen.IsActive)

{

        WaitIndicator.CloseSplashScreen();

 }

※정상적으로 작동되었는데 출력위치가 중앙이 아닐경우 WPF_UserControl이 아닌 윈폼으로 추가해야함.

WinForm으로 추가방법 : http://plzhoney.tistory.com/20?category=752079

버튼을 클릭했을때 또는 딜레이가 생기는 작업이 진행되고 있을때 마우스 커서의 모양을 다양하게 표시할 수 있습니다.

this.Cursor = Cursors.Arrow; // 기본 화살표 모양

this.Cursor = Cursors.Wait; // 모래시계 모양

this.Cursor = Cursors.Hand; // 손바닥 모양

this.Cursor = Cursors.Cross; // 십자선 모양

this.Cursor = Cursors.Help; // 물음표 모양

Button_Click_Event (버튼클릭 이벤트 새창열기)

버튼클릭시 새로운 창을 출력합니다.

[1]. 버튼클릭창을 생성해줍니다.

[2]. 버튼 속성창 확인하신 후 Click 부분을 더블클릭해서 이벤트를 생성합니다.

[3]. 클릭이벤트 소스를 추가합니다.

//버튼클릭 이벤트

  private void Button_Click_1(object sender, RoutedEventArgs e)

  {

      New_Window WinReport = new New_Window();  //New_Window(새로 만든 폼 이름)

      WinReport.WindowStartupLocation = WindowStartupLocation.CenterOwner;

      WinReport.ShowDialog();

  }

[4]. 빌드 후 버튼을 클릭해서 새로운 창이 정상적으로 출력되는지 확인합니다.

수고하셨습니다.

저번시간에는 임의의 컬럼값과 데이터를 추가했습니다.

이번에는 추가된 데이터에 아래 그림과 같이 Row Number(순번)을 추가해보겠습니다.

<dxg:GridColumn x:Name="RowNumber" FieldName="순번">
                        <dxg:GridColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding RowData.RowHandle.Value}"/>
                            </DataTemplate>
                        </dxg:GridColumn.CellTemplate>
                    </dxg:GridColumn>

이렇게 필드이름과 바인딩을 추가해주시면 간단하게 화면에 출력할 수 있습니다.

행이 고정이 되어있기 때문에 아래 그림과 같이 한줄한줄에 대한 데이터(0~MAX)에 대해 순번 위치변동이 없습니다!

<추가사항>  I do start from one

1부터 시작하고 싶으실수도 있고 다른 번호로 시작하게 만들고 싶은 분들도 계실거라고 생각합니다.

그럴경우 IValueConverter 인터페이스를 사용해야 합니다.

쉽게 이해할 수 있도록 아래 그림을 참고하십시오.

< XAML >

<Window.Resources>
        <local:MyConverter x:Key="converter"> </local:MyConverter>
</Window.Resources>

<dxg:GridColumn x:Name="RowNumber" FieldName="순번">
                        <dxg:GridColumn.CellTemplate>
                            <DataTemplate>
                                <TextBlock Text="{Binding RowData.RowHandle.Value, Converter={StaticResource converter}}"/>
                            </DataTemplate>
                        </dxg:GridColumn.CellTemplate>
                    </dxg:GridColumn>

<C#>

public IValueConverter Converter { get; set; }

public class MyConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return (int)value + 0;  //+1일경우 1부터 시작 

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return value;

        }

    }

value +1값을 리턴하게 되면 1부터 시작하게 됩니다. 

이렇게 출력이 된다면 정상적으로 성공입니다. 수고하셨습니다 ^^

WPF에서 DevExpress의 그리드 컨트롤을 생성하고 컬럼과 데이터를 추가해보겠습니다.

DevExpress란 간단하게 설명하자면 .NET 기반 컴포넌트 라이브러리중 하나입니다. 국내에서는 무겁기로 소문나있지만 사용하는 곳이 꽤 많습니다. 해외에서는 굉장히 많이 사용중이라고 합니다. 개인이 구입하기에는 가격이 많이 부담스러우실 수 있습니다. 여러가지 화려한 시각적인 효과와 다양한 툴을 제공합니다.

[1]. 먼저 프로젝트를 생성한 후 그리드 컨트롤을 하나 만들겠습니다.

   <dxg:GridControl AutoGenerateColumns="AddNew" EnableSmartColumnsGeneration="True" >

            <dxg:GridControl.View>

                <dxg:TableView AllowPerPixelScrolling="True" ShowTotalSummary="True"/>

            </dxg:GridControl.View>

        </dxg:GridControl>

[2]. Model 코드와 ViewModel코드를 작성합니다.

//Model 코드 작성

    public class Customer

    {

        public string Name { get; set; }

        public string Country { get; set; }

        public int Visits { get; set; }

        public DateTime? Birthday { get; set; }

        public static List<Customer> GetCustomers()

        {

            List<Customer> people = new List<Customer>();

            people.Add(new Customer() { Name = "홍길동", Country = "KOREA", Visits = 4, Birthday = new DateTime(1980, 1, 1) });

            people.Add(new Customer() { Name = "임꺽정", Country = "KOREA", Visits = 2, Birthday = new DateTime(1966, 4, 15) });

            people.Add(new Customer() { Name = "제이나", Country = "ALLIANCE", Visits = 6, Birthday = new DateTime(1982, 3, 11) });

            people.Add(new Customer() { Name = "헬스크림", Country = "HORDE", Visits = 11, Birthday = new DateTime(1977, 12, 5) });

            people.Add(new Customer() { Name = "란두인", Country = "ALLIANCE", Visits = 8, Birthday = new DateTime(1956, 9, 5) });

            people.Add(new Customer() { Name = "럭스", Country = "DEMACIA", Visits = 5, Birthday = new DateTime(1990, 2, 27) });

            people.Add(new Customer() { Name = "신드라", Country = "Ionia", Visits = 21, Birthday = new DateTime(1965, 5, 5) });

            people.Add(new Customer() { Name = "다리우스", Country = "Noxus", Visits = 8, Birthday = new DateTime(1987, 11, 9) });

            people.Add(new Customer() { Name = "소라카", Country = "Ionia", Visits = 1, Birthday = new DateTime(1949, 6, 18) });

            people.Add(new Customer() { Name = "자르반4세", Country = "DEMACIA", Visits = 3, Birthday = new DateTime(1989, 1, 8) });

            people.Add(new Customer() { Name = "아리", Country = "Ionia", Visits = 4, Birthday = new DateTime(1972, 9, 14) });

            people.Add(new Customer() { Name = "뽀삐", Country = "DEMACIA", Visits = 6, Birthday = new DateTime(1989, 5, 7) });

            people.Add(new Customer() { Name = "드레이븐", Country = "Noxus", Visits = 19, Birthday = new DateTime(1971, 10, 3) });

            return people;

        }

    }

    //ViewModel 코드 작성

    public class MainWindowViewModel

    {

        public MainWindowViewModel()

        {

            this.Customers = Customer.GetCustomers();

        }

        public List<Customer> Customers { get; set; }

    }

[3]. DataContext를 연결해줍니다.

[4].그리드컨트롤에 ItemSource로 가서 아까 연결했던 DataContext를 연결해줍니다.

[5]. 마지막으로 정상적으로 출력되는지 결과를 확인합니다.

성공입니다~!   수고하셨습니다!

소프트웨어 공학에서 어플리케이션을 구성하는 여러 디자인 패턴들이 있습니다.

1. MVC(Model-View-Controller) 2. MVP(Model-View-Presenter) 3.MVVM(Mdoel-View-ViewModel)

모두 모델과 뷰 사이의 관계를 어떻게 처리할지를 고민한 결과로 나온 해결책입니다.

무엇인가 개발한다 함은 간단하게 이야기 하자면 데이터를 UI에 연결하는 일을 하는 것입니다.

대충 연결해 놓으면 원본 데이터의 구조 일부나 화면 일부가 변경된다거나 할때 데이터와 UI 상호 연관된 부분 때문에

수정이 어려워집니다. 데이터 일부만 다르고 같은 유사한 UI를 쓰는 화면이나, 원본 데이터는 같은데 UI만 다른식으로

표현해야 하는 경우에도 전부 다시 개발하거나 수정해야 할 가능성이 높아집니다.

그래서 UI(View)와 데이터(Model)를 어떻게든 분리하려고 합니다. 상호연계해야하기 때문에 일단 분리 후 어떤식으로든 연계할 것입니다.

이 연계방식이 어떠냐에 따라 MVC, MVP, MVVM으로 나뉘게됩니다.

각 디자인 패턴들에 대해 설명하기 전에 각각의 용어들에 대한 설명을 하겠습니다.

-Model-

- 데이터를 가지고 있는 객체입니다.

만약 View에서 어떤 데이터를 요청하면, 그에 해당하는 데이터를 컨트롤러를 통해 전달하며, 

데이터의 변동이 일어나면, 변동된 데이터로 갱신을 당하는 역할을 합니다.

-View-

- 사용자가 볼 화면 즉 프론트엔드 단으로 보면 될것입니다.

DB에서 추출한 데이터를 가지고 출력해주거나, 사용자의 입력을 받는 부분입니다.

-Controller-

- View와 Model을 조율하는 조율자 같은 역할이라고 보면됩니다.

Model의 데이터를 추가 및 삭제가 가능하며, 모델에 존재하는 데이터를 View 보내는 등 중간 매게체 역할을 합니다.

1. MVC(Model-View-Controller)

- 프론트엔드 부분과 백엔드 부분을 구분하여 개발하는 방식을 말합니다.

따라서 서로의 영향을 받지 않고 수정이 가능하며, 그 외에도 유지보수에 탁월하게 작용합니다. 

2. MVP(Model-View-Presenter)

- 이 디자인패턴의 핵심은 사용자인터페이스(View)와 비지니스 로직(Model)을 분리하고, 서로간의 상호작용을 다른 객체(Presenter)에 위임해 서로의 영향을 최소화 하는것에 있습니다. 이 패턴을 이용해서 Model과 View간의 결합도를 낮추면, 새로운 기능을 추가하거나 변경할 필요가 있을때 관련된 부분만 수정하면 되기 때문에 확장성이 좋아지며, 테스트코드를 작성하기 편리해지기 때문에 더 안전한 코드 작업이 가능해집니다. 

3. MVVM(Model-View-ViewModel)

- 화면(View)은 자기가 표현하고자 하는 속성값을 가지고 있는 ViewModel을 불러들여 UI에 출력합니다. ViewModel은 특정한 Data조회 모듈을 이용해 필요로 하는 자신의 속성값을 채웁니다. Model은 Data를 조회하는 부분을 담당하거나, Data를 조회해서 특정Model 또는 ViewModel를 만듭니다. 

예를 들어보겠습니다.

주소를 서울에서 인천으로 수정해봅시다.

텍스트박스에서 수정하고 저장을 누르면 인천으로 저장되어야 합니다. UI에서 저장을 누르면 UI는 변경된 텍스트값을 알고 있습니다. 

하지만 현재까지 vm이나 m(data처리객체)은 변경된 값을 모릅니다. 이런경우 MVC에서는 컨트롤러가 이미 뷰와 모델을 모두 참조로 가지고 있기 때문에 컨트롤러에서 텍스트받스의 값을 직접 m으로 넘겨줘서 저장하도록 합니다. 

컨트롤러에는 string addr = v.text주소; m.save(addr); 이런식의 코드가 존재하게 됩니다. 

만약 view가 변경되어서 텍스트박스의 이름이 바뀌거나 없어지면 어떻게 될까요?

컨트롤러 내부 코드중 v.text주소 라는 부분이 명시적으로 view에 의존하기 때문에 문제가 발생합니다.

mvvm패턴에서는 vm이 view에 의존하지 않고, view에서는 어차피 주소 출력하려면 vm을 접근해야한, 주소변경시에도 view가 직접 vm의 속성인 주소값을 변경해 주고 vm은 그저 자신의 속성 "주소"의 값을 m.save(this.주소); 이런식으로 처리하면 됩니다.

wpf로 개발할 경우 vm이 view에 의존하지 않고 서로 정보를 교환할 수 있도록 Data Binding 이나 Command Binding등의 기능을 기본적으로 제공합니다. wpf에서는 view와 viewmodel의 관계 설정을 위해 다른 코드를 할 필요없이 아래와 같이 데이터바인딩을 이용합니다

<TextBox Text = "{Binding 주소}"> 이 코드면 view에서 데이터를 출력하거나 수정하기 위한 모든 처리가 끝입니다.

WPF(Window Presentation Foundation)

- 위키백과 정의에 따르면 WPF는 윈도우기반 응용프로그램에서 사용자 인터페이스를 표시하기 위한 목적으로 마이크로소프트에서 만든 그래픽 서브시스템이라고 합니다. 과거 아발론(Avalon)이라는 코드명으로 불렸으며 최초의 닷네 프레임워크3.0의 일부분으로 발표되었습니다. 그리고 기존의 그래픽 장치 인터페이스 대신 DirectX를 사용합니다. WPF는 다양한 인터페이스 요소들을 정의하고 연결하기 위해 XML기반의 언어인 XAML을 채용하였습니다. WPF응용프로그램은 데스크탑에서 단독으로 실행될 수도 있고 웹사이트에 내장된 객체로 서비스될 수도 있습니다. WPF는 2D/3D 렌더링, 고정 및 가변무서, 타이포그래피, 벡터그래픽스, 실시간 애니메이션, 프리렌더링 미디어와 같은 여러가지 보편적인 사용자 인터페이스들을 통합하는 것을 목적으로 합니다. 이러한 요소들은 다양한 이벤트, 사용자 인터랙션, 그리고 데이터 바인딩에 기반하여 연결 및 처리될 수 있습니다.

간단히 정리해보자면

WPF의 장점은

- 여러 윈도우즈 어플리케이션들이 WPF로 개발되고 있다. 

- XMAL사용으로 디자이너와 개발자(C#)소통과 구분역할이 이전에 비해 쉬워졌다

- 하드웨어 가속(DirectX)이 지원된다.

- 윈도우즈어플리케이션뿐만 아니라 웹어플리케이션도 지원한다.