UWP中如何实现ListView的点击展开/失焦收起StackPanel效果？

嘿，我来帮你搞定这个交互效果！既然你已经能捕获到ListView里的StackPanel，那咱们直接上具体的实现方案，分两种常用的路子，你可以根据自己的项目情况选：

方式一：纯代码后台快速实现 #

这种方式适合小型项目或者快速验证需求，直接用事件驱动来控制：

1. 先补全核心XAML结构（方便后续操作） #

假设你的ListView的ItemTemplate里包含了要控制的StackPanel，先给它加个名字方便查找：

<ListView Grid.Row="1" ItemsSource="{Binding listOfSomething, Mode=TwoWay}" 
          SelectionChanged="ListView_SelectionChanged"
          x:Name="MyListView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <!-- 这里是你的其他元素 -->
            <StackPanel x:Name="TargetStackPanel" Visibility="Collapsed">
                <!-- StackPanel的内容 -->
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

2. 记录当前显示的面板 #

在你的页面/窗口类里加个私有字段，用来跟踪当前正在显示的StackPanel：

private StackPanel _currentVisiblePanel;

3. 处理ListView的选中事件 #

在ListView_SelectionChanged里，先隐藏之前的面板，再显示当前选中项对应的面板，同时绑定失焦事件：

private void ListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    // 先把之前显示的面板藏起来
    if (_currentVisiblePanel != null)
    {
        _currentVisiblePanel.Visibility = Visibility.Collapsed;
        _currentVisiblePanel = null;
    }

    // 获取当前选中项对应的ListViewItem
    if (MyListView.SelectedItem != null)
    {
        var listViewItem = MyListView.ItemContainerGenerator.ContainerFromItem(MyListView.SelectedItem) as ListViewItem;
        if (listViewItem != null)
        {
            // 从Visual树里找到我们的目标StackPanel
            _currentVisiblePanel = FindVisualChild<StackPanel>(listViewItem, "TargetStackPanel");
            if (_currentVisiblePanel != null)
            {
                _currentVisiblePanel.Visibility = Visibility.Visible;
                // 绑定失焦事件，方便后续处理隐藏逻辑
                _currentVisiblePanel.LostFocus += TargetStackPanel_LostFocus;
                // 主动让面板获得焦点，确保失焦事件能正常触发
                _currentVisiblePanel.Focus();
            }
        }
    }
}

4. 实现Visual树查找辅助方法 #

这个方法用来在控件的子元素里找到指定名称的元素：

private T FindVisualChild<T>(DependencyObject parent, string name) where T : FrameworkElement
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T typedChild && typedChild.Name == name)
        {
            return typedChild;
        }
        var result = FindVisualChild<T>(child, name);
        if (result != null)
        {
            return result;
        }
    }
    return null;
}

5. 处理StackPanel的失焦事件 #

当面板失去焦点时，把它藏起来并清空跟踪的字段：

private void TargetStackPanel_LostFocus(object sender, RoutedEventArgs e)
{
    var panel = sender as StackPanel;
    if (panel != null)
    {
        panel.Visibility = Visibility.Collapsed;
        // 移除事件监听，避免内存泄漏
        panel.LostFocus -= TargetStackPanel_LostFocus;
        _currentVisiblePanel = null;
        // 可选：清空ListView的选中状态，让交互更连贯
        MyListView.SelectedItem = null;
    }
}

方式二：MVVM模式优雅实现 #

如果你的项目用了MVVM，这种方式更符合架构设计，耦合度更低：

1. 给数据模型添加显示控制属性 #

假设你的列表项模型是SomethingModel，添加一个IsPanelVisible属性来控制StackPanel的显示：

public class SomethingModel : INotifyPropertyChanged
{
    private bool _isPanelVisible;
    public bool IsPanelVisible
    {
        get => _isPanelVisible;
        set
        {
            _isPanelVisible = value;
            OnPropertyChanged();
        }
    }

    // 你的其他属性...

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. ViewModel里处理选中和失焦逻辑 #

在ViewModel里添加选中项属性和失焦命令：

public class MainViewModel : INotifyPropertyChanged
{
    private SomethingModel _selectedItem;
    public SomethingModel SelectedItem
    {
        get => _selectedItem;
        set
        {
            // 先把之前选中项的面板藏起来
            if (_selectedItem != null)
            {
                _selectedItem.IsPanelVisible = false;
            }
            _selectedItem = value;
            // 显示当前选中项的面板
            if (_selectedItem != null)
            {
                _selectedItem.IsPanelVisible = true;
            }
            OnPropertyChanged();
        }
    }

    public ObservableCollection<SomethingModel> listOfSomething { get; set; } = new ObservableCollection<SomethingModel>();

    // 处理面板失焦的命令
    public ICommand PanelLostFocusCommand => new RelayCommand<SomethingModel>(model =>
    {
        model.IsPanelVisible = false;
        SelectedItem = null;
    });

    // INotifyPropertyChanged实现...
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

注：这里的RelayCommand可以自己实现，或者用Prism、MvvmLight等框架提供的实现

3. XAML绑定调整 #

修改ItemTemplate里的StackPanel，绑定Visibility和失焦命令：

<ListView Grid.Row="1" ItemsSource="{Binding listOfSomething}" 
          SelectedItem="{Binding SelectedItem, Mode=TwoWay}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <!-- 你的其他元素 -->
            <StackPanel Visibility="{Binding IsPanelVisible, Converter={StaticResource BooleanToVisibilityConverter}}"
                        LostFocus="{Binding DataContext.PanelLostFocusCommand, RelativeSource={RelativeSource AncestorType=ListView}, CommandParameter={Binding}}">
                <!-- StackPanel内容 -->
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

还需要在资源里添加BooleanToVisibilityConverter（如果没有的话）：

public class BooleanToVisibilityConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (bool)value ? Visibility.Visible : Visibility.Collapsed;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return (Visibility)value == Visibility.Visible;
    }
}

然后在XAML的资源中声明：

<Window.Resources>
    <local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>

几个需要注意的小细节 #

• 如果StackPanel内部有可获得焦点的控件（比如TextBox、Button），那StackPanel的LostFocus事件可能不会直接触发，这时候可以监听IsKeyboardFocusWithin属性的变化，或者把失焦事件绑定到内部控件上。
• 代码后台方式里，记得在页面/窗口关闭时移除事件监听，避免内存泄漏。
• MVVM方式里，确保你的ViewModel正确实现了INotifyPropertyChanged，不然绑定不会生效。

内容的提问来源于stack exchange，提问作者Samir Llorente