복습, TodoApp 만들기

1. 목표

간단한 TodoApp을 만들면서, WPF 수업 내용 복습하기

 

2. UI 준비

02.1

Title="MainWindow"
Icon="ToDoIcon.png"

Height="450" Width="400"
ResizeMode="NoResize"

ToDoIcon.zip

0.01MB

 

 

 

02.2

<Grid.ColumnDefinitions>
    <ColumnDefinition Width="10"/>
    <ColumnDefinition Width="*"/>
    <ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
    <RowDefinition Height="10"/>
    <RowDefinition Height="*"/>
    <RowDefinition Height="10"/>
    <RowDefinition Height="75"/>
    <RowDefinition Height="10"/>
    <RowDefinition Height="50"/>
    <RowDefinition Height="10"/>
</Grid.RowDefinitions>

 

 

 

 

02.3

<ScrollViewer Grid.Row="1"
              Grid.Column="1"
              VerticalScrollBarVisibility="Auto"
              >
    <StackPanel Background="Black"/>
</ScrollViewer>

<TextBox Grid.Row="3"
         Grid.Column="1"
         Background="Black"
         Foreground="white"
         />

<Button Grid.Row="5"
        Grid.Column="1"
        Content="Create Todo"
        />

 

03. 로직 구현

03.1

 

<ScrollViewer Grid.Row="1"
              Grid.Column="1"
              VerticalScrollBarVisibility="Auto"
              >
    <StackPanel x:Name="TodoList"
                Background="Black"
                />
</ScrollViewer>

<TextBox x:Name="TodoInput"
         Grid.Row="3"
         Grid.Column="1"
         Background="Black"
         Foreground="white"
         />

 

 

03.2

private void Button_Click(object sender, RoutedEventArgs e)
{
    string todoText = TodoInput.Text;
    if (!string.IsNullOrEmpty(todoText))
    {
        TextBlock todoItem = new TextBlock
        {
            Text = todoText
        };
        TodoList.Children.Add(todoItem);
        TodoInput.Clear();
    }
}

 

 

04. 실행 결과 확인

 

1.4 ToDoApp.zip

0.19MB