Comment : créer un ListView avec des cellules modifiables
Mise à jour : novembre 2007
Cet exemple montre comment créer un contrôle ListView dans un mode d'affichage GridView disposant de cellules modifiables.
Exemple
Pour modifier les cellules d'un GridViewColumn dans un GridView, définissez un contrôle personnalisé à utiliser comme CellTemplate de la colonne.
L'exemple suivant présente un contrôle personnalisé nommé EditBox, qui implémente deux propriétés de dépendance, Value et IsEditing. La propriété Value stocke la valeur d'une cellule. La propriété IsEditing spécifie si la cellule est actuellement modifiable.
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));
...
}
L'exemple suivant crée un Style pour le contrôle 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>
Pour créer un contrôle TextBox pour modifier une cellule, implémentez un Adorner. L'exemple suivant présente le constructeur pour 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();
}
...
}
Pour contrôler lorsque EditBox est modifiable, utilisez des événements comme MouseUp, MouseLeave ou MouseEnter. L'exemple suivant montre comment le premier événement MouseUp qui est reçu par un EditBox sélectionne le EditBox, et comment le deuxième événement MouseUp place le EditBox en mode de modification.
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;
}
}
...
}
L'exemple suivant montre comment vous utilisez les événements MouseEnter et MouseLeave pour déterminer si une cellule peut être modifiée.
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;
}
...
}
Pour définir un GridViewColumn qui autorise la modification, affectez à la propriété CellTemplate un contrôle EditBox. L'exemple suivant spécifie la propriété CellTemplate d'un GridViewColumn comme un contrôle EditBox.
<GridViewColumn Header="ID" Width="50" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<l:EditBox Height="25" Value="{Binding Path=EmployeeNumber}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Pour l'exemple complet, consultez ListView avec fonction de modification, exemple.