간단한 data grid 사용법

간단한 data grid 사용법

----------------------------------------------------------------------------------------------------------

바인딩 될 클래스

----------------------------------------------------------------------------------------------------------

namespace DataGridDetails_CS
{
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Zip { get; set; }
        public DateTime BirthDate { get; set; }
    }
}

----------------------------------------------------------------------------------------------------------

xaml 페이지

----------------------------------------------------------------------------------------------------------

<UserControl x:Class="DataGridDetails_CS.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"
             xmlns:basics="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">

<data:DataGrid RowDetailsVisibilityMode="VisibleWhenSelected" x:Name="PeopleList" AutoGenerateColumns="False">

      * 가장기본적인 바인딩 클릭하면  RowDetailsTemplate 의 내용이 나타난다
<data:DataGrid.Columns>
                <data:DataGridTextColumn Header="First Name" Binding="{Binding FirstName}" SortMemberPath="FirstName" />
                <data:DataGridTextColumn Header="Last Name" Binding="{Binding LastName}" SortMemberPath="LastName" />
            </data:DataGrid.Columns>

* RowDetailsVisibilityMode 를 위한 템플릿

            <data:DataGrid.RowDetailsTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Vertical" Background="LightBlue">
                        <TextBlock FontWeight="Bold" Text="Address" />
                        <TextBox Text="{Binding Address}"/>                       
                        <TextBlock FontWeight="Bold" Text="City" />
                        <TextBox Text="{Binding City}" />
                        <TextBlock FontWeight="Bold" Text="Birth Date" />
                        <basics:DatePicker SelectedDate="{Binding BirthDate}" Text="{Binding BirthDate}" />
                    </StackPanel>
                </DataTemplate>
            </data:DataGrid.RowDetailsTemplate>
        </data:DataGrid>

    </Grid>
</UserControl>

----------------------------------------------------------------------------------------------------------

cs 페이지

----------------------------------------------------------------------------------------------------------

        void Page_Loaded(object sender, RoutedEventArgs e)
        {
            // clear any data context for the DataGrid
            PeopleList.ClearValue(DataContextProperty);

            /* The code below is sample data only.  This is done to
             * keep the sample small for you and as little configuration
             * as possible.  In the 'real world' this code would
             * likely retrieve data from your services (WCF, REST, ASMX, Astoria, etc)
             * and return the information for you to bind */
    List<Person> people = new List<Person>(); //위에서 만들었던  Person 개체를 List<> 형식으로 담습니다
            people.Add(new Person() { FirstName = "Tim", LastName = "Heuer", Address = "123 Main St", BirthDate = Convert.ToDateTime("9/18/1969"), City = "Queen Creek" });
            people.Add(new Person() { FirstName = "Scott", LastName = "Guthrie", Address = "1 Microsoft Way", BirthDate = Convert.ToDateTime("1/12/1969"), City = "Redmond" });
            people.Add(new Person() { FirstName = "Rob", LastName = "Bagby", Address = "456 S Central Ave", BirthDate = Convert.ToDateTime("9/18/1969"), City = "Phoenix" });
            people.Add(new Person() { FirstName = "Jesse", LastName = "Liberty", Address = "789 Blue St", BirthDate = Convert.ToDateTime("9/18/1969"), City = "Boston" });
            people.Add(new Person() { FirstName = "Dave", LastName = "Bost", Address = "1 Chicago Ave", BirthDate = Convert.ToDateTime("9/18/1969"), City = "Chicago" });
            people.Add(new Person() { FirstName = "Jason", LastName = "Mauer", Address = "1234 N 23rd Ave", BirthDate = Convert.ToDateTime("9/18/1969"), City = "Portland" });

            // bind the people to the DataGrid
PeopleList.ItemsSource = people; //생성한 데이터를 DataGrid 에 담습니다
        }

--------------------------------------------------------------------------------------------------------

참고사항

--------------------------------------------------------------------------------------------------------

AutoGenerateColumns="True" 사용해서 기본 컬렉션 사용하기

        <data:DataGrid
            Name="grdList"
            Margin="8,202,0,136"
            AutoGenerateColumns="True"
            ItemsSource="{Binding}" Width="244" d:LayoutOverrides="GridBox" HorizontalAlignment="Left" />

사용자 정의 템플릿

<data:DataGrid ItemsSource="{Binding}" x:Name="grdList" AutoGenerateColumns="False" Margin="120,96,112,64" DataContext="{Binding Mode=OneTime, Path=Publishing, Source={StaticResource BOOKDS}}" Style="{StaticResource DataGridStyle1}">

            <data:DataGrid.Columns>
                <!-- Name Column -->
                <data:DataGridTemplateColumn Header="Name">
                    <data:DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Vertical">
                                             <TextBlock Text="{Binding Title}"/>
                                             <TextBlock Text="{Binding PostID}"/>
                            </StackPanel>
                        </DataTemplate>
                    </data:DataGridTemplateColumn.CellTemplate>
                </data:DataGridTemplateColumn>
            </data:DataGrid.Columns>

        </data:DataGrid>

<data:DataGrid x:Name="dataGrid5"
    Height="125" Margin="0,5,0,10"
    AutoGenerateColumns="False"
    RowBackground="Azure"
    AlternatingRowBackground="LightSteelBlue">
    <data:DataGrid.Columns>
        <!-- Name Column -->
        <data:DataGridTemplateColumn Header="Name">
            <data:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Padding="5,0,5,0"
                            Text="{Binding FirstName}"/>
                        <TextBlock Text="{Binding LastName}"/>
                    </StackPanel>
                </DataTemplate>
            </data:DataGridTemplateColumn.CellTemplate>
            <data:DataGridTemplateColumn.CellEditingTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBox Padding="5,0,5,0"
                            Text="{Binding FirstName}"/>
                        <TextBox Text="{Binding LastName}"/>
                    </StackPanel>
                </DataTemplate>
            </data:DataGridTemplateColumn.CellEditingTemplate>
        </data:DataGridTemplateColumn>             
        <!-- Address Column -->
        <data:DataGridTextColumn
            Header="Address" Width="300"
            Binding="{Binding Address}" />
    </data:DataGrid.Columns>
</data:DataGrid>