UWP TreeView 编辑数据绑定树项节点

Question

在我正在处理的 UWP TreeView 上，我需要启用树视图节点（项目）中的文本编辑。 Treeview 数据绑定到 VM。应该通过双击或从 VM 发出命令来启用编辑。项目是使用 TreeView 上的 ItemTemplateSelector 定义的。我需要类似的功能，比如 WPF 中的 DataGrid，它的项目具有编辑和非编辑模式。

<TreeView Style="{StaticResource MyTreeViewStyle1}" 
        x:Name="treeviewMain" 
        Grid.Row="1" 
        ItemsSource="{x:Bind ViewModel.storageFolders, Mode=TwoWay}"      
        ItemTemplateSelector="{StaticResource ExplorerItemTemplateSelector}" ItemContainerStyle="{StaticResource MyTreeViewItemStyle}" />

ItemTemplateSelector：

      <local:ExplorerItemTemplateSelector
        x:Key="ExplorerItemTemplateSelector"
        FolderTemplate="{StaticResource FolderTemplate}"
        FileTemplate="{StaticResource FileTemplate}" 
        InactiveTemplate="{StaticResource InactiveTemplate}"
        TrashTemplate="{StaticResource TrashTemplate}"                    
        />

这是我需要启用编辑的文件模板项：

        <DataTemplate x:Key="FileTemplate" x:DataType="local:FolderInfo">
        <local:ExtraTreeViewItem>
            <StackPanel Orientation="Horizontal">
                <Image Width="20" Source="Assets/file.png"/>
                <TextBlock Text="{Binding FolderName}"/>
            </StackPanel>
        </local:ExtraTreeViewItem>
    </DataTemplate>

Answer 1

内置TreeViewItem不支持编辑，您可以尝试在WPDev UserVoice上提交功能请求。但我认为还有许多其他简单的方法可以实现您的目标。

例如，您可以制作一个自定义的 UserControl 来简单地实现它。

<UserControl
x:Class="AppTreeView.EditableControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:AppTreeView"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">

<StackPanel Orientation="Horizontal">
    <Image x:Name="img" Width="20" Source="Assets/file.png" />
    <TextBlock x:Name="txb" Height="30"></TextBlock>
    <TextBox x:Name="textbox" Visibility="Collapsed" Height="30"></TextBox>
</StackPanel>

public sealed partial class EditableControl : UserControl
{
    public EditableControl()
    {
        this.InitializeComponent();
        this.DoubleTapped += EditableControl_DoubleTapped;
        this.textbox.TextChanged += Textbox_TextChanged;
    }

    private void Textbox_TextChanged(object sender, TextChangedEventArgs e)
    {
        this.FolderName = textbox.Text;
    }

    private void EditableControl_DoubleTapped(object sender, DoubleTappedRoutedEventArgs e)
    {
        IsEditAble = true;
    }

    public string FolderName
    {
        get { return (string)GetValue(FolderNameProperty); }
        set { SetValue(FolderNameProperty, value); }
    }

    // Using a DependencyProperty as the backing store for FolderName.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty FolderNameProperty =
        DependencyProperty.Register("FolderName", typeof(string), typeof(EditableControl), new PropertyMetadata(null, FolderNamePropertyChangedCallback));


    public bool IsEditAble
    {
        get { return (bool)GetValue(IsEditAbleProperty); }
        set { SetValue(IsEditAbleProperty, value); }
    }

    // Using a DependencyProperty as the backing store for IsEditAble.  This enables animation, styling, binding, etc...
    public static readonly DependencyProperty IsEditAbleProperty =
        DependencyProperty.Register("IsEditAble", typeof(bool), typeof(EditableControl), new PropertyMetadata(false, IsEditAblePropertyChangedCallback));

    public static void IsEditAblePropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue != e.OldValue)
        {
            if ((bool)e.NewValue == true)
            {
                ((EditableControl)d).textbox.Visibility = Visibility.Visible;
                ((EditableControl)d).txb.Visibility = Visibility.Collapsed;
            }
            else
            {
                ((EditableControl)d).textbox.Visibility = Visibility.Collapsed;
                ((EditableControl)d).txb.Visibility = Visibility.Visible;
            }
        }
    }

    public static void FolderNamePropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        if (e.NewValue != e.OldValue)
        {
            ((EditableControl)d).textbox.Text = e.NewValue.ToString();
            ((EditableControl)d).txb.Text = e.NewValue.ToString();
        }
    }
}

上面的代码示例只是我的简单实现。实际上，您可以只使用 TextBox 来显示文本。当'IsEditAble=false'时，你可以让它看起来像TextBlock。

然后，您可以直接将此 UserControl 用作 TreeViewItem 的内容。

另一种方法是您可以制作自定义 TreeViewItem 类并自己实现自定义样式。类似于XAML custom panels overview。