WPF 커스텀 텍스트 박스와 원형 버튼 구현하기

WPF로 멋진 텍스트 박스와 원형 버튼 만들기

안녕하세요, 여러분! 오늘은 WPF에서 좀 더 멋지고 현대적인 UI를 만들어보려고 해요. 바로 하단에 빨간색 라인이 있는 텍스트 박스와 깔끔한 원형 버튼을 구현하는 방법이에요. 이런 요소들은 구글 머티리얼 디자인 같은 모던한 스타일에서 자주 보이죠. 초보자도 쉽게 따라 할 수 있게끔, XAML과 C#로 차근차근 알려드릴게요. 같이 만들어보면서 재밌게 배워볼까요?

하단 레드 라인 텍스트 박스 만들기

먼저, 텍스트 박스를 기본 모양에서 탈출시켜볼게요. 외곽선 없이 하단에만 빨간색 라인을 넣고, 배경은 투명하게 해서 깔끔하게 만들 거예요. WPF의 템플릿 기능 덕분에 이런 커스터마이징이 가능하답니다!

<TextBox x:Name="customTextBox" 
         BorderThickness="0"
         Padding="5,5,5,8"
         FontSize="16"
         Background="Transparent">
    <TextBox.Template>
        <ControlTemplate TargetType="{x:Type TextBox}">
            <Border Background="{TemplateBinding Background}"
                    BorderThickness="0">
                <Grid>
                    <ScrollViewer x:Name="PART_ContentHost" 
                                 Margin="0,0,0,5"/>
                    <Rectangle Height="2" 
                             Fill="Red" 
                             VerticalAlignment="Bottom"/>
                </Grid>
            </Border>
        </ControlTemplate>
    </TextBox.Template>
</TextBox>

이 코드에서 중요한 포인트는요:

1. 투명 배경: Background="Transparent"로 깔끔하게!
2. 테두리 없애기: BorderThickness="0"으로 기본 선 제거.
3. 빨간 라인: Rectangle로 하단에 선을 추가했어요.

이렇게 하면 모던한 느낌의 텍스트 박스가 완성돼요!

원형 버튼 구현하기

다음은 원형 버튼이에요. 네모난 버튼은 이제 그만, 둥글고 예쁜 버튼을 만들어볼게요. Ellipse를 써서 쉽게 원을 만들 수 있어요.

<Button x:Name="circleButton" 
        Width="80" 
        Height="80"
        Click="CircleButton_Click">
    <Button.Template>
        <ControlTemplate TargetType="Button">
            <Grid>
                <Ellipse Fill="LightBlue" />
                <Ellipse>
                    <Ellipse.Fill>
                        <RadialGradientBrush>
                            <GradientStop Color="#20000000" Offset="0.9"/>
                            <GradientStop Color="#10000000" Offset="1.0"/>
                        </RadialGradientBrush>
                    </Ellipse.Fill>
                </Ellipse>
                <ContentPresenter HorizontalAlignment="Center" 
                                 VerticalAlignment="Center"/>
            </Grid>
        </ControlTemplate>
    </Button.Template>
    <TextBlock Text="확인" FontSize="16" />
</Button>

여기서 핵심은:

1. 원 모양: Width와 Height를 똑같이 해서 원형으로!
2. 그라데이션: RadialGradientBrush로 입체감 더하기.
3. 텍스트 중앙: ContentPresenter로 "확인"을 가운데에.

버튼 클릭 이벤트 넣기

이제 버튼을 누르면 텍스트 박스 내용을 보여주는 기능을 추가해볼게요. 간단한 C# 코드예요!

private void CircleButton_Click(object sender, RoutedEventArgs e)
{
    string textContent = customTextBox.Text;
    MessageBox.Show(textContent, "텍스트 박스 내용", MessageBoxButton.OK, MessageBoxImage.Information);
}

버튼을 누르면 텍스트 박스에 쓴 내용이 메시지로 팝업돼요. 실무에서도 이런 식으로 사용자 입력을 처리할 수 있죠!

전체 코드로 한 번에 보기

이제 전체를 하나로 묶어볼게요. MainWindow.xaml에 이렇게 넣으면 돼요:

<Window x:Class="CustomControlsDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="커스텀 컨트롤 데모" Height="350" Width="500">
    <Grid Margin="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="20"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <TextBox x:Name="customTextBox" 
                 BorderThickness="0"
                 Padding="5,5,5,8"
                 FontSize="16"
                 Background="Transparent">
            <TextBox.Template>
                <ControlTemplate TargetType="{x:Type TextBox}">
                    <Border Background="{TemplateBinding Background}"
                            BorderThickness="0">
                        <Grid>
                            <ScrollViewer x:Name="PART_ContentHost" 
                                         Margin="0,0,0,5"/>
                            <Rectangle Height="2" 
                                     Fill="Red" 
                                     VerticalAlignment="Bottom"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </TextBox.Template>
        </TextBox>
        <Button x:Name="circleButton" 
                Grid.Row="2" 
                Width="80" 
                Height="80"
                Click="CircleButton_Click">
            <Button.Template>
                <ControlTemplate TargetType="Button">
                    <Grid>
                        <Ellipse Fill="LightBlue" />
                        <Ellipse>
                            <Ellipse.Fill>
                                <RadialGradientBrush>
                                    <GradientStop Color="#20000000" Offset="0.9"/>
                                    <GradientStop Color="#10000000" Offset="1.0"/>
                                </RadialGradientBrush>
                            </Ellipse.Fill>
                        </Ellipse>
                        <ContentPresenter HorizontalAlignment="Center" 
                                         VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Button.Template>
            <TextBlock Text="확인" FontSize="16" />
        </Button>
    </Grid>
</Window>

그리고 MainWindow.xaml.cs는 위에 이벤트 코드 그대로 넣으면 돼요!

더 멋지게 꾸며볼까?

이 기본 코드를 기반으로 더 멋지게 만들 수도 있어요. 예를 들어:

1. 텍스트 박스에 포커스 오면 라인 색깔 바꾸기.
2. 버튼에 마우스 올리면 색깔 변하는 효과 넣기.
3. 입력값이 잘못됐을 때 라인 색깔로 알려주기.

이런 아이디어로 여러분만의 커스텀 컨트롤을 만들어보세요!

마무리하며

WPF의 템플릿 기능은 진짜 강력하죠? 하단에 빨간 라인이 있는 텍스트 박스와 원형 버튼, 이렇게 쉽게 만들 수 있어요. 모던한 UI 디자인을 앱에 적용하고 싶다면 꼭 연습해보세요. 저도 이걸로 예쁜 UI 만들어서 뿌듯했답니다! 궁금한 거 있으면 댓글로 물어보세요. 같이 모던 UI 마스터해봐요!