컨트롤
Windows Presentation Foundation (WPF)에서는 Button, Label, TextBox, Menu 및 ListBox와 같이 거의 모든 Windows 응용 프로그램에서 사용되는 대부분의 일반 UI 구성 요소가 제공됩니다. 지금까지는 이러한 개체를 컨트롤이라고 했습니다. WPF SDK에서는 응용 프로그램의 시각적 개체를 나타내는 모든 클래스를 대략적으로 의미하기 위해 "컨트롤"이라는 용어를 계속 사용하지만 클래스가 시각적 존재가 되기 위해 Control 클래스에서 상속될 필요가 없다는 점이 중요합니다. Control 클래스에서 상속되는 클래스에는 ControlTemplate가 포함되어 있으므로 컨트롤 소비자는 새 서브클래스를 만들 필요 없이 컨트롤 모양을 완전히 변경할 수 있습니다. 이 항목에서는 컨트롤(Control 클래스에서 상속되는 경우와 상속되지 않는 경우 모두)이 WPF에서 일반적으로 사용되는 방법에 대해 설명합니다.
이 항목에는 다음 단원이 포함되어 있습니다.
- 컨트롤의 인스턴스 만들기
- 컨트롤 모양 변경
- 이벤트에 등록
- 컨트롤의 풍부한 콘텐츠
- 관련 항목
컨트롤의 인스턴스 만들기
Extensible Application Markup Language (XAML) 또는 코드를 사용하여 응용 프로그램에 컨트롤을 추가할 수 있습니다. 다음 예제에서는 사용자에게 이름과 성을 묻는 간단한 응용 프로그램을 만드는 방법을 보여 줍니다. 이 예제에서는 XAML에서 6개의 컨트롤(2개의 레이블, 2개의 텍스트 상자 및 두 개의 단추)을 만듭니다. 모든 컨트롤을 비슷하게 만들 수 있습니다.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition Height="30"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Label>
Enter your first name:
</Label>
<TextBox Grid.Row="0" Grid.Column="1"
Name="firstName" Margin="0,5,10,5"/>
<Label Grid.Row="1" >
Enter your last name:
</Label>
<TextBox Grid.Row="1" Grid.Column="1"
Name="lastName" Margin="0,5,10,5"/>
<Button Grid.Row="2" Grid.Column="0"
Name="submit" Margin="2">
View message
</Button>
<Button Grid.Row="2" Grid.Column="1"
Name="Clear" Margin="2">
Clear Name
</Button>
</Grid>
다음 예제에서는 코드에서 동일한 응용 프로그램을 만듭니다. 간단한 설명을 위해 Grid, grid1 생성은 샘플에서 제외되었습니다. grid1에는 이전 XAML 예제와 동일한 열 및 행 정의가 있습니다.
Private firstNameLabel As Label
Private lastNameLabel As Label
Private firstName As TextBox
Private lastName As TextBox
Private submit As Button
Private clear As Button
Sub CreateControls()
firstNameLabel = New Label()
firstNameLabel.Content = "Enter your first name:"
grid1.Children.Add(firstNameLabel)
firstName = New TextBox()
firstName.Margin = New Thickness(0, 5, 10, 5)
Grid.SetColumn(firstName, 1)
grid1.Children.Add(firstName)
lastNameLabel = New Label()
lastNameLabel.Content = "Enter your last name:"
Grid.SetRow(lastNameLabel, 1)
grid1.Children.Add(lastNameLabel)
lastName = New TextBox()
lastName.Margin = New Thickness(0, 5, 10, 5)
Grid.SetColumn(lastName, 1)
Grid.SetRow(lastName, 1)
grid1.Children.Add(lastName)
submit = New Button()
submit.Content = "View message"
Grid.SetRow(submit, 2)
grid1.Children.Add(submit)
clear = New Button()
clear.Content = "Clear Name"
Grid.SetRow(clear, 2)
Grid.SetColumn(clear, 1)
grid1.Children.Add(clear)
End Sub 'CreateControls
Label firstNameLabel;
Label lastNameLabel;
TextBox firstName;
TextBox lastName;
Button submit;
Button clear;
void CreateControls()
{
firstNameLabel = new Label();
firstNameLabel.Content = "Enter your first name:";
grid1.Children.Add(firstNameLabel);
firstName = new TextBox();
firstName.Margin = new Thickness(0, 5, 10, 5);
Grid.SetColumn(firstName, 1);
grid1.Children.Add(firstName);
lastNameLabel = new Label();
lastNameLabel.Content = "Enter your last name:";
Grid.SetRow(lastNameLabel, 1);
grid1.Children.Add(lastNameLabel);
lastName = new TextBox();
lastName.Margin = new Thickness(0, 5, 10, 5);
Grid.SetColumn(lastName, 1);
Grid.SetRow(lastName, 1);
grid1.Children.Add(lastName);
submit = new Button();
submit.Content = "View message";
Grid.SetRow(submit, 2);
grid1.Children.Add(submit);
clear = new Button();
clear.Content = "Clear Name";
Grid.SetRow(clear, 2);
Grid.SetColumn(clear, 1);
grid1.Children.Add(clear);
}
컨트롤 모양 변경
응용 프로그램의 모양 및 느낌에 맞도록 컨트롤의 모양을 변경하는 것이 일반적입니다. 원하는 결과에 따라 다음 중 하나를 수행하여 컨트롤의 모양을 변경할 수 있습니다.
컨트롤의 속성 값을 변경합니다.
컨트롤의 Style을 만듭니다.
컨트롤의 새 ControlTemplate을 만듭니다.
컨트롤의 속성 값 변경
대부분의 컨트롤에는 Button의 Background와 같이 컨트롤 모양을 변경할 수 있게 하는 속성이 있습니다. XAML 및 코드에서 값 속성을 설정할 수 있습니다. 다음 예제에서는 XAML에서 Button의 Background, FontSize 및 FontWeight 속성을 설정합니다.
<Button FontSize="14" FontWeight="Bold">
<!--Set the Background property of the Button to
a LinearGradientBrush.-->
<Button.Background>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="Green" Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Button.Background>
View message
</Button>
다음 예제에서는 코드에서 동일한 속성을 설정합니다.
Dim buttonBrush As New LinearGradientBrush()
buttonBrush.StartPoint = New Point(0, 0.5)
buttonBrush.EndPoint = New Point(1, 0.5)
buttonBrush.GradientStops.Add(New GradientStop(Colors.Green, 0))
buttonBrush.GradientStops.Add(New GradientStop(Colors.White, 0.9))
submit.Background = buttonBrush
submit.FontSize = 14
submit.FontWeight = FontWeights.Bold
LinearGradientBrush buttonBrush = new LinearGradientBrush();
buttonBrush.StartPoint = new Point(0, 0.5);
buttonBrush.EndPoint = new Point(1, 0.5);
buttonBrush.GradientStops.Add(new GradientStop(Colors.Green, 0));
buttonBrush.GradientStops.Add(new GradientStop(Colors.White, 0.9));
submit.Background = buttonBrush;
submit.FontSize = 14;
submit.FontWeight = FontWeights.Bold;
컨트롤의 스타일 만들기
WPF에서는 응용 프로그램의 각 인스턴스에서 속성을 설정하는 대신에 Style을 만들어 컨트롤 모양을 전체적으로 지정할 수 있는 기능이 제공됩니다. 다음 예제에서는 응용 프로그램의 각 Button에 적용되는 Style을 만듭니다. Style 정의는 일반적으로 FrameworkElement의 Resources 속성과 같은 XAML의 ResourceDictionary에서 정의됩니다.
<Style TargetType="Button">
<Setter Property="FontSize" Value="14"/>
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="Green" Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
또한 스타일에 키를 할당하고 컨트롤의 Style 속성에서 해당 키를 지정하여 특정 형식의 특정 컨트롤에만 스타일을 적용할 수 있습니다. 스타일에 대한 자세한 내용은 스타일 지정 및 템플릿을 참조하십시오.
ControlTemplate 만들기
Style을 사용하면 여러 컨트롤에서 속성을 동시에 설정할 수 있지만 경우에 따라서는 Style을 만들어 수행할 수 있는 범위를 넘어서 Control의 모양을 사용자 지정하고 싶을 때가 있습니다. Control 클래스에서 상속되는 클래스에는 Control의 구조와 모양을 정의하는 ControlTemplate이 있습니다. Control의 Template 속성은 공용이므로 기본값과 다른 ControlTemplate을 Control에 제공할 수 있습니다. 일반적으로 Control의 모양을 사용자 지정하기 위해 컨트롤에서 상속하는 대신에 Control에 대한 새로운 ControlTemplate을 지정할 수 있습니다.
매우 일반적인 컨트롤인 Button의 경우를 살펴봅니다. Button의 기본 동작은 사용자가 클릭했을 때 응용 프로그램에서 일정한 작업을 수행할 수 있게 하는 것입니다. 기본적으로 WPF에서 Button은 볼록한 사각형으로 표시됩니다. 응용 프로그램을 개발하면서 단추의 클릭 이벤트를 처리하여 Button의 동작을 활용하려고 하지만 단추 속성 변경으로 수행할 수 없는 단추 모양 변경이 필요할 수도 있습니다. 이러한 경우 ControlTemplate을 새로 만들 수 있습니다.
다음 예제에서는 Button에 대한 ControlTemplate을 만듭니다. ControlTemplate은 둥근 모서리와 그라데이션 배경이 있는 Button을 만듭니다. ControlTemplate에는 Border가 포함되어 있으며 이 개체의 Background는 두 개의 GradientStop 개체가 있는 LinearGradientBrush입니다. 첫 번째 GradientStop은 데이터 바인딩을 사용하여 GradientStop의 Color 속성을 단추의 배경색에 바인딩합니다. Button의 Background 속성을 설정할 경우 해당 값의 색이 첫 번째 GradientStop으로 사용됩니다. 데이터 바인딩에 대한 자세한 내용은 데이터 바인딩 개요를 참조하십시오. 또한 이 예제에서는 IsPressed가 true일 경우 Button의 모양을 변경하는 Trigger를 만듭니다.
<!--Define a template that creates a gradient-colored button.-->
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border
x:Name="Border"
CornerRadius="20"
BorderThickness="1"
BorderBrush="Black">
<Border.Background>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"
Offset="0.0" />
<GradientStop Color="White" Offset="0.9" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
Margin="2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
RecognizesAccessKey="True"/>
</Border>
<ControlTemplate.Triggers>
<!--Change the appearance of
the button when the user clicks it.-->
<Trigger Property="IsPressed" Value="true">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<LinearGradientBrush StartPoint="0,0.5"
EndPoint="1,0.5">
<GradientStop Color="{Binding Background.Color,
RelativeSource={RelativeSource TemplatedParent}}"
Offset="0.0" />
<GradientStop Color="DarkSlateGray" Offset="0.9" />
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
...
<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName"
Background="Green">View message</Button>
.gif "참고") 참고 |
|---|
예제가 제대로 작동하려면 Button의 Background 속성은 SolidColorBrush로 설정되어야 합니다. |
이벤트에 등록
XAML 또는 코드를 사용하여 컨트롤의 이벤트를 구독해야 하지만 코드에서만 이벤트를 처리할 수 있습니다. 다음 예제에서는 Button의 Click 이벤트를 구독하는 방법을 보여 줍니다.
<Button Grid.Row="2" Grid.ColumnSpan="2" Name="submitName" Click="submit_Click"
Background="Green">View message</Button>
AddHandler submit.Click, AddressOf submit_Click
submit.Click += new RoutedEventHandler(submit_Click);
다음 예제에서는 Button의 Click 이벤트를 처리합니다.
Private Sub submit_Click(ByVal sender As Object, ByVal e As RoutedEventArgs)
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text)
End Sub 'submit_Click
void submit_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello, " + firstName.Text + " " + lastName.Text);
}
컨트롤의 풍부한 콘텐츠
Control 클래스에서 상속되는 대부분의 클래스는 풍부한 콘텐츠를 포함할 수 있습니다. 예를 들어 Label은 문자열, Image 또는 Panel과 같은 모든 개체를 포함할 수 있습니다. 다음 클래스는 풍부한 콘텐츠에 대한 지원을 제공하며 WPF의 대부분의 컨트롤에 대한 기본 클래스로 작동합니다.
ContentControl-- 이 클래스에서 상속되는 클래스의 몇 가지 예로는 Label, Button 및 ToolTip이 있습니다.
ItemsControl-- 이 클래스에서 상속되는 클래스의 몇 가지 예로는 ListBox, Menu 및 StatusBar가 있습니다.
HeaderedContentControl-- 이 클래스에서 상속되는 클래스의 몇 가지 예로는 TabItem, GroupBox 및 Expander가 있습니다.
HeaderedItemsControl--이 클래스에서 상속되는 클래스의 몇 가지 예로는 MenuItem, TreeViewItem 및 ToolBar가 있습니다.
이러한 기본 클래스에 대한 자세한 내용은 WPF 콘텐츠 모델을 참조하십시오.