Como: Criar um ListView com células editáveis
Este exemplo mostra como criar um controle ListView em um modo de exibição GridView que tem células editáveis.
Exemplo
Para editar as células de uma GridViewColumn em um GridView, defina um controle personalizado para usar como o CellTemplate da coluna.
O exemplo a seguir mostra um controle personalizado chamado EditBox, que implementa duas propriedades de dependência, Value e IsEditing. A propriedade Value armazena o valor de uma célula. A propriedade IsEditing especifica se a célula é atualmente editável.
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));
...
}
O exemplo a seguir cria um Style para o controle 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 criar um controle TextBox para editar uma célula, implemente um Adorner. O exemplo a seguir mostra o construtor para o 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 quando o EditBox é editável, use eventos como MouseUp, MouseLeave, ou MouseEnter. O exemplo a seguir mostra como o primeiro evento MouseUp que é recebido por uma EditBox seleciona a EditBox, e o segundo evento MouseUp coloca a EditBox no modo de edição.
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;
}
}
...
}
O exemplo a seguir mostra como você usa os eventos MouseEnter e MouseLeave para determinar se uma célula está qualificada para edição.
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 uma GridViewColumn que permite edição, defina a propriedade CellTemplate em um controle EditBox. O exemplo a seguir especifica a propriedade CellTemplate de uma GridViewColumn como um controle EditBox.
<GridViewColumn Header="ID" Width="50" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<l:EditBox Height="25" Value="{Binding Path=EmployeeNumber}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
For the complete sample, see Exibição em Lista com exemplo do recurso de edição.