WPF로 간단한 계산기 만들기

 

 

 

 

WPF로 간단한 계산기 만들기: 코드 완벽 분석

왜 WPF로 계산기일까?

안녕하세요! 오늘은 WPF 계산기 코드를 하나씩 뜯어보며 어떻게 동작하는지 알아볼게요. WPF(Windows Presentation Foundation)는 닷넷에서 UI를 예쁘게 만들 때 쓰는 기술인데, 초보자도 쉽게 시작할 수 있어요. 이 계산기는 숫자 입력, 사칙연산(+, -, ×, ÷), 실제 계산기의 백분율(%), 결과 표시, 지우기까지 기능을 갖췄죠. 2025년 3월 지금, WPF는 여전히 윈도우 앱 개발에 유용하니까 C# 계산기 만들기 연습으로 딱이에요! XAML과 C# 코드를 쭉 살펴보며 배워볼까요?

XAML: 계산기 화면 그리기

XAML은 WPF에서 UI를 정의하는 마크업 언어예요. 아래는 완전한 계산기 UI 소스입니다. 창 크기는 350x400, 제목은 "계산기"로 설정하고, <Grid>로 레이아웃을 잡았어요.

<!-- MainWindow.xaml -->
<Window x:Class="CalculatorApp.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="계산기" Height="400" Width="350">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/> <!-- 표시창 영역 -->
            <RowDefinition Height="*"/>    <!-- 버튼 영역 -->
        </Grid.RowDefinitions>

        <!-- 계산 결과 표시창 -->
        <TextBox x:Name="Display" Grid.Row="0" Margin="10" Height="50" FontSize="20" 
                 IsReadOnly="True" TextAlignment="Right" Text="0"/>

        <!-- 버튼 레이아웃 -->
        <Grid Grid.Row="1" Margin="10">
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>

            <!-- 숫자 버튼 -->
            <Button Content="7" Grid.Row="1" Grid.Column="0" Click="Number_Click" Margin="5"/>
            <Button Content="8" Grid.Row="1" Grid.Column="1" Click="Number_Click" Margin="5"/>
            <Button Content="9" Grid.Row="1" Grid.Column="2" Click="Number_Click" Margin="5"/>
            <Button Content="4" Grid.Row="2" Grid.Column="0" Click="Number_Click" Margin="5"/>
            <Button Content="5" Grid.Row="2" Grid.Column="1" Click="Number_Click" Margin="5"/>
            <Button Content="6" Grid.Row="2" Grid.Column="2" Click="Number_Click" Margin="5"/>
            <Button Content="1" Grid.Row="3" Grid.Column="0" Click="Number_Click" Margin="5"/>
            <Button Content="2" Grid.Row="3" Grid.Column="1" Click="Number_Click" Margin="5"/>
            <Button Content="3" Grid.Row="3" Grid.Column="2" Click="Number_Click" Margin="5"/>
            <Button Content="0" Grid.Row="4" Grid.Column="1" Click="Number_Click" Margin="5"/>

            <!-- 연산자 버튼 -->
            <Button Content="+" Grid.Row="0" Grid.Column="3" Click="Operator_Click" Margin="5"/>
            <Button Content="-" Grid.Row="1" Grid.Column="3" Click="Operator_Click" Margin="5"/>
            <Button Content="×" Grid.Row="2" Grid.Column="3" Click="Operator_Click" Margin="5"/>
            <Button Content="÷" Grid.Row="3" Grid.Column="3" Click="Operator_Click" Margin="5"/>
            <Button Content="%" Grid.Row="4" Grid.Column="3" Click="Operator_Click" Margin="5"/>

            <!-- 기능 버튼 -->
            <Button Content="C" Grid.Row="0" Grid.Column="0" Click="Clear_Click" Margin="5"/>
            <Button Content="=" Grid.Row="4" Grid.Column="2" Click="Equals_Click" Margin="5"/>
        </Grid>
    </Grid>
</Window>

위 XAML은 <TextBox>로 숫자를 표시하고, 5행 4열 <Grid>에 버튼을 배치했어요. IsReadOnly="True"로 키보드 입력을 막고, TextAlignment="Right"로 계산기 느낌을 냈죠. 버튼은 숫자(0~9), 연산자(+, -, ×, ÷, %), 기능(C, =)으로 구성돼 있어요.

C#: 계산기 로직 구현

이제 C# 백엔드 코드를 봅시다. MainWindow 클래스에서 계산 로직을 다루며, 세 변수가 핵심이에요:

• _currentValue: 지금까지 계산된 값 (기본 0).
• _currentOperator: 선택한 연산자(+, -, ×, ÷, %).
• _isNewEntry: 새 숫자 입력 시작인지 체크.

// MainWindow.xaml.cs
using System;
using System.Windows;
using System.Windows.Controls;

namespace CalculatorApp
{
    public partial class MainWindow : Window
    {
        private double _currentValue = 0;    // 현재 계산 값
        private string _currentOperator = ""; // 현재 연산자
        private bool _isNewEntry = true;     // 새 입력 여부

        public MainWindow()
        {
            InitializeComponent(); // XAML UI 초기화
        }

        // 숫자 버튼 클릭: 표시창에 숫자 입력
        private void Number_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
            if (_isNewEntry)
            {
                Display.Text = button.Content.ToString(); // 새 숫자 시작
                _isNewEntry = false;
            }
            else
            {
                Display.Text += button.Content.ToString(); // 기존 숫자에 추가
            }
        }

        // 연산자 버튼 클릭: 연산 준비
        private void Operator_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
            if (double.TryParse(Display.Text, out double newValue))
            {
                if (!_isNewEntry)
                {
                    Calculate(newValue); // 이전 계산 수행
                }
                _currentOperator = button.Content.ToString(); // 연산자 저장
                if (_currentOperator == "%")
                {
                    // %는 현재 값을 기준으로 백분율 계산 후 즉시 적용
                    double percentageValue = _currentValue * (newValue / 100);
                    Calculate(percentageValue);
                    _currentOperator = ""; // % 계산 후 연산자 초기화
                }
                else
                {
                    _currentValue = newValue; // 일반 연산자는 값 저장
                }
                _isNewEntry = true; // 새 숫자 입력 대기
            }
        }

        // 등호 클릭: 계산 완료
        private void Equals_Click(object sender, RoutedEventArgs e)
        {
            if (double.TryParse(Display.Text, out double newValue))
            {
                Calculate(newValue); // 최종 계산
                _currentOperator = ""; // 연산자 초기화
                _isNewEntry = true; // 새 입력 대기
            }
        }

        // 계산 로직: 사칙연산 처리
        private void Calculate(double newValue)
        {
            switch (_currentOperator)
            {
                case "+": _currentValue += newValue; break; // 덧셈
                case "-": _currentValue -= newValue; break; // 뺄셈
                case "×": _currentValue *= newValue; break; // 곱셈
                case "÷":
                    if (newValue != 0) _currentValue /= newValue; // 나눗셈
                    else MessageBox.Show("0으로 나눌 수 없습니다.", "오류");
                    break;
                // %는 Operator_Click에서 즉시 처리하므로 여기선 제외
            }
            Display.Text = _currentValue.ToString(); // 결과 표시
        }

        // 지우기 버튼: 초기화
        private void Clear_Click(object sender, RoutedEventArgs e)
        {
            _currentValue = 0; // 값 초기화
            _currentOperator = ""; // 연산자 초기화
            Display.Text = "0"; // 표시창 초기화
            _isNewEntry = true; // 새 입력 대기
        }
    }
}

이 C# 코드는 숫자 입력, 연산자 처리, 계산, 초기화를 다룹니다. '%'는 실제 계산기의 백분율 기능으로, 예를 들어 "100 + 50%"는 100 + (100 × 50/100) = 150을 계산해요.

코드 동작 분석

• 숫자 입력: Number_Click으로 "123"처럼 숫자 이어 붙이기.
• 연산자: Operator_Click으로 "5 + "처럼 값과 연산자 저장.
• 백분율: "100 + 50%" → 100 + (100 × 50/100) = 150 즉시 계산.
• 계산: Calculate에서 사칙연산 처리, "= "로 결과 확인.
• 초기화: Clear_Click으로 "0"부터 다시 시작.

마무리하며

이 WPF 계산기 코드 어때요? XAML로 UI를 짜고, C#으로 로직을 넣는 기본이 잘 담겼죠. '%'를 실제 계산기의 백분율로 구현해서 더 실용적이 됐어요. C# 계산기 만들기 해보고 싶다면 이거 따라 해보세요! WPF 초보자도 이걸로 감 잡을 수 있을 거예요. 2025년에도 WPF는 닷넷 개발에 유용하니까 연습해두면 좋아요. 궁금한 거 있으면 댓글로 물어보세요!