[DataGrid/Element Property Binding] 선택한 행 정보받아오기

Element Property Binding 를 이용해서 데이터그리드 뷰의 정보를 받아와보자

아래의 화면은 데이터그리뷰드의 선택한 아이템의 정보를 하단 박스에 보여주고 있다.

XAML

<Window
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  xmlns:local="clr-namespace:TestWPF"  xmlns:Microsoft_Windows_Controls_Ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary" xmlns:Microsoft_Windows_Themes="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Luna"  mc:Ignorable="d" x:Class="TestWPF.MainWindow"
        Title="MainWindow" Height="303" Width="564" Loaded="Window_Loaded">
    <Window.Resources>        
        <CollectionViewSource x:Key="customerViewSource" d:DesignSource="{d:DesignInstance local:Customer, CreateList=True}" />
    <DataTemplate x:Key="RowTemplate" >
    <Grid Width="105.31">
        <TextBox Margin="0,0,0,0.04" TextWrapping="Wrap" Text="{Binding Age}"/>
    </Grid>       
    </DataTemplate> 
    </Window.Resources>

    <Grid  x:Name="GridData" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="431"/>
            <ColumnDefinition Width="Auto" MinWidth="117"/>
        </Grid.ColumnDefinitions>
        <Grid.Background>
            <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                <GradientStop Color="White" Offset="0.004"/>
                <GradientStop Color="#FFA7A7A7" Offset="1"/>
                <GradientStop Color="#FFD4D4D4" Offset="0.176"/>
            </LinearGradientBrush>
        </Grid.Background>
        <Grid VerticalAlignment="Top" Grid.ColumnSpan="2"/>
        <TextBox Height="24" Margin="0,0,131,8" TextWrapping="Wrap" VerticalAlignment="Bottom" Width="49" HorizontalAlignment="Right" DataContext="{Binding SelectedItem, ElementName=customerDataGrid}" Text="{Binding Age}"/>
            <TextBlock HorizontalAlignment="Left" Height="24" Margin="8,0,0,8" TextWrapping="Wrap" Text="Name:" VerticalAlignment="Bottom" Width="42"/>
            <TextBlock Height="24" Margin="0,0,181,8" TextWrapping="Wrap" Text="Age:" VerticalAlignment="Bottom" RenderTransformOrigin="0.962,0.5" HorizontalAlignment="Right" Width="26"/>
            <TextBox Height="24" Margin="50,0,0,8" TextWrapping="Wrap" VerticalAlignment="Bottom" Width="154" HorizontalAlignment="Left" DataContext="{Binding SelectedItem, ElementName=customerDataGrid}" Text="{Binding Path=Name, Mode=OneWay}"/>
        
        <DataGrid AutoGenerateColumns="False" EnableRowVirtualization="True" Height="200" HorizontalAlignment="Left" ItemsSource="{Binding}" Margin="12,12,0,0" Name="customerDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" VerticalAlignment="Top" Width="400" >
            <DataGrid.Columns>
                    <DataGridTextColumn Binding="{Binding Name}" Header="Name" />
                    <DataGridTextColumn Binding="{Binding Age}" Header="Age" />                
            </DataGrid.Columns>
           
        </DataGrid>
    </Grid>
</Window>

데이터 그리드 데이터바인딩은 간단하게

        private void Window_Loaded(object sender, RoutedEventArgs e)
        {
           
            ObservableCollection<Customer> list = new ObservableCollection<Customer>();
            list.Add(new Customer { Age = 19, Name = "kojaedoo" });
            list.Add(new Customer { Age = 129, Name = "kojaedoo1" });
            list.Add(new Customer { Age = 49, Name = "kojaedoo2" });
            list.Add(new Customer { Age = 59, Name = "kojaedoo3" });
            list.Add(new Customer { Age = 69, Name = "kojaedoo4" });
            list.Add(new Customer { Age = 89, Name = "kojaedoo5" });                   
            this.GridData.DataContext = list;
            
        }

데이터그리드에 바인딩이 잘되는지 확인한판하고

아래의 두개 텍스트박스에 바인딩 시켜주자

텍스트 박스선택

DataContext 에 Element Property Binding 선택

선택하면 특정프로퍼티 선택하라고 마우스가 변경된다

이떄 특정 찍어주면된다 (상단의 customerDataGrid 찍어주면된다).

선택한 행의 정보를 받아올꺼니깐 SelectedItem 선택

 

아래처럼 바뀐다

이제 선택한 아이템중에 특정데이터를 Text박스에 표시해주어야하니깐 바인딩네임을 지정해주자

아래처럼 Data Binding 선택

[Age]를 주었다.

XAML TextBox

<TextBox Height="24" Margin="50,0,0,8" TextWrapping="Wrap" VerticalAlignment="Bottom" Width="154" HorizontalAlignment="Left" DataContext="{Binding SelectedItem, ElementName=customerDataGrid}" Text="{Binding Age}"/>

텍스트박스는

이렇게 변경되어져 있다 Name도 위와같이 똑같이 진행

그럼 끗