如何实现从List View到Details View的页面跳转？以客户列表场景为例

下面分享两种常用的实现思路，都是基于List.xaml（客户列表页）和Detail.xaml（客户详情页）来做的：

方法一：通过页面导航跳转 #

这种方式适合独立页面之间的切换，用NavigationService完成跳转并传递选中的客户数据。

1. 配置List.xaml #

给ListView添加选中事件，用户选择客户后触发跳转：

<ListView x:Name="CustomerListView" 
          ItemsSource="{Binding Customers}"
          SelectionChanged="CustomerListView_SelectionChanged">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="邮箱" DisplayMemberBinding="{Binding Email}"/>
        </GridView>
    </ListView.View>
</ListView>

对应的List.xaml.cs后台代码：

private void CustomerListView_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (CustomerListView.SelectedItem is Customer selectedCustomer)
    {
        // 跳转到详情页并传递客户数据
        NavigationService.Navigate(new DetailPage(selectedCustomer));
    }
}

2. 配置Detail.xaml #

详情页接收客户数据，绑定到控件供查看或修改：

<StackPanel Padding="10">
    <TextBlock Text="客户详情" FontSize="18" FontWeight="Bold"/>
    <TextBox Margin="0,5" Text="{Binding Name, Mode=TwoWay}" Header="姓名"/>
    <TextBox Margin="0,5" Text="{Binding Email, Mode=TwoWay}" Header="邮箱"/>
    <Button Margin="0,10" Content="保存修改" Click="SaveButton_Click"/>
</StackPanel>

对应的Detail.xaml.cs后台代码：

public Customer CurrentCustomer { get; set; }

public DetailPage(Customer customer)
{
    InitializeComponent();
    CurrentCustomer = customer;
    DataContext = CurrentCustomer;
}

private void SaveButton_Click(object sender, RoutedEventArgs e)
{
    // 编写保存修改的逻辑（如更新数据源）
    NavigationService.GoBack(); // 保存后返回列表页
}

方法二：MVVM模式下的视图切换（无页面跳转） #

如果采用MVVM架构，推荐通过绑定选中项动态切换视图容器内容，无需页面跳转。

1. List.xaml配置 #

绑定选中的客户，用ContentControl承载详情视图：

<ListView ItemsSource="{Binding Customers}"
          SelectedItem="{Binding SelectedCustomer}">
    <ListView.View>
        <GridView>
            <GridViewColumn Header="姓名" DisplayMemberBinding="{Binding Name}"/>
            <GridViewColumn Header="邮箱" DisplayMemberBinding="{Binding Email}"/>
        </GridView>
    </ListView.View>
</ListView>

<!-- 动态显示详情视图的容器 -->
<ContentControl Content="{Binding SelectedCustomer, Converter={StaticResource CustomerToDetailViewConverter}}"/>

2. ViewModel与转换器逻辑 #

在ViewModel中维护选中的客户，用转换器将客户对象转换为详情视图：

public class CustomerListViewModel : INotifyPropertyChanged
{
    private ObservableCollection<Customer> _customers;
    public ObservableCollection<Customer> Customers
    {
        get => _customers;
        set { _customers = value; OnPropertyChanged(); }
    }

    private Customer _selectedCustomer;
    public Customer SelectedCustomer
    {
        get => _selectedCustomer;
        set { _selectedCustomer = value; OnPropertyChanged(); }
    }

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

// 客户对象转详情视图的转换器
public class CustomerToDetailViewConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        if (value is Customer customer)
        {
            return new DetailView { DataContext = customer };
        }
        return null;
    }

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

3. Detail.xaml作为用户控件 #

将详情页改为UserControl，直接绑定客户数据：

<UserControl x:Class="YourNamespace.DetailView">
    <StackPanel Padding="10">
        <TextBlock Text="客户详情" FontSize="18" FontWeight="Bold"/>
        <TextBox Margin="0,5" Text="{Binding Name, Mode=TwoWay}" Header="姓名"/>
        <TextBox Margin="0,5" Text="{Binding Email, Mode=TwoWay}" Header="邮箱"/>
        <Button Margin="0,10" Content="保存修改" Command="{Binding SaveCommand}"/>
    </StackPanel>
</UserControl>

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