Gewusst wie: Erstellen eines ListView-Steuerelements mit bearbeitbaren Zellen
Aktualisiert: November 2007
In diesem Beispiel wird das Erstellen eines ListView-Steuerelements mit bearbeitbaren Zellen in einem GridView-Ansichtsmodus veranschaulicht.
Beispiel
Zum Bearbeiten der Zellen einer GridViewColumn in einem GridView definieren Sie ein benutzerdefiniertes Steuerelement, das als CellTemplate für die Spalte verwendet wird.
Im folgenden Codebeispiel wird ein benutzerdefiniertes Steuerelement mit dem Namen EditBox veranschaulicht, in dem zwei Abhängigkeitseigenschaften, Value und IsEditing implementiert sind. Die Value-Eigenschaft speichert den Wert einer Zelle. Die IsEditing-Eigenschaft gibt an, ob die Zelle zurzeit bearbeitet werden kann.
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));
...
}
Im folgenden Beispiel wird ein Style für das EditBox-Steuerelement erstellt.
<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>
Um ein TextBox-Steuerelement zum Bearbeiten einer Zelle zu erstellen, implementieren Sie Adorner. Im folgenden Beispiel wird der Konstruktor für EditBoxAdorner dargestellt.
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();
}
...
}
Um zu steuern, wann der Inhalt von EditBox bearbeitet werden kann, verwenden Sie Ereignisse wie MouseUp, MouseLeave oder MouseEnter. Im folgenden Beispiel wird veranschaulicht, wie das erste MouseUp-Ereignis, das von einer EditBox empfangen wird, die EditBox auswählt, und das zweite MouseUp-Ereignis den Bearbeitungsmodus der EditBox aktiviert.
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;
}
}
...
}
Im folgenden Beispiel wird veranschaulicht, wie Sie mithilfe des MouseEnter-Ereignisses und des MouseLeave-Ereignisses bestimmen, ob der Inhalt einer Zelle bearbeitet werden kann.
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;
}
...
}
Zum Definieren einer bearbeitbaren GridViewColumn legen Sie die CellTemplate-Eigenschaft für ein EditBox-Steuerelement fest. Im folgenden Beispiel wird für die CellTemplate-Eigenschaft einer GridViewColumn ein EditBox-Steuerelements festgelegt.
<GridViewColumn Header="ID" Width="50" >
<GridViewColumn.CellTemplate>
<DataTemplate>
<l:EditBox Height="25" Value="{Binding Path=EmployeeNumber}" />
</DataTemplate>
</GridViewColumn.CellTemplate>
</GridViewColumn>
Das vollständige Beispiel finden Sie unter Beispiel zur ListView mit Bearbeitungsfunktion.