[WPF] Data Binding 기초

Data Binding..오늘 정신이 좀 없어서 인지 머릿속으로 공부가 잘 안들어왔다.

Data Binding은 C#의 window application 개발시 가장 중요하다고 할 수 있는 기능인데

나는 아주 기초이기 때문에 Data Binding의 기초에 대해서 잊지 않도록 적어놓아 보려고 한다.

MainWindow.xaml

<Window x:Class="WPFMemo.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:WPFMemo" mc:Ignorable="d" Title="MainWindow" Height="594.836" Width="456.558"> <Grid x:Name="MemoPanel"> <StackPanel x:Name="ToDoListPanel" Orientation="Vertical"> <ListBox x:Name="MemoCateList" Height="478" Margin="0,0,0.4,0" BorderBrush="#ffffff"> <ListBox.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal" Margin="10"> <Image x:Name="Folder_Image" Width="30" Height="30" Source="images/folder close.png"/> <TextBlock x:Name="Cate_Name" FontSize="15" Text="{Binding Content}" VerticalAlignment="Center" Margin="10,0,0,0"/> </StackPanel> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </StackPanel> <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom" HorizontalAlignment="Center" Margin="10"> <TextBox Margin="10" Width ="378" Height ="41" Name="MemoCateValue" BorderBrush="#f7f7f7" /> </StackPanel> </Grid> </Window>

MainWindow.xaml.cs

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WPFMemo { /// <summary> /// MainWindow.xaml에 대한 상호 작용 논리 /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); this.Loaded += new RoutedEventHandler(Page_Loaded); } void Page_Loaded(object sender, RoutedEventArgs e) { //Data Binding이란.. // List<ListValue> list = new List<ListValue>(); list.Add(new ListValue() { Content = "category_list1"}); MemoCateList.ItemsSource = list; } } }

ListValue.cs

using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace WPFMemo { class ListValue { public string Content { get; set; } } }

결과 화면

위의 코드를 찬찬히 살펴보면 databinding이 무엇이지 알게 될것이다.

databinding은 이름을 {binding 이름}을 써놓으면 data가 착 달라붙는 좋은 기능이다.

data는 class로 정의를 해놓으며 그 class로 List를 만든다

그곳에 데이터를 한개씩 저장한 후 뿌려주면 data가 예쁘게 나온다.

+) 추가

Textbox에 글을 쓰고 enter를 누르면 폴더가 생성된다.

List로 사용하면 일회성으로 저장되기 때문에 폴더가 계속 생성되지 않는다

따라서 ObservableCollection을 사용하여 저장할 수 있도록 한다.

using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace WPFMemo { /// <summary> /// MainWindow.xaml에 대한 상호 작용 논리 /// </summary> public partial class MainWindow : Window { //Save the Memory ObservableCollection<ListValue> list = new ObservableCollection<ListValue>(); public MainWindow() { InitializeComponent(); this.Loaded += new RoutedEventHandler(Page_Loaded); } //Page Load void Page_Loaded(object sender, RoutedEventArgs e) { } //MemoCateVlaue에 text 입력후 enter 입력시 private void MemoCateValue_KeyDown(object sender, KeyEventArgs e) { if(e.Key == Key.Return) { if (MemoCateValue.Text == "" || MemoCateValue.Text == null) MessageBox.Show("Please Fill in the Blank"); list.Add(new ListValue() { Content = MemoCateValue.Text }); MemoCateList.ItemsSource = list; MemoCateValue.Text = ""; } } } }