2장. WPF 데이터바인딩 심플예제

2장. WPF 데이터바인딩 심플예제

참조

• https://www.youtube.com/watch?v=2iD0UZBuWgs&list=PLxU-iZCqT52Cmj47aKB1T-SxI33YL7rYS&index=3

목적

• WPF 데이터바인딩 실습을 통해 이해해 봅시다.

예제

• EmpViewModel.cs

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace WPF01_Test
{
    public class EmpList : ObservableCollection<EmpViewModel>
    {
        public EmpList()
        {
            Add(new EmpViewModel() { Empno = 1, Ename = "Jo", Job = "Programmer" });
            Add(new EmpViewModel() { Empno = 2, Ename = "Kim", Job = "Programmer" });
            Add(new EmpViewModel() { Empno = 3, Ename = "lee", Job = "Programmer" });
            Add(new EmpViewModel() { Empno = 4, Ename = "Cha", Job = "Programmer" });
            Add(new EmpViewModel() { Empno = 5, Ename = "Cho", Job = "Programmer" });
            Add(new EmpViewModel() { Empno = 6, Ename = "Min", Job = "Programmer" });
        }
    }

    public class EmpViewModel
    {
        int empno = 0;
        string ename = string.Empty;
        string job = string.Empty;

        public int Empno
        {
            get { return empno; }
            set { this.empno = value; }
        }

        public string Ename
        {
            get { return ename; }
            set { this.ename = value; }
        }

        public string Job
        {
            get { return job; }
            set { this.job = value; }
        }
    }
}

• MainWindow.xaml

  <Window x:Class="WPF01_Test.MainWindow"
        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:WPF01_Test"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid Margin="0 0 3.2 -0.2">
        <ListView Margin="10, 66, 10, 10" Name="lstView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <WrapPanel>
                        <TextBlock Text="Empno: "/>
                        <TextBlock Text="{Binding Empno}" FontWeight="Bold"/>
                        <TextBlock Text=", "/>
                        <TextBlock Text=" ("/>
                        <TextBlock Text="Ename: "/>
                        <TextBlock Text="{Binding Ename}" TextDecorations="Underline"/>
                        <TextBlock Text=")"/>
                        <TextBlock Text="{Binding Job}" Foreground="Blue"
                                   Cursor="Hand"/>
                    </WrapPanel>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
  
        <Button x:Name="Button1"
                Content="Get Data"
                HorizontalAlignment="Left"
                Margin="43 28 0 0"
                VerticalAlignment="Top"
                Width="75"
                Click="Select_Click"/>
    </Grid>
  </Window>

MainWindow.xaml.cs

using System.Windows;

namespace WPF01_Test
{
    /// <summary>
    /// MainWindow.xaml에 대한 상호 작용 논리
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void Select_Click(object sender, RoutedEventArgs e)
        {
            EmpList empList = new EmpList();
            lstView.ItemsSource = empList; //데이터바인딩
        }
    }
}

• Button과 ListView 컨트롤을 Grid에 배치합니다.

• Button 컨트롤을 클릭하게 되면 회원 리스트가 ListView에 데이터 바인딩 되어서 출력됩니다.

• ViewModel과 ListView 컨트롤의 바인딩은 ItemsSource 속성을 이용하여 서로 연결을 시켜 주면 됩니다.

• 실행 결과