일일결과물 [Silverlight3] 데이터바인딩 -기초-

[20기 은호]

SilverlightApplication1.zip

Silverlight3 데이터 바인딩.docx

Silverlight3 데이터 바인딩

１     데이터 바인딩

데이터 바인딩은 UI와 데이터 사이의 관계를 맺는 기술이다.

프로그래머가 필요한 데이터 클래스 인스턴스에 저장하면, 디자이너는 데이터 바인딩을 이용하여 UI에서 데이터를 쉽게 화면에 표시 할 수 있다. 즉, 데이터 바인딩은 프로그래머와 디자이너 사이를 연결하기 위해서 사용되는 기술이다.

２    데이터 바인딩 구조

일반적으로 프로그래머는 데이터를 가공, 생성하는 작업을 한다. 예를 들어 데이터 베이스에서 게시판 정보를 읽어오거나 회원정보를 읽어오는 일을 한다. 반면 디자이너는 프로그래머가 가공, 생성한 데이터를 기반으로 프로그램의 디자인을 작성한다.

 실버라이트에 이러한 개념을 적용해 보면 프로그래머가 생성한 데이터는 데이터를 저장할 수 있는 클래스라고 할 수 있으며, 디자이너가 작성한 디자인은 XMAL에 들어있는 컨트롤 이라고 할 수 있다.

３    데이터 바인딩 기초

가)    소스파일

Silverlight Xaml 소스 : 간단한 디자인을 한 소스이다.

<Grid x:Name="LayoutRoot" Width="400" Height="300">

        <Grid.RowDefinitions>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

            <RowDefinition Height="50"/>

        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>

            <ColumnDefinition Width="100"/>

            <ColumnDefinition Width="300"/>

        </Grid.ColumnDefinitions>

        <Rectangle Stroke="Black" Grid.ColumnSpan="2" Grid.RowSpan="4">

            <Rectangle.Fill>

                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

                    <GradientStop Color="Beige" Offset="0"/>

                    <GradientStop Color="Black" Offset="1"/>

                </LinearGradientBrush>

            </Rectangle.Fill>

        </Rectangle>

      <TextBlock Text="ID" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" />

      <TextBlock Text="Email" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Grid.Row="1" />

      <TextBlock Text="Name" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Grid.Row="2" />

      <TextBlock Grid.Column="1" Text="ID" x:Name="tdId" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Margin="20,0,0,0" />

      <TextBlock Grid.Row="1" Grid.Column="2" Text="Email" x:Name="tdEmail" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Margin="20,0,0,0" />

      <TextBlock Grid.Row="2" Grid.Column="3" Text="Name" x:Name="tdName" VerticalAlignment="Center" Foreground="White" FontWeight="Bold" Margin="20,0,0,0" />

        <Button Grid.Column="0" Grid.Row="3" Content="가져오기" x:Name="btGetUserData" VerticalAlignment="Center" Margin="20,0,0,0" />

    </Grid>

Silverlight C#코드 btGetUserData버튼이 누를때마다 유저데이터를 가져오는 소스.

public partial class MainPage : UserControl

    {

        UserDataGenerator udg = new UserDataGenerator();

        public MainPage()

        {

            InitializeComponent();

            btGetUserData.Click += new RoutedEventHandler(btGetUserData_Click);

            // 버튼클릭시 발생하는 이벤트 핸들러생성.

        }

        void btGetUserData_Click(object sender, RoutedEventArgs e)

        {

            UserData ud = udg.GetUserData();

            tdId.Text = ud.ID;

            tdEmail.Text = ud.Email;

            tdName.Text = ud.Name;

        }

    }

UserData Class 소스 : 간단한 유저데이터 클래스

public class UserData

    {

        public string ID { get; set; }

        public string Email { get; set; }

        public string Name { get; set; }

    }

UserDataGenerator 소스 : 유저데이터를 초기화 하고 유저데이터를 저장 / 가져오는 클래스

public class UserDataGenerator

    {

        private IList<UserData> userDatas;

        private int count = 0;

        public UserDataGenerator()

        {

            userDatas = new List<UserData>();

            UserData userData = new UserData();

            userData.ID = "test1";

            userData.Email = "test1@mail.com";

            userData.Name = "은호다";

            userDatas.Add(userData);

            //유저데이터를 생성하여 리스트에 저장.

            UserData userData2 = new UserData();

            userData2.ID = "test2";

            userData2.Email = "test2@mail.com";

            userData2.Name = "은호일지도";

            userDatas.Add(userData2);

//유저데이터를 생성하여 리스트에 저장.

            UserData userData3 = new UserData();

            userData3.ID = "test3";

            userData3.Email = "test3@mail.com";

            userData3.Name = "은호일꺼야";

            userDatas.Add(userData3);

//유저데이터를 생성하여 리스트에 저장.

        }

        public UserData GetUserData()

        {

            count++;

            if (count == userDatas.Count)

            {

                count = 0;

            }

            return userDatas[count];

        }

    }

나)    실행장면

< 초기화면 >

< 버튼을 누를때마다 변경되는 화면 >