본문 바로가기

Silverlight

ListBox DataBinding

개요

이 내용은 앞에서 DaumApi를 하면서 나왔던 내용인데 그중에서 DataBinding 부분만 아주 간단하게 뽑아서 대략적인 내용을 설명드리도록 하겠습니다.

결과

머 리스트 박스에 값들을 넣어주는건데 이걸 일일이 listbox의 Item들을 넣어준게 아니라 DataBinding을 이용해서 Item과 Data를 묶어서 뿌려주는거지용

그럼 각설하고 내용 설명 고고싱

내용

1) 우선 데이타들을 담아둘 데이타 클래스를 하나 만들어 줍니다.

namespace dataBinding1
{
    public class dataClass
    {
        public string Name { get; set; }
        public string NickName { get; set; }
        public int Age { get; set; }
        public string image1;
        public ImageSource Image { get; set; }

        public dataClass(string name, string nickname, int age , string image1)
        {
            this.Name = name;
            this.NickName = nickname;
            this.Age = age;
            this.Image = new BitmapImage(new Uri(image1, UriKind.RelativeOrAbsolute));
        }

    }
}

2)

<ListBox Margin="32,32,144,36" x:Name="listbox" ItemsSource="{Binding Mode=OneWay}">
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding Name}" Margin="0,0,50,0" />
                        <TextBlock Text="{Binding NickName}" Margin="0,0,50,0" />
                        <TextBlock Text="{Binding Age}" Margin="0,0,50,0" />
                        <Image Source="{Binding Image}" Width="200" Height="140"/>
                    </StackPanel>      
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>
xaml파일에 listbox를 추가 해주고 listboxdml ItemTemplate를 정의해 줍니다 여기에는 StackPanel이 하나 들어가고 그 안에 3개의 TextBlock과 1개의 Image가 들어가게 되는데 TextBlock의 Text는 각각 Name,NickName,Age와 바인딩 시켜주고 Image의 Source는 Image와 바인딩을 시켜 줍니다.


3)

public ObservableCollection<dataClass> data = new ObservableCollection<dataClass>();
public Page()
{
    InitializeComponent();
    data.Add(new dataClass("한윤진","MonkeyVirus",27,"http://cfs9.tistory.com/upload_control/download.blog?fhandle=YmxvZzIzODE2MUBmczkudGlzdG9yeS5jb206L2F0dGFjaC8wLzAuanBn"));
    data.Add(new dataClass("홍길동","Hong",123,"http://blogfiles10.naver.net/data28/2008/1/26/73/%C4%E8%B5%B5.%C8%AB%B1%E6%B5%BF.e07.080123.hdtv.xvid-jn.avi_001783316_wlgml9744.jpg"));

    listbox.DataContext=data;
}

우선 data라는 ObservableCollection<dataClass> -(여기서는 dataClass를 담는 통) 을 선언해주고 여기에 아까 만들어 놓은 dataClass에 값을 넣은 다음에 통에 넣어 줍니다. 그리고 이렇게 dataClass들이 들어 있는 통을 listbox의 DataContext로 지정해주면 통안의 내용들이 하나씩 나와서 ListBox에 추가 되고 내용(dataClass)에 있는 값들이 아까 2 에서 binding 시켜준 부분에 이름에맞게 들어가게 됩니다. 각각들어가서 listbox에 추가되면 땡~

소스