방법: 편집 가능한 셀이 있는 ListView 만들기
업데이트: 2007년 11월
이 예제에서는 GridView 뷰 모드에서 편집 가능한 셀이 있는 ListView 컨트롤을 만드는 방법을 보여 줍니다.
예제
GridView에서 GridViewColumn의 셀을 편집하려면 열의 CellTemplate으로 사용할 사용자 지정 컨트롤을 정의합니다.
다음 예제에서는 두 개의 종속성 속성인 Value와 IsEditing을 구현하는 EditBox라는 사용자 지정 컨트롤을 보여 줍니다. Value 속성에는 셀 값이 저장됩니다. IsEditing 속성은 셀이 현재 편집 가능한지 여부를 지정합니다.
public class EditBox : Control
{
...
public static readonly DependencyProperty ValueProperty =
DependencyProperty.Register(
"Value",
typeof(object),
typeof(EditBox),
new FrameworkPropertyMetadata(null));
...
public static DependencyProperty IsEditingProperty =
DependencyProperty.Register(
"IsEditing",
typeof(bool),
typeof(EditBox),
new FrameworkPropertyMetadata(false));
...
}
다음 예제에서는 EditBox 컨트롤에 대한 Style을 만듭니다.
<Style x:Key="{x:Type l:EditBox}" TargetType="{x:Type l:EditBox}" >
<Setter Property="HorizontalAlignment" Value="Left" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type l:EditBox}">
<TextBlock x:Name="PART_TextBlockPart"
Text="{Binding Path=Value,RelativeSource =
{RelativeSource TemplatedParent}}">
</TextBlock>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
셀 편집을 위해 TextBox 컨트롤을 만들려면 Adorner를 구현합니다. 다음 예제에서는 EditBoxAdorner에 대한 생성자를 보여 줍니다.
internal sealed class EditBoxAdorner : Adorner
{
...
public EditBoxAdorner(UIElement adornedElement,
UIElement adorningElement): base(adornedElement)
{
_textBox = adorningElement as TextBox;
Debug.Assert(_textBox != null, "No TextBox!");
_visualChildren = new VisualCollection(this);
BuildTextBox();
}
...
}
EditBox의 편집 가능 시점을 제어하려면 MouseUp, MouseLeave 또는 MouseEnter와 같은 이벤트를 사용합니다. 다음 예제에서는 EditBox가 수신한 첫 번째 MouseUp 이벤트가 EditBox를 선택하고 두 번째 MouseUp 이벤트가 EditBox를 편집 모드로 전환하는 방법을 보여 줍니다.
public class EditBox : Control
{
...
protected override void OnMouseUp(MouseButtonEventArgs e)
{
base.OnMouseUp(e);
if (e.ChangedButton == MouseButton.Right ||
e.ChangedButton == MouseButton.Middle)
return;
if (!IsEditing)
{
if (!e.Handled && (_canBeEdit || _isMouseWithinScope))
{
IsEditing = true;
}
//If the first MouseUp event selects the parent ListViewItem,
//then the second MouseUp event puts the EditBox in editing
//mode
if (IsParentSelected)
_isMouseWithinScope = true;
}
}
...
}
다음 예제에서는 MouseEnter 및 MouseLeave 이벤트를 사용하여 셀의 편집 가능 여부를 지정하는 방법을 보여 줍니다.
public class EditBox : Control
{
...
protected override void OnMouseEnter(MouseEventArgs e)
{
base.OnMouseEnter(e);
if (!IsEditing && IsParentSelected)
{
_canBeEdit = true;
}
}
...
protected override void OnMouseLeave(MouseEventArgs e)
{
base.OnMouseLeave(e);
_isMouseWithinScope = false;
_canBeEdit = false;
}
...
}
편집을 허용하는 GridViewColumn을 정의하려면 CellTemplate 속성을 EditBox 컨트롤로 설정합니다. 다음 예제에서는 GridViewColumn의 CellTemplate 속성을 EditBox 컨트롤로 지정합니다.
<GridViewColumn Header="ID" Width="50" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<l:EditBox Height="25" Value="{Binding Path=EmployeeNumber}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
전체 샘플을 보려면 편집 기능이 있는 ListView 샘플을 참조하십시오.