UWP ListBox数据模板元素访问问题：ToggleSwitch状态联动实现

嗨，我来帮你搞定这个需求！直接在后台代码里找DataTemplate里的Ellipse确实行不通——毕竟ListBox的每个用户项都是模板动态生成的，咱们换个更符合UWP数据绑定思想的方案，而且完全不用放弃ListBox~

推荐方案：用数据绑定+视图模型（最优雅的方式） #

核心思路是把ToggleSwitch的状态和Ellipse的颜色都绑定到用户数据模型的属性上，让UI自动响应数据变化，不用手动操作UI元素。

1. 创建用户数据模型 #

首先新建一个实现INotifyPropertyChanged的视图模型类，用来封装用户的状态和开关状态：

using System.ComponentModel;
using Windows.UI.Xaml.Media;

public class UserItemViewModel : INotifyPropertyChanged
{
    private bool _isToggleOn;
    public bool IsToggleOn
    {
        get => _isToggleOn;
        set
        {
            if (_isToggleOn != value)
            {
                _isToggleOn = value;
                OnPropertyChanged(nameof(IsToggleOn));
                // 开关状态变化时，触发状态颜色的更新
                OnPropertyChanged(nameof(StatusBrush));
            }
        }
    }

    // 根据开关状态返回对应的颜色画刷
    public SolidColorBrush StatusBrush => IsToggleOn 
        ? new SolidColorBrush(Windows.UI.Colors.Red) 
        : new SolidColorBrush(Windows.UI.Colors.Green);

    // 其他用户属性，比如头像、用户名
    public string UserName { get; set; }
    public ImageSource Avatar { get; set; }

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改XAML中的DataTemplate #

把ToggleSwitch和Ellipse的属性绑定到模型的对应属性上，完全不需要写后台事件：

<ListBox x:Name="UserListBox">
    <ListBox.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal" Padding="10">
                <!-- 状态指示器Ellipse -->
                <Ellipse Width="12" Height="12" Fill="{Binding StatusBrush}" Margin="0 0 8 0"/>
                <!-- 用户头像 -->
                <Image Source="{Binding Avatar}" Width="40" Height="40" CornerRadius="20"/>
                <!-- 用户名 -->
                <TextBlock Text="{Binding UserName}" VerticalAlignment="Center" Margin="8 0"/>
                <!-- 开关 -->
                <ToggleSwitch IsOn="{Binding IsToggleOn, Mode=TwoWay}" Margin="8 0 0 0"/>
            </StackPanel>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>

3. 给ListBox绑定数据源 #

在MainPage的构造函数或者Loaded事件里，给ListBox设置数据源：

public MainPage()
{
    this.InitializeComponent();
    // 模拟用户数据
    var userList = new List<UserItemViewModel>
    {
        new UserItemViewModel { UserName = "张三", IsToggleOn = false },
        new UserItemViewModel { UserName = "李四", IsToggleOn = true }
    };
    UserListBox.ItemsSource = userList;
}

这样一来，当你切换ToggleSwitch时，IsToggleOn属性会自动更新，StatusBrush也会跟着变，Ellipse的颜色就自动切换了，完全不用手动找UI元素！

备选方案：如果一定要用Toggled事件（不推荐，但满足需求） #

如果你因为某些原因必须用后台事件处理，可以通过VisualTreeHelper从ToggleSwitch向上找到对应的ListBoxItem，再向下找到Ellipse：

private void ToggleSwitch_Toggled(object sender, RoutedEventArgs e)
{
    var toggleSwitch = sender as ToggleSwitch;
    if (toggleSwitch == null) return;

    // 找到当前的ListBoxItem
    var listBoxItem = FindParent<ListBoxItem>(toggleSwitch);
    if (listBoxItem == null) return;

    // 在ListBoxItem里找到Ellipse（需要给Ellipse设置x:Name="StatusEllipse"）
    var statusEllipse = FindChild<Ellipse>(listBoxItem, "StatusEllipse");
    if (statusEllipse != null)
    {
        statusEllipse.Fill = toggleSwitch.IsOn 
            ? new SolidColorBrush(Windows.UI.Colors.Red) 
            : new SolidColorBrush(Windows.UI.Colors.Green);
    }
}

// 辅助方法：向上查找父元素
private T FindParent<T>(DependencyObject child) where T : DependencyObject
{
    var parent = VisualTreeHelper.GetParent(child);
    if (parent == null) return null;
    return parent is T t ? t : FindParent<T>(parent);
}

// 辅助方法：向下查找子元素
private T FindChild<T>(DependencyObject parent, string childName) where T : DependencyObject
{
    for (int i = 0; i < VisualTreeHelper.GetChildrenCount(parent); i++)
    {
        var child = VisualTreeHelper.GetChild(parent, i);
        if (child is T t && ((FrameworkElement)child).Name == childName)
        {
            return t;
        }
        var result = FindChild<T>(child, childName);
        if (result != null) return result;
    }
    return null;
}

注意这种方式需要给DataTemplate里的Ellipse加上x:Name="StatusEllipse"，而且相比数据绑定，这种硬找UI元素的方式维护性差，一旦模板结构变了就容易出错，还是推荐第一种数据绑定的方案~

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