Inline-editing TextBlock in eine ListBox mit Daten-Vorlage (WPF)

Verwendung von WPF, ich habe eine ListBox Kontrolle mit einem DataTemplate drin. Die entsprechenden XAML-code ist unten dargestellt:

<ListBox Name="_todoList" Grid.Row="1" BorderThickness="2"
     Drop="todoList_Drop" AllowDrop="True"
     HorizontalContentAlignment="Stretch"
     ScrollViewer.HorizontalScrollBarVisibility="Disabled"                 
     AlternationCount="2">
     <ListBox.ItemTemplate>
         <DataTemplate>
             <Grid Margin="4">
                 <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="*" />
                 </Grid.ColumnDefinitions>
                 <CheckBox Grid.Column="0" Checked="CheckBox_Check" />
                 <TextBlock Name="descriptionBlock"
                            Grid.Column="1"
                            Text="{Binding Description}"
                            Cursor="Hand" FontSize="14"
                            ToolTip="{Binding Description}"
                            MouseDown="TextBlock_MouseDown" />                      
             </Grid>
         </DataTemplate>
     </ListBox.ItemTemplate>
</ListBox>

Was ich versuche zu tun ist, machen die TextBlock reagieren auf eine (Doppel -) klicken Sie auf die wandelt es in eine TextBox. Der Benutzer kann dann Bearbeiten Sie die Beschreibung, und drücken Sie die EINGABETASTE oder den Fokus ändern, um die änderung vorzunehmen.

Ich habe versucht, das hinzufügen einer TextBox element in der gleichen position wie der TextBlock und seine Sichtbarkeit Collapsed, aber ich weiß nicht, wie Sie navigieren, um die richtige TextBox wenn der Benutzer geklickt hat, auf eine TextBlock. Das heißt, ich weiß der Benutzer geklickt hat, auf eine bestimmte TextBlock jetzt die TextBox muss ich zeigen?

Jede Hilfe würde geschätzt werden, stark,

-Ko9

Als tip, anstatt pre tags und explizit die Flucht Spitzen Klammern, können Sie einfach fügen Sie der XAML direkt in den editor, und verwenden Sie die 101010-Taste, um format als code.

InformationsquelleAutor Ko9 | 2010-01-18

c#datatemplate listbox wpf xaml

15

Was ich getan habe in diesen Situationen verwendet wird, die XAML-Hierarchie zu bestimmen, welches element ein - /ausblenden. Etwas entlang der Linien von:
```
<Grid>
  <TextBlock MouseDown="txtblk_MouseDown" />
  <TextBox LostFocus="txtbox_LostFocus" Visibility="Collapsed" />
</Grid>
```
mit dem code:
```
protected void txtblk_MouseDown(object sender, MouseButtonEventArgs e)
{
    TextBox txt = (TextBox)((Grid)((TextBlock)sender).Parent).Children[1];
    txt.Visibility = Visibility.Visible;
    ((TextBlock)sender).Visibility = Visibility.Collapsed;
}

protected void txtbox_LostFocus(object sender, RoutedEventArgs e)
{
    TextBlock tb = (TextBlock)((Grid)((TextBox)sender).Parent).Children[0];
    tb.Text = ((TextBox)sender).Text;
    tb.Visibility = Visibility.Visible;
    ((TextBox)sender).Visibility = Visibility.Collapsed;
}
```
Ich immer Sachen wie diese, die ich werde, um Wiederverwendung in einem UserControl, die ich hinzufügen können zusätzliche Fehlerbehandlung, und garantieren, dass die Grid enthält nur zwei Elemente, und die Reihenfolge von Ihnen wird sich nie ändern.

EDIT: Außerdem, wenn dieses in einem Benutzersteuerelement können Sie erstellen eine Text Eigenschaft für jede Instanz, also können Sie den Namen jeder ein, und verweisen Sie auf den text direkt und ohne Angeln für den aktuellen Wert durch die ((TextBox)myGrid.Children[1]).Text Gießen. Dadurch wird Ihr code viel effizienter und sauberer. Wenn Sie es schaffen in ein Benutzersteuerelement erstellen, können Sie auch Namen für die TextBlock und TextBox Elemente, also kein casting erforderlich.
- das mag seltsam klingen, könnte Sie Bearbeiten Ihre Antwort... ich klickte vorzeitig ab, dann werden Sie meine Stimme, denn ich war nicht sicher, ob das war, was ich war, nach. Ich habe dann versucht, nach einem bis Stimme wieder, weil es war, was ich brauchte und Stack Overflow sagt, ich kann nicht abstimmen, post, es sei denn, es wurde bearbeitet. daher die Anfrage. Cheers, sehr nützlicher Beitrag, wie es sich herausstellte.
InformationsquelleAutor Nathan Wheeler

Beziehen sich auf die Nathan Wheeler ' s code snippets, die folgende codes sind komplette UserControl-Quelle, codiert ich gestern.
Vor allem, Verbindliche Themen angesprochen werden.
Nathan, der code ist einfach zu Folgen, muss aber einige Hilfe in Bezug auf die Arbeit mit datengebundenen text.

ClickToEditTextboxControl.xaml.cs

public partial class ClickToEditTextboxControl : UserControl
{
    public ClickToEditTextboxControl()
    {
        InitializeComponent();
    }

    public string Text
    {
        get { return (string)GetValue(TextProperty); }
        set { SetValue(TextProperty, value); }
    }

    //Using a DependencyProperty as the backing store for Text.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty TextProperty =
        DependencyProperty.Register("Text", typeof(string), typeof(ClickToEditTextboxControl), new UIPropertyMetadata());

    private void textBoxName_LostFocus(object sender, RoutedEventArgs e)
    {
        var txtBlock = (TextBlock)((Grid)((TextBox)sender).Parent).Children[0];

        txtBlock.Visibility = Visibility.Visible;
        ((TextBox)sender).Visibility = Visibility.Collapsed;
    }

    private void textBlockName_MouseDown(object sender, MouseButtonEventArgs e)
    {
        var grid = ((Grid) ((TextBlock) sender).Parent);
        var tbx = (TextBox)grid.Children[1];
        ((TextBlock)sender).Visibility = Visibility.Collapsed;
        tbx.Visibility = Visibility.Visible;

        this.Dispatcher.BeginInvoke((Action)(() => Keyboard.Focus(tbx)), DispatcherPriority.Render);
    }

    private void TextBoxKeyDown(object sender, KeyEventArgs e)
    {
        if (e == null)
            return;

        if (e.Key == Key.Return)
        {
            textBoxName_LostFocus(sender, null);
        }
    }
}

ClickToEditTextboxControl.xaml

<UserControl x:Class="Template.ClickToEditTextboxControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d" 
         Name="root"
         d:DesignHeight="30" d:DesignWidth="100">
<Grid>
    <TextBlock Name="textBlockName" Text="{Binding ElementName=root, Path=Text}" VerticalAlignment="Center" MouseDown="textBlockName_MouseDown" />
    <TextBox Name="textBoxName" Text="{Binding ElementName=root, Path=Text, UpdateSourceTrigger=PropertyChanged}" Visibility="Collapsed" LostFocus="textBoxName_LostFocus" KeyDown ="TextBoxKeyDown"/>
</Grid>
</UserControl>

Und, schließlich, Sie können verwenden Sie dieses Steuerelement in XAML wie folgt:

<Template1:ClickToEditTextboxControl Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" MinWidth="40" Height="23" />

Beachten Sie, dass Mode=TwoWay, UpdateSourceTrigger=PropertyChanged eingestellt ist. Es ermöglicht das ändern der gebundenen Wert in jeder Art.

Vielen Dank für diese Lösung, ich benutze es über DataTemplate für meine ListBox, aber der neue Wert wird nicht aktualisiert in der Quelle. Die ItemsSource ist der Typ ObservableCollection<string>. Irgendwelche Ideen?

InformationsquelleAutor

4

Der ideale Weg, um dies zu tun wäre eine ClickEditableTextBlock - Steuerung, die standardmäßig rendert als ein TextBlock, sondern zeigt ein Textfeld wenn der Benutzer darauf klickt. Da eine gegebene ClickEditableTextBlock hat nur einen TextBlock und eine TextBox, Sie haben nicht das passende Problem. Dann verwenden Sie ein ClickEditableTextBlock anstatt einzelne Textblöcke und Textfelder in Ihren DataTemplate.

Dies hat den Nebeneffekt, dass die Kapselung der Funktionalität in einer Kontrolle, so dass Sie nicht belasten Ihre Haupt-Fenster code-behind-mit der edit-Verhalten, plus können Sie ganz einfach wiederverwenden in anderen Vorlagen.

Wenn das klingt wie zu viel Mühe, können Sie Tag oder eine angefügte Eigenschaft zuordnen jeder TextBlock mit einer TextBox:
```
<DataTemplate>
  <StackPanel>
    <TextBlock Text="whatever"
               MouseDown="TextBlock_MouseDown"
               Tag="{Binding ElementName=tb}" />
    <TextBox Name="tb" />
  </StackPanel>
</DataTemplate>
```
Beachten Sie die Verwendung von {Binding ElementName=tb} auf den Tag zu beziehen, um das Textfeld mit der Bezeichnung tb.

Und im code-behind:
```
private void TextBlock_MouseDown(object sender, MouseButtonEventArgs e)
{
  FrameworkElement textBlock = (FrameworkElement)sender;
  TextBox editBox = (TextBox)(textBlock.Tag);
  editBox.Text = "Wow!";  //or set visible or whatever
}
```
(Um zu vermeiden die Verwendung der böse Tag-Eigenschaft, können Sie definieren eine benutzerdefinierte angefügte Eigenschaft tragen die TextBox binden, aber für die Kürze, ich bin mir nicht zeigen, dass.)

InformationsquelleAutor itowlson

Wenn ich darf ergänzen, um die (Doppel -) Teil der ursprünglichen Frage, Youngjae ' s beantworten Sie die folgenden Ersatz in der xaml-Datei:

<TextBlock Name="textBlockName" Text="{Binding ElementName=root, Path=Text}" VerticalAlignment="Center" MouseDown="textBlockName_MouseDown" />

ersetzt mit

<TextBlock Name="textBlockName" Text="{Binding ElementName=root, Path=Text}" VerticalAlignment="Center" >
    <TextBlock.InputBindings>
        <MouseBinding Gesture="LeftDoubleCLick" Command="{StaticResource cmdEditTextblock}"/>
    </TextBlock.InputBindings>
</TextBlock>

hinzufügen auch die richtige RoutedCommand im UserControl.Ressourcen

<UserControl.Resources>
    <RoutedCommand x:Key="cmdEditTextblock"/>
</UserControl.Resources>

und ein CommandBinding im UserControl.CommandBindings

<UserControl.CommandBindings>
    <CommandBinding Command="{StaticResource cmdEditTextblock}"
                    Executed="CmdEditTextblock_Executed"/>
</UserControl.CommandBindings>

Auch in der code-behind-Datei:

private void textBlockName_MouseDown(object sender, MouseButtonEventArgs e)
{
    var grid = ((Grid) ((TextBlock) sender).Parent);
    var tbx = (TextBox)grid.Children[1];
    ((TextBlock)sender).Visibility = Visibility.Collapsed;
    tbx.Visibility = Visibility.Visible;
    this.Dispatcher.BeginInvoke((Action)(() => Keyboard.Focus(tbx)), DispatcherPriority.Render);
}

wird ersetzt durch

private void CmdEditTextblock_Executed(object sender, ExecutedRoutedEventArgs e)
    {
        var grid = ((Grid)((TextBlock)e.OriginalSource).Parent);
        var tbx = (TextBox)grid.Children[1];
        ((TextBlock)e.OriginalSource).Visibility = Visibility.Collapsed;
        tbx.Visibility = Visibility.Visible;
        this.Dispatcher.BeginInvoke((Action)(() => Keyboard.Focus(tbx)), DispatcherPriority.Render);
    }

Den Fall das einige Leute haben wollen Links doubleclick als input Geste, wie ich es Tat...

InformationsquelleAutor tombobadil

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.