Cómo: Crear un control ListView con celdas modificables
Actualización: noviembre 2007
En este ejemplo se muestra cómo crear un control ListView en un modo de vista GridView que tiene celdas modificables.
Ejemplo
Para editar las celdas de una GridViewColumn en una GridView, defina un control personalizado para utilizarlo como CellTemplate de la columna.
En el ejemplo siguiente se muestra un control personalizado denominado EditBox, que implementa dos propiedades de dependencia: Value e IsEditing. La propiedad Value almacena el valor de una celda. La propiedad IsEditing especifica si actualmente la celda se puede modificar.
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));
...
}
En el ejemplo siguiente se crea un estilo (Style) para el control EditBox.
<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>
Para crear un control TextBox a fin de editar una celda, implemente Adorner. En el ejemplo siguiente se muestra el constructor de 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();
}
...
}
Para controlar cuándo se puede editar el control EditBox, utilice eventos tales como MouseUp, MouseLeave o MouseEnter. En el ejemplo siguiente se muestra cómo el primer evento MouseUp que es recibido por EditBox selecciona EditBox, y el segundo evento MouseUp pone EditBox en el modo de edición.
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;
}
}
...
}
En el ejemplo siguiente se muestra cómo utilizar los eventos MouseEnter y MouseLeave para determinar si una celda se puede editar.
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;
}
...
}
Para definir una GridViewColumn que se pueda editar, establezca la propiedad CellTemplate en un control EditBox. En el siguiente ejemplo se especifica la propiedad CellTemplate de un control GridViewColumn en un control EditBox.
<GridViewColumn Header="ID" Width="50" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<l:EditBox Height="25" Value="{Binding Path=EmployeeNumber}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Para obtener el ejemplo completo, vea Ejemplo ListView with Editing Capability.
Vea también
Conceptos
Información general sobre GridView