RIA Platform

Part5. Using the ListBox and DataBinding to Display List Data

하얀전쟁^^ 2009. 6. 29. 13:00

u  Understand DataBinding

1.    데이터 바인딩의 개념

-      우선, UI 엘레먼트와 데이터 개체와의 연결을 만드는 과정이라고 보시면 됩니다.

-      바인딩 원본 개체의 특정 속성이 바인딩대상 엘리먼트의 의존 속성과 다르거나 원본 개체 속성의 값이 가공해야 할 경우 변환기(ValueConverter)를 통해 변경해야 합니다.

-      데이터 바인딩 기본 개념도

※    데이터 바인딩의 장점  

-      모든 개체들의 속성(Property)이 바인딩을 지원합니다.

-      데이터 템플릿과 스타일을 통해 데이터표현이 자유롭고 유연합니다.

-      UI로 부터 비즈니스 로직을 완벽히 분리할 수 있습니다.

2.    데이터 흐름

-      BindingMode열거형

속성

설명

OneWay

바인딩이 만들어지거나 바인딩 원본 개체 속성이 변경되었을 때 바인딩 대상 개체의 속성 값을 변경합니다.

OneTime

바인딩이 만들어질 때만 바인딩 대상 개체의 속성 값을 변경합니다.

TwoWay

바인딩 원본과 대상 개체의 속성 중 하나가 변경되면 나머지 하나의 속성 값을 변경합니다.

-      OneWay, TwoWay와 같이 바인딩 원본 개체의 속성값이 변경되었을 때 대상 개체의 속성값을 변경하기 위해서는 INotifyPropertyChanged 인터페이스를 구현해야만 합니다.

3.    데이터 바인딩 표현식

<object Property=”{Binding}” …/>

<object Property=”{Binding propertyPath}” …/>

<object Property=”{Binding oneOrMoreBindingProperties}” …/>

<object Property=”{Binding propertyPath , oneOrMoreBindingProperties }” …/>

 

u  Sample Code

1.    마우스 왼쪽 버튼 클릭 이벤트로 TextBlock 색깔 바꾸기

-      텍스트 블록에 Foreground 데이터 바인딩하기

Code

Page.xaml

<UserControl x:Class="DemoSample2.Page"

    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

    Width="400" Height="300">

    <Grid x:Name="LayoutRoot" Background="White" >

        <TextBlock x:Name="TextBlock1" Margin="10" Foreground="{Binding ChangingColor}">DataBinding Sample Code</TextBlock>

    </Grid>

</UserControl>

 

Page.xaml.cs

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 DemoSample2

{

    public partial class Page : UserControl

    {

 MyColors myColor = new MyColors();

 

        public Page()

        {

            InitializeComponent();

 

            myColor.ChangingColor = new SolidColorBrush(Colors.Red);

            this.TextBlock1.DataContext = myColor;

        }

    }

 

    public class MyColors

    {

        private SolidColorBrush changingColor;

 

        public SolidColorBrush ChangingColor

        {

            get { return changingColor; }

            set { changingColor = value; }

        }

    }

}

Description

ð  Page.xaml 텍스트 블록의 Foreground 속성에 바인딩합니다.

ð  데이터 바인딩을 위한 원본 개체를 만들기 위해 MyColors 클래스를선언하였습니다.

ð  Page()에서 Object 개체에 데이터 바인딩을 지정하였습니다.

Result

 

-      마우스 왼쪽 버튼 클릭 이벤트 추가

Code

Page.xaml

<TextBlock x:Name="TextBlock1" Margin="10" Foreground="{Binding ChangingColor}" MouseLeftButtonDown="TextBlock1_MouseLeftButtonDown">DataBinding Sample Code</TextBlock>

 

Page.xaml.cs

private void TextBlock1_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)

{

    myColor.ChangingColor = new SolidColorBrush(Colors.Black);

}

Description

ð  마우스 왼쪽 버튼 클릭 이벤트를 추가하였습니다. 빌드 후, 결과 화면을 보시면, 상단 이미지와 동일하게 텍스트 블록 색깔 변화가없는 것을 볼 수 있습니다.

ð  속성 값 변경을 감지해서 대상 속성의 값을 변경하기 위해서는INotifyPropertyChanged 인터페이스를 반드시 구현해 주어야 합니다.

-      INotifyPropertyChanged인터페이스 구현

Code

public class MyColors : INotifyPropertyChanged

{

    public event PropertyChangedEventHandler PropertyChanged;

 

    private SolidColorBrush changingColor;

    public SolidColorBrush ChangingColor

    {

        get { return changingColor; }

        set

        {

            changingColor = value;

            NotifyPropertyChaged("ChangingColor");

        }

    }

 

    private void NotifyPropertyChaged(string propertyName)

    {

        if (PropertyChanged != null)

        {

            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

        }

    }

}

2.    ListBox컨트롤에 DataBinding 하기

-      Part3.“Naver OpenAPI 를 이용한 Book검색” 코드에서 DataGrid 컨트롤를 삭제하고, ListBox 컨트롤로 변경한 후, 데이터 보여주기

Code

Page.xaml

// DataGrid 컨트롤 삭제하고, ListBox 컨트롤 로 대체함.

<ListBox x:Name="lbResult" Grid.Row="1"></ListBox>

 

Page.xaml.cs

void webClient_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)

{

    if (e.Error == null)

    {

        //Using LINQ to XML to Parse NaverOpenAPI XML Items into Book Class

        XDocument xmlBooks = XDocument.Parse(e.Result);

 

        var books = from book in xmlBooks.Descendants("item")

                    select new Book

                    {

                        BookName = (string)book.Element("title"),

                        LinkUrl = new Uri((string)book.Element("link")),

                        ImageUrl = new Uri((string)book.Element("image")),

                        Author = (string)book.Element("author"),

                        Price = (int)book.Element("price"),

                        Publisher = (string)book.Element("publisher"),

                        PubDate = (string)book.Element("pubdate"),

                        ISBN = (string)book.Element("isbn"),

                        Description = (string)book.Element("description")

                    };

 

        // XML Parse 한 데이터 바인딩하기

        lbResult.ItemsSource = books;

    }

}

Result

Description

ð  검색 버튼 클릭 시, ListBox 에 해당 데이터 영역에“바인딩된 컬렉션명”이 나타나는데, ListBox 컨트롤 부분에 <ListBox x:Name="lbResult" DisplayMemberPath="BookName" Grid.Row="1"></ListBox> 어떤 데이터를보여줄지 매핑을 하지 않았기 때문입니다. 위와 같이 DisplayMemberPath를 지정해 주시면,아래와 같이 원하는 데이터를 화면에 보여줍니다.


-      ListBox.ItemTemplate를 이용한 DataTemplate 구현하기

Code

Page.xaml

<ListBox x:Name="lbResult" Grid.Row="1">

    <ListBox.ItemTemplate>

        <DataTemplate>

            <StackPanel Orientation="Vertical">

                <StackPanel Orientation="Horizontal">

                    <TextBlock Margin="5">책 이름 : </TextBlock>

                    <TextBlock x:Name="txtBookName"  Margin="5" Text="{Binding BookName}"></TextBlock>

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Margin="5">책 소개 :</TextBlock>

                    <TextBlock x:Name="txtBookDesc" Margin="5" Text="{Binding Description}"></TextBlock>

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Margin="5">책 발행일 :</TextBlock>

                    <TextBlock x:Name="txtBookPubDate" Margin="5" Text="{Binding PubDate}"></TextBlock>

                </StackPanel>

            </StackPanel>

        </DataTemplate>

    </ListBox.ItemTemplate>

</ListBox>

Result


Description

ð  ListBox에 1개 이상의 정보를 보여줄 경우, ListBox 컨트롤의 ItemTemplate안에 DateTemplate를 정의하여 표현하고자하는 UI를 표현할 수 있습니다.

ð  DataTemplate 안에는 한 개의 컨트롤만 사용 가능하나, 여러 개의 컨트롤을 사용할 경우, StackPanel를 감싸줘서 사용할 수 있습니다.

3.     Tooltips (중요)

-      Part3의 “Silverlight Network 이해하기” 에서 Silverlight Application은 보안을 위한 URL 접근이 제약되어 있고, 보안 정책 파일을 통해 특정 클라이언트의 접근을허용할 수 있다고 설명 드렸습니다. 우선 샘플 코드를 통해 자세한 설명을 이어가겠습니다.

-      ListBox컨트롤의 ItemTempalte 에검색한 책 이미지를 넣어보겠습니다.

Code

Page.xaml

<ListBox x:Name="lbResult" Grid.Row="1" >

    <ListBox.ItemTemplate>

        <DataTemplate>

            <StackPanel Orientation="Vertical">

                <StackPanel Orientation="Horizontal">

                    <TextBlock Margin="5">책 이미지 :</TextBlock>

                    <Image Source="{Binding ImageUrl}" Width="16" Height="10"></Image>

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Margin="5">책 이름 :</TextBlock>

                    <TextBlock x:Name="txtBookName"  Margin="5" Text="{Binding BookName}"></TextBlock>

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Margin="5">책 소개 :</TextBlock>

                    <TextBlock x:Name="txtBookDesc" Margin="5" Text="{Binding Description}"></TextBlock>

                </StackPanel>

                <StackPanel Orientation="Horizontal">

                    <TextBlock Margin="5">책 발행일 :</TextBlock>

                    <TextBlock x:Name="txtBookPubDate" Margin="5" Text="{Binding PubDate}"></TextBlock>

                </StackPanel>

            </StackPanel>

        </DataTemplate>

    </ListBox.ItemTemplate>

</ListBox>

Result


Description

ð  결과 화면처럼 에러 코드 : 4001 , 범주 : ImageError , 메시지 : AG_E_NETWORK_ERROR 가 발생하는 것을 볼 수 있습니다. 좀 더 자세히 알아보기 위해 HttpWatch, Fildder인 IE 개발 툴을 사용하여 요청한기록(아래 이미지)을 보면 요청한 도메인 최상위 루트에 clientaccesspolicy.xml 파일과 crossdomain.xml를먼저 요청하는 것을 볼 수 있습니다. 크로스 도메인 접근시 자동으로 요청하는 2개의 파일입니다.

ð  Clientaccesspolicy.xml 파일은 Silverlight에서 사용하는 보안 정책 파일이고, Crossdomain.xml 파일은 기존에 어드비 플래시에서 사용하는 정책 파일로, 어떤 파일과 어떤 디렉토리를 접근 허용할지를 설정해 놓은 규약서라고 보시면 됩니다.

-      보안 정책 파일 작성하고 배포하기

ð  이 사이트의 모든 경로나 파일의 접근이 가능하도록 작성하였습니다.

Code

Clientaccesspolicy.xml

<?xml version="1.0" encoding="utf-8"?>

<access-policy>

  <cross-domain-access>

    <policy>

      <allow-from http-request-headers="*">

        <domain uri="*"/>

      </allow-from>

      <grant-to>

        <resource path="/" include-subpaths="true"/>

      </grant-to>

    </policy>

  </cross-domain-access>

</access-policy>

추가 설명 (예시)

<resource path="/demo" include-subpaths="false"/> 로 지정시,

허용되는 접근

demo#intro

/demo?bar=true#intro

허용되지 않는 접근

/demo

/demo.txt

/demo/sample

/demo/sample.txt

/demo/sample?bar=true

/sample

 

<resource path="/demo" include-subpaths="true"/> 로 지정시,

허용되는 접근

/demo/sample

/demo/sample.txt

/demo/sample?bar=true

/demo#intro

허용되지 않는 접근

/sample

Crossdomain.xml

<?xml version="1.0"?>

 

<!DOCTYPE cross-domain-policy SYSTEM

"http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">

 

<cross-domain-policy>

  <allow-access-from domain="*"/>

  <allow-http-request-headers-from domain="* " headers="*" />

</cross-domain-policy>

ð  위 코드와 같이 작성한 후, 사이트 최상위 루트에 배포하시면 됩니다.

 

저작자표시 비영리 변경금지