Tech/Silverlight2009. 4. 6. 12:00
1. DataGrid 컨트롤은?
2. DataGrid 컨트롤에서 세부 데이타 표시하기



1. DataGrid 컨트롤은?

System.Windows.Controls 네임스페이스에 속해 있는 리스트 스타일의 컨트롤이다.

DataGrid는 UI가상화를 사용하고 있어서, 몇만 개의 데이터의 행을 지원할 있도록 보장해준다.

UI가상화란 사용자에게 보이는 모든 아이템들은 메모리 안에서 생성된다는 것을 의미한다


DataGrid 컨트롤의 실행 샘플.


2. DataGrid에서 컨트롤에서 세부 데이타 표시하기


XAML에서 DataGrid 컨트롤을 사용을 위한 NameSpace 정의.

<UserControl x:Class="DataGridSample.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    >
    <Grid x:Name="LayoutRoot" Background="White">       
        <data:DataGrid x:Name="myDataGrid" />
    </Grid>
</UserControl>


데이타 소스 설정.

myDataGrid.ItemsSource = GetEoticons();
private  List<Emotion> GetEmoticons()
{
       List<Emotion> emoticons = new List<Emotion>();
       emoticons.Add(new Emotion("철수",    "1.jpg"));
       emoticons.Add(new Emotion("영희",    "2.jpg"));
       emoticons.Add(new Emotion("바둑이", "3.jpg"));
       return emoticons;            
 }

public class Emotion
{       
        private BitmapImage icon = null;
        public Emotion(string name, string imageUrl)
        {
            Name = name;
            Icon = new BitmapImage(new Uri(imageUrl, UriKind.Relative));
        }
        public string Name
        {
            get;
            private set;
        }
        public BitmapImage Icon
        {
            get { return icon;  }
            set
            {
                icon = value;
            }
        }
}


세부 데이타 표시하기
- AutoGenerateColumns False로 설정하고, DataGrid.Columns를 사용하여 데이터를 표시할 칼럼 형식을 정의.

- DataGridTextColumn 클래스의 SortMemberPath로  정렬될 멤버 설정하여 아이템 정렬.
- DataGridTemplateColumn 클래스의 CellTemplate으로 사용자 정의(고유한 열 형식) 템프릿 생성.

<data:DataGrid x:Name="myDataGrid" AutoGenerateColumns="False" IsReadOnly="False">
      <data:DataGrid.Columns>
           <data:DataGridTextColumn Binding="{Binding Name, Mode=twoWay}" SortMemberPath="Name"/>
                <data:DataGridTemplateColumn>
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <Image Source="{Binding Icon}" Height="100"/>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>    
           </data:DataGridTemplateColumn>
     </data:DataGrid.Columns>
</data:DataGrid>


DataGrid 편집 하기.
- IsReadOnly를 False로 설정
- Binding Mode를 twoWay로 설정.
- 편집과 관련된 Event. 

BiginningEdit 
- DataGridBeginningEditEventArgs파라미터 안에 Cancel속성을 True 변경하면 편집을 막을 있다.
PrepareCellForEdit 
-
DataGridTemplateColumn 내부의 콘텐트가 편집 모드가 들어갈 발생.
- BeginningEdit 이벤트에서 생성한 변화들을 다시 한번 변경할 있는 기회를 준다.

 

 


 

'Tech > Silverlight' 카테고리의 다른 글

Silverlight2 Unit Test  (0) 2009.05.19
Rhino Mocks in Silverlight  (2) 2009.05.15
LINQ (Language Integrated Query)  (0) 2009.04.06
Silverlight with WEB  (0) 2009.03.30
Posted by 비회원

댓글을 달아 주세요