ObservableCollection 바인딩(Binding)

ObservableCollection 을 이용해서 Binding 하는 방법에 대해서 소스를 중심으로 알아 보겠습니다.

1.Declare ObservableCollection 모델 Binding Class

using System;

using System.ComponentModel;

using System.Collections.ObjectModel;

using System.Collections.Generic;

 

namespace ObservableCollectionBinding.Binding

{

    public class OnePersonInfo : INotifyPropertyChanged

    {

        public event PropertyChangedEventHandler PropertyChanged;

 

        public virtual void OnPropertyChanged(string propertyName)

        {

            if(this.PropertyChanged != null)

            {

                this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));

            }

        }

 

        public OnePersonInfo()

        {

 

        }

 

        public OnePersonInfo(string first, string last, string city)

        {

            this.firstName = first;

            this.lastName = last;

            this.cityInfo = city;

        }

 

        private string firstName;

 

        public string FirstName

        {

            get { return firstName; }

            set

            {

                firstName = value;

                OnPropertyChanged("FirstName");

            }

        }

 

        private string lastName;

 

        public string LastName

        {

            get { return lastName; }

            set

            {

                lastName = value;

                OnPropertyChanged("LastName");

            }

        }

 

        private string cityInfo;

 

        public string CityInfo

        {

            get { return cityInfo; }

            set

            {

                cityInfo = value;

                OnPropertyChanged("CityInfo");

            }

        }

    }

 

    public class PersonCollection : ObservableCollection<OnePersonInfo>

    {

        public List<string> PersonList

        {

            get

            {

                List<string> firstNameList = new List<string>();

 

                foreach(var onePerson in this)

                {

                    firstNameList.Add(onePerson.FirstName);

                }

 

                return firstNameList;

            }

        }

 

        public ObservableCollection<OnePersonInfo> PersonCollectionData

        {

            get

            {

                return this;

            }

        }

 

        public PersonCollection()

            : base()

        {

            Add(new OnePersonInfo("aaa", "1", "sonic"));

            Add(new OnePersonInfo("bbb", "2", "zelda"));

            Add(new OnePersonInfo("cc", "3", "mario"));

            Add(new OnePersonInfo("ddddd", "4", "halo"));

            Add(new OnePersonInfo("eee", "5", "data"));

        }      

 

    }

 

}

2.Using XAML

<Window x:Class="ObservableCollectionBinding.MainWindow"

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

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

        xmlns:local="clr-namespace:ObservableCollectionBinding.Binding" <-(1)      

        Title="MainWindow" Height="450" Width="525">

    <Window.Resources>

        <ObjectDataProvider x:Key="MyFriends" ObjectType="{x:Type local:PersonCollection}"/>  <-(2)

        <Style TargetType="ListBoxItem">           

            <Setter Property="FontFamily" Value="Verdana"/>

            <Setter Property="FontSize" Value="11"/>

            <Setter Property="Padding" Value="10"/>

        </Style>       

       

        <DataTemplate x:Key="DetailTemplate">

            <Border Width="300" Height="100" Margin="20"

              BorderBrush="LightSeaGreen"  BorderThickness="3" Padding="8"

              CornerRadius="5">

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition/>

                        <RowDefinition/>

                        <RowDefinition/>

                    </Grid.RowDefinitions>

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition/>

                        <ColumnDefinition/>

                    </Grid.ColumnDefinitions>

                    <TextBlock Grid.Row="0" Grid.Column="0" Text="First Name:"/>

                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Path=FirstName}"/>

                    <TextBlock Grid.Row="1" Grid.Column="0" Text="Last Name:"/>

                    <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding Path=LastName}"/>

                    <TextBlock Grid.Row="2" Grid.Column="0" Text="Home Town:"/>

                    <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding Path=CityInfo}"/>

                </Grid>

            </Border>

        </DataTemplate>

    </Window.Resources>

 

    <Grid DataContext="{Binding Source={StaticResource MyFriends}}">

        <StackPanel>

            <TextBlock FontFamily="Verdana" FontSize="11"

               Margin="5,15,0,10" FontWeight="Bold">My Friends</TextBlock>

            <ListBox IsSynchronizedWithCurrentItem="True"

                ItemsSource="{Binding Source={StaticResource MyFrUSiends},                              

                Path=PersonCollectionData}"                                  <-(3)

                />

            <TextBlock FontFamily="Verdana" FontSize="11"

               Margin="5,15,0,5" FontWeight="Bold">Information</TextBlock>

            <ContentControl Content="{Binding Source={StaticResource MyFriends}}"

                    ContentTemplate="{StaticResource DetailTemplate}"/>       <-(3)

        </StackPanel>

    </Grid>

 

</Window>

3.정리

-(1) 사용을 원하는 XAML(UI)에서 ObservableCollection을 이용해서 간단한 모델 Binding 클래스를 선언한다.(

-(2) 이 예제에서는 XAML Resource에서 바로 바인딩 한다.

<ObjectDataProvider x:Key="MyFriends" ObjectType="{x:Type local:PersonCollection}"/> 

-실제 사용하는 UI에서 (3)처럼 바인딩을 StaticeResource를 이용해서 바인딩 한다.

ItemsSource="{Binding Source={StaticResource MyFrUSiends}, Path=PersonCollectionData}"

<ContentControl Content="{Binding Source={StaticResource MyFriends}}" ContentTemplate="{StaticResource DetailTemplate}"/>

출처 : 다년간의 프로그래밍 경험