The Button control

Button 컨트롤이 없는 GUI framework 는 없을 것입니다. WPF 도 마찬가지로 좋은 Button 컨트롤을 제공합니다. 아주 유연하게 만들어 져서 원하는 것을 제한없이 표현할 수 있습니다. 일단 간단한 예제부터 시작해 보겠습니다.

기본 버튼

다른 WPF 컨트롤처럼 Button 도 단순히 Window 에 태그만 추가함으로써 만들 수 있습니다. 태그 사이에 텍스트(혹은 다른 컨트롤) 을 넣으면 Button 의 표시 내용이 됩니다.

<Button>Hello, world!</Button>

사용하기가 무척 간단 함을 알 수 있습니다. 물론 Button 이 아직은 눌러도 아무 것도 하지 않지만, 커서를 Button 위에 가져 가면 기본 기능으로서 커서에 자동으로 반응을 합니다. 더 나아가 이제는 Click 이벤트를 이용해서 Button 무엇을 하도록 만들어 보겠습니다 (이벤트를 이용하는 것에 대해서는 XAML 에서 이벤트를 활용하는 것에 대한 글을 참조하기 바랍니다).

<Button Click="HelloWorldButton_Click">Hello, World!</Button>

코드 부분에 클릭 이벤트를 처리하는 해당 메소드를 추가해야 합니다.

private void HelloWorldButton_Click(object sender, RoutedEventArgs e)
{
    MessageBox.Show("Hello, world!");
}

비로소 가장 기본적인 Button 이 만들어 졌습니다. Button 을 클릭하면 메시지가 나타날 것입니다.

텍스트 포맷

내부적으로, Button 의 Content 로 주어진 단순 텍스트는 자동으로 TextBlock 컨트롤로 바뀌는데, 이는 다른 데서와 같이 텍스트 포맷팅을 할 수 있다는 얘기입니다. Button 컨트롤은 이를 위해 여러가지 속성들을 제공 합니다. 대표적으로 Foreground, Background, FontWeight 등을 들 수 있습니다. 이들을 통해서 Button 컨트롤에 들어 가는 텍스트의 포맷팅을 매우 쉽게 바꿀 수 있습니다.

<Button Background="Beige" Foreground="Blue" FontWeight="Bold">Formatted Button</Button>

물론, Button 이 제공하는 이들 속성들을 사용하면 같은 포맷이 Button 의 모든 텍스트에 다같이 적용 된다는 한계가 있습니다. 다음에서는 이런 한계에 제한되지 않는 보다 유연한 포맷팅을 소개합니다.

고급 Button

벌써 여러번 언급했지만, WPF 의 매우 좋은 장점 중의 하나는 WPF 컨트롤 안에 단순 텍스트 대신 다른 WPF 컨트롤 들을 넣을 수 있다는 것입니다. 이는 Button 에 똑같이 포맷된 단순 텍스트만 넣는 것이 아니라 다르게 포맷된 여러개의 텍스트 컨트롤 들을 넣을 수 있다는 얘기입니다. WPF 에서 제공하는 Button 은 한개의 컨트롤만 가질 수 있지만, 이를 Panel 로 하면 컨트롤 들을 필요한 만큼 넣을 수 있습니다. 이를 활용하면 다양한 형태의 Button 을 만들 수 있습니다.

<Button>
    <StackPanel Orientation="Horizontal">
    <TextBlock>Formatted </TextBlock>
    <TextBlock Foreground="Blue" FontWeight="Bold" Margin="2,0">Button</TextBlock>
    <TextBlock Foreground="Gray" FontStyle="Italic">[Various]</TextBlock>
    </StackPanel>
</Button>

물론 이는 텍스트에만 제한된 것이 아닙니다. 무엇이든 원하는 것을 Button 안에 넣을 수 있습니다. 그러면 많은 이들이 자연스럽게 묻는 것이 있습니다. Button 에 그림도 넣을 수 있나요?

Button 에 그림 넣기 (ImageButton)

다른 UI Framework 들을 보면 기본 Button 과 더불어 추가 기능을 하는 다른 종류의 Button 들을 따로 제공을 하는 것을 볼 수 있습니다. 이 중 하나가 ImageButton 인데, 이름에서도 알 수 있듯이 보통 텍스트 앞에 그림을 넣을 수 있는 기능을 가진 Button 입니다. 하지만 WPF 에서는 다른 Button 을 추가할 필요가 없습니다. Button 안에 다른 컨트롤 들을 넣을 수 있기 때문입니다. 다음에서 보듯이 그냥 Button 안에 Image 컨트롤을 넣으면 됩니다.

<Button Padding="5">  
    <StackPanel Orientation="Horizontal">  
    <Image Source="/WpfTutorialSamples;component/Images/help.png" />  
    <TextBlock Margin="5,0">Help</TextBlock>  
    </StackPanel>  
</Button>

보듯이 WPF 에서는 ImageButton 을 만드는 것이 정말 간단합니다. 그리고 위치도 자유롭게 바꿀 수 있습니다. 예를 들면 간단하게 그림을 텍스트 다음에 오게 할 수 있습니다.

패딩 (Padding)

위의 예제에서 WPF Framework 에서 제공하는 Button 은 패딩을 자동으로 제공하지 않음을 보았을 것입니다. 따라서 텍스트가 여백이 없이 표시 됩니다. 다른 데 (웹페이지나 다른 프로그램 등)서 제공되는 Button 들과 견주어서 좀 이상해 보일 수 있습니다. 보통은 여백이 없는 Button 들이 없기 때문입니다. 하지만 걱정할 필요는 없습니다. Button 이 제공하는 Padding 속성을 이용하면 됩니다.

<Button Padding="5,2">Hello, World!</Button>

위 예제는 양 측면으로 5 픽셀, 위 아래로는 2 픽셀의 여백을 줍니다. 하지만 Button 마다 일일이 여백을 설정하는 것은 힘든 일입니다. 그래서 같은 여백을 프로그램 전체 혹은 특정 Window 전체에 적용할 수 있는 기능이 제공됩니다. Style 을 이용하는데 (나중에 좀 더 상세히 다룹니다) 다음 예제에서는 Window 의 Window.Resources 이란 속성을 이용해서 Window 전체에 여백을 적용하는 것을 보여 줍니다.

<Window.Resources>
    <Style TargetType="{x:Type Button}">
    <Setter Property="Padding" Value="5,2"/>
    </Style>
</Window.Resources>

이 여백 설정은 모든 Button 에 적용될 것입니다. 하지만 Button 에 따로 Padding 속성을 설정하면 전체 설정 보다 우선 됩니다. 다음을 보면 공동으로 여백이 설정된 Button 들이 어떤 모습인지 보여 줍니다.

요약

이 글에서 볼 수 있듯이 WPF Framework 에서 제공하는 Button 을 사용하는 것은 매우 쉽습니다. 또한 Button 이 표현할 수 있는 내용이 무궁무진 함을 알 수 있습니다.