티스토리 툴바

Daum
Tistory
로그인

【Rising Force】

데이터 바인딩의 이해

2012/01/04 14:37 : 【Develope】/【Silverlight】

실버라이트의 데이터 바인딩은 XAML 파일의 컨트롤과 비하인드 파일의 로직을 연결하는 역할을 한다.

덕분에 XAML 의 컨트롤과 비하인드의 로직이 분리되어 협업이 수월해진다.

풀어 쓰자면 디자이너가 XAML의 컨트롤에 이름을 지정하면 개발자는 비하인드 파일의 로직에서

그 이름을 이용해 컨트롤에 접근하고 값을 넣는다. 이렇게 되면 디자이너는 고정된 컨트롤의 이름을

사용해야 하고 개발자는 값이 변경될 때 마다 컨트롤에 접근해 값을 변경해야 한다.

하지만, 데이터 바인딩을 이용하면 컨트롤에 지정된 이름을 부여하지 않아도 되고,

컨트롤의 값이 변경될 때마다 일일이 값을 변경하지 않아도 된다. 데이터 바인딩이 컨트롤과 로직을

연결해 주기 때문이다.

 

 

 

 

 

보통 XAML의 컨트롤의 바인딩 타겟이라 하고 클래스는 바인딩 소스라 한다.

코드에서 살펴보자.

MainPage.xaml 의 내용

Mainpage.xaml 의 25~27라인을 살펴보면 TextBlock 컨트롤의 Text 프로퍼티에 바인딩이 설정되어 있다.

이와 같이 작성한 것을 데이터 바인딩 마크업 확장식이라 한다.

형식은 <컨트롤명 프로퍼티명="{Binding 클래스 프로퍼티명}"/> 형식이며, 프로퍼티명에는 반드시 의존속성이 와야 한다.

바인딩 소스의 속성은 상관이 없지만 바인딩 타겟의 속성은 반드시 의존 속성이어야 한다.

 

UserModel.cs 의 내용

 

UserModel.cs에서 사용자 정보를 나타내는 클래스를 작성하였다.

UserModel 클래스의 프로퍼티 구성이다.

 

UserDataGenerator.cs 의 내용

UserDataGenerator.cs 에서는 유저 정보를 표현하는 클래스를 작성하였다. 일반적으로 DB에서 정보를

가져오게 되지만 간단히 컬렉션 타입으로 정의하였다.

간단히 살펴보면 21라인에서 유저 정보를 담기위해 리스트를 초기화하고, 23라인에서 UserModel클래스 인스턴스를 생성한다.

userModel 객체의 프로퍼티에 값을 할당하는게 24~26라인이다. 27라인에서 리스트에 userModel 객체를 추가해주고 있다.

40라인까지 3개의 유저 데이터를 리스트에 추가한다.

43~49라인에서 GetUserData()라는 메서드를 통해 랜덤으로 유저 정보를 가져온다.

 

MainPage.xaml.cs 의 내용

MainPage.xaml.cs 에서는 유저 정보를 화면에 뿌려주는 코드를 작성하였다.

17라인에서 UserDataGenerator 클래스 인스턴스를 생성하고 23라인에서 가져오기 버튼의 클릭 이벤트 핸들러를

설정했다. 26~31라인까지 클릭 이벤트 핸들러를 구현한다.

31라인이 데이터 바인딩 엔진에 의해 newModel 객체의 프로퍼티가 TextBlock 의 프로퍼티에 바인딩 되는 것이다.

그림으로 보면 아래와 같다고 볼수 있다.

 

 

 

 

 

 

위의 소스에서 this.DataContext = newModel; 이부분이 UserModel 클래스의

각 프로퍼티 값들을 UserControl 의 DataContext로 넘기는 것이다. 그러면 데이터 바인딩 엔진에 의해 UserControl의

하위 컨트롤부터 DataContext속성을 뒤져 값을 할당하게 된다.

 

  • 실버라이트 3 학습중

'【Develope】 > 【Silverlight】' 카테고리의 다른 글

데이터 바인딩의 이해  (0) 2012/01/04
Trigger & Action  (0) 2011/12/07
이벤트 핸들러 작성  (0) 2011/12/06
실버라이트 기반 ArcGIS app. 개발시 만나는 error  (0) 2010/10/15
Posted by RisingForce NO TRACKBACK NO COMMENT

Trigger & Action

2011/12/07 11:25 : 【Develope】/【Silverlight】
Trigger와 Action은 코드비하인드에서의 코딩없이 XAML에서의 작성만으로 이벤트 처리가 가능하다
디자이너가 개발자 도움없이 이벤트를 사용할 수 있다
 
* Trigger와 Action을 사용위한 XAML 파일 
 
<UserControl x:Class="EventTrigger.MainPage"
    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:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:ic="clr-namespace:Microsoft.Expression.Interactivity.Core;assembly=Microsoft.Expression.Interactions"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Canvas x:Name="LayoutRoot" Background="White">
        <Button Content="click" x:Name="button" Width="100" Height="30" Canvas.Left="150" Canvas.Top="100">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ic:ChangePropertyAction PropertyName="Text" TargetName="textbox" Value="click"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
        <TextBox x:Name="textbox" Width="100" Height="20" Text="textbox" Canvas.Left="150" Canvas.Top="150"/>
    </Canvas>
</UserControl>
 

먼저 Trigger와 Action을 사용하기 위해서 어셈블리를 추가해야 한다(붉은색)
추가해야할 어셈블리는 System.Windows.Interactivity,  Microsoft.Expression.Interactions, Microsoft.Expression.Prototyping.Interactivity 이렇게 3개다. 이 어셈블리는 Expression Blend를 설치해야 추가할 수 있다. 어찌보면 디자이너를 위한 기능이므로 Blend를 설치해야만 한다

Canvas에 Button과 TextBox를 배치시키고 Button에 트리거를 선언(파란색)
그리고, Click 이벤트에 대한 EventTrigger를 선언(초록색)
갈색은 Action에 대한 내용으로 ChangProperty 곧 속성 변경 Action을 선택하고, 속성명으로 Text, 타겟 컨트롤로 
TextBox의 이름 textbox를 설정 TextBox의 Text 값을 click으로 한다는 내용(초기값은 textbox)

<실행 초기 모습>

<실행 결과 모습>


 
저작자 표시

'【Develope】 > 【Silverlight】' 카테고리의 다른 글

데이터 바인딩의 이해  (0) 2012/01/04
Trigger & Action  (0) 2011/12/07
이벤트 핸들러 작성  (0) 2011/12/06
실버라이트 기반 ArcGIS app. 개발시 만나는 error  (0) 2010/10/15
TAGaction, SilverLight, trigger
Posted by RisingForce NO TRACKBACK NO COMMENT

이벤트 핸들러 작성

2011/12/06 14:23 : 【Develope】/【Silverlight】
이벤트란 ?
어떠한 동작이 발생했다는걸 알리려고 객체가 보내는 메세지 

이벤트의 종류
입력 이벤트는 사용자의 입력에 의해서 발생되는 이벤트
비입력 이벤트 객체의 상태 변화에 의해서 발생된느 이벤트. 사용자의 입력이 없이도 발생되는 이벤트 

이벤트 핸들러란 ?
발생한 이벤트를 처리하는 코드를 의미 

* XAML에서 이벤트 핸들러 사용
 
<UserControl x:Class="EventHandlerXAML.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button Width="100" Height="100" Content="이벤트버튼" Click="Button_Click"/>

    </Grid>
</UserControl>

MainPage.xaml화면에서 이벤트를 발생시킬 버튼 객체 생성
Click 이벤트를 XAML에서 명시적으로 기입(붉은색) 핸들러 네임은 그대로 비하인드 코드에서 사용  

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace EventHandlerXAML
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
       {
          MessageBox.Show("버튼 클릭");
       }
    }
}

비하인드 코드에 이벤트 핸들러로 사용할 메서드 선언
메서드 이름은 XAML에서 명시한 이름과 같게(Button_Click)
이벤트 핸들러 구현(MessageBox)

*비하인드 코드를 이용한 동적 이벤트 핸들러 사용 

 <UserControl x:Class="EventHandlerXAML.MainPage"
    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"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
        <Button Width="100" Height="100" Content="이벤트버튼" x:Name="MyButton"/>
    </Grid>
</UserControl>

붉은색 부분이 다른점임
Click 이벤트를 명시적으로 기입하지 않고 대신 비하인드 코드에서 컨트롤에 접근할 수 있도록 x:Name을 명시적으로 기입
 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace EventHandlerXAML
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();

            MyButton.Click += new RoutedEventHandler(MyButton_Click);
        }

        void MyButton_Click(object sender, RoutedEventArgs e)
        {
            MessageBox.Show("버튼 클릭");
        }             
    }
} 

x:Name을 통한 이름 MyButton을 통해서 버튼 객체에 접근하여 Click 이벤트에 이벤트 핸들러 연결
(붉은색)
이벤트 핸들러에 대한 메서드 구현(파란색)

*이벤트 핸들러 연결 작성 규칙
컨트롤네임.이벤트네임 += new RoutedEventHandler(메서드네임); 
ex) MyButton.Click += new RoutedEventHandler(MyButton_Click);

*실버라이트3 도서 학습중.. 
저작자 표시

'【Develope】 > 【Silverlight】' 카테고리의 다른 글

데이터 바인딩의 이해  (0) 2012/01/04
Trigger & Action  (0) 2011/12/07
이벤트 핸들러 작성  (0) 2011/12/06
실버라이트 기반 ArcGIS app. 개발시 만나는 error  (0) 2010/10/15
TAGSilverLight, 이벤트 핸들러
Posted by RisingForce NO TRACKBACK NO COMMENT