UWP ListView选中项外部箭头标记的简化实现问询

嘿，你当前通过滚动事件手动计算坐标的方案虽然可行，但确实可以借助UWP的绑定和布局特性来简化实现，不用每次都写转换坐标的代码。下面给你几个更优雅的思路：

方案一：绑定+值转换器（推荐） #

你可以通过绑定ListView的SelectedItem，配合自定义值转换器，直接把选中项转换为对应的屏幕坐标，然后绑定到箭头的位置属性上，实现自动跟随。

步骤1：创建坐标转换转换器 #

这个转换器会把传入的数据项转换成它在目标容器中的坐标：

public class ItemToPointConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (value == null || parameter is not ListView listView)
            return targetType == typeof(double) ? 0.0 : new Point(0,0);
        
        // 把数据项转换成对应的ListViewItem容器
        var listViewItem = listView.ContainerFromItem(value) as ListViewItem;
        if(listViewItem == null) 
            return targetType == typeof(double) ? 0.0 : new Point(0,0);
        
        // 计算相对于箭头所在容器的坐标
        var transform = listViewItem.TransformToVisual(parameter as UIElement);
        var targetPoint = transform.TransformPoint(new Point(0,0));
        
        // 根据绑定的目标属性返回X或Y值
        return targetType == typeof(double) 
            ? (language == "Top" ? targetPoint.Y : targetPoint.X) 
            : targetPoint;
    }

    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

步骤2：在XAML中使用绑定 #

先在页面资源中声明转换器，然后把箭头的Canvas.Left和Canvas.Top绑定到ListView的SelectedItem，同时传入ListView作为转换器参数：

<Page.Resources>
    <local:ItemToPointConverter x:Key="ItemToPointConverter"/>
</Page.Resources>

<!-- 假设箭头和ListView同层级放在Canvas中 -->
<Canvas>
    <ListView x:Name="lvMain" ItemsSource="{Binding YourItemList}">
        <!-- 你的ItemTemplate和其他配置 -->
    </ListView>
    <Path x:Name="FollowArrow" Data="M0,0 L15,8 L0,16 Z" Fill="#FF0078D7"
          Canvas.Left="{Binding SelectedItem, ElementName=lvMain, 
                      Converter={StaticResource ItemToPointConverter}, 
                      ConverterParameter={x:Reference lvMain}}"
          Canvas.Top="{Binding SelectedItem, ElementName=lvMain, 
                     Converter={StaticResource ItemToPointConverter}, 
                     ConverterParameter={x:Reference lvMain},
                     ConverterCulture='Top'}"/>
</Canvas>

这样一来，不管是选中项切换还是ListView滚动，绑定都会自动更新箭头的位置，完全不用手动处理滚动事件。

方案二：利用RelativePanel的布局绑定 #

如果你的页面布局是基于RelativePanel，还可以通过附加属性标记选中项，让箭头直接通过布局属性绑定到选中项：

步骤1：定义选中项标记附加属性 #

public static class SelectedMarkerHelper
{
    public static readonly DependencyProperty IsSelectedItemProperty =
        DependencyProperty.RegisterAttached("IsSelectedItem", typeof(bool), typeof(SelectedMarkerHelper), new PropertyMetadata(false));

    public static bool GetIsSelectedItem(DependencyObject obj)
    {
        return (bool)obj.GetValue(IsSelectedItemProperty);
    }

    public static void SetIsSelectedItem(DependencyObject obj, bool value)
    {
        obj.SetValue(IsSelectedItemProperty, value);
    }
}

步骤2：绑定ListViewItem的选中状态 #

<ListView x:Name="lvMain" ItemsSource="{Binding YourItemList}">
    <ListView.ItemContainerStyle>
        <Style TargetType="ListViewItem">
            <Setter Property="local:SelectedMarkerHelper.IsSelectedItem" 
                    Value="{Binding Selected}"/>
        </Style>
    </ListView.ItemContainerStyle>
    <!-- 你的ItemTemplate -->
</ListView>

步骤3：让箭头绑定到选中项 #

<RelativePanel>
    <ListView x:Name="lvMain"/>
    <Path x:Name="FollowArrow" Data="M0,0 L15,8 L0,16 Z" Fill="#FF0078D7"
          RelativePanel.RightOf="{x:Reference lvMain}"
          RelativePanel.AlignVerticalCenterWith="{Binding ElementName=lvMain, Path=SelectedItem}"/>
</RelativePanel>

这个方案适合布局结构固定的场景，缺点是如果选中项滚出可视区域，箭头会跟着移出，需要额外处理可视区域判断。

方案三：简化版代码绑定 #

如果你不想写转换器，也可以在选中项变化时直接给箭头设置绑定，减少重复计算：

private void lvMain_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (lvMain.SelectedItem == null)
    {
        FollowArrow.ClearValue(Canvas.LeftProperty);
        FollowArrow.ClearValue(Canvas.TopProperty);
        return;
    }

    var selectedContainer = lvMain.ContainerFromItem(lvMain.SelectedItem) as ListViewItem;
    // 绑定Left坐标
    FollowArrow.SetBinding(Canvas.LeftProperty, new Binding
    {
        Source = selectedContainer,
        Path = new PropertyPath("TransformToVisual(Canvas).TransformPoint(new Point(0,0)).X"),
        Mode = BindingMode.OneWay
    });
    // 绑定Top坐标
    FollowArrow.SetBinding(Canvas.TopProperty, new Binding
    {
        Source = selectedContainer,
        Path = new PropertyPath("TransformToVisual(Canvas).TransformPoint(new Point(0,0)).Y"),
        Mode = BindingMode.OneWay
    });
}

这个方案比你原来的代码更简洁，只需要在选中项变化时设置一次绑定，后续滚动会自动更新位置。

以上几个方案都能帮你简化原来的实现，其中方案一的绑定+转换器是最灵活通用的，推荐优先尝试～

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