# 04 - 导航系统示例

演示如何使用 Sharp.Wpf 的导航服务实现多页面 WPF 应用，包括页面跳转、参数传递、前进/后退等功能。

## 🎯 学习目标

- 使用 `INavigationService` 实现页面导航
- 理解导航历史栈（前进/后退）
- 页面间参数传递
- 导航生命周期钩子（INavigationAware）
- 弹出式导航并获取结果

## 📦 使用的模块

- **Sharp.Wpf** - INavigationService, NavigationService

## 🚀 快速运行

```bash
cd examples/04-Navigation
dotnet run
```

## 📝 核心代码讲解

### 1. MainViewModel.cs - 主导航容器

```csharp
using Wpf.Navigation;

public class MainViewModel : ViewModelBase
{
    private readonly INavigationService _navigationService;
    private ViewModelBase? _currentPage;

    public ViewModelBase? CurrentPage
    {
        get => _currentPage;
        set => SetProperty(ref _currentPage, value);
    }

    public bool CanGoBack => _navigationService.CanGoBack;
    public bool CanGoForward => _navigationService.CanGoForward;

    public ICommand NavigateToHomeCommand { get; }
    public ICommand NavigateToProductsCommand { get; }
    public ICommand NavigateToSettingsCommand { get; }
    public ICommand GoBackCommand { get; }
    public ICommand GoForwardCommand { get; }

    public MainViewModel(INavigationService navigationService)
    {
        _navigationService = navigationService;

        // 监听导航事件
        _navigationService.Navigated += (s, vm) =>
        {
            CurrentPage = vm;
            OnPropertyChanged(nameof(CanGoBack));
            OnPropertyChanged(nameof(CanGoForward));
        };

        // 导航命令
        NavigateToHomeCommand = new AsyncCommand(async (ct) =>
        {
            await _navigationService.NavigateAsync<HomeViewModel>();
        });

        NavigateToProductsCommand = new AsyncCommand(async (ct) =>
        {
            await _navigationService.NavigateAsync<ProductsViewModel>();
        });

        NavigateToSettingsCommand = new AsyncCommand(async (ct) =>
        {
            await _navigationService.NavigateAsync<SettingsViewModel>();
        });

        GoBackCommand = new AsyncCommand(async (ct) =>
        {
            await _navigationService.GoBackAsync();
        }, () => CanGoBack);

        GoForwardCommand = new AsyncCommand(async (ct) =>
        {
            await _navigationService.GoForwardAsync();
        }, () => CanGoForward);

        // 初始导航到首页
        Task.Run(async () => await _navigationService.NavigateAsync<HomeViewModel>());
    }
}
```

### 2. ProductsViewModel.cs - 带参数的页面

```csharp
public class ProductsViewModel : ViewModelBase, INavigationAware
{
    private readonly INavigationService _navigationService;
    private readonly IDialogService _dialogService;
    private string _category = "全部";

    public string Category
    {
        get => _category;
        set => SetProperty(ref _category, value);
    }

    public ICommand ViewProductDetailsCommand { get; }

    public ProductsViewModel(
        INavigationService navigationService,
        IDialogService dialogService)
    {
        _navigationService = navigationService;
        _dialogService = dialogService;

        ViewProductDetailsCommand = new AsyncCommand<int>(async (productId, ct) =>
        {
            // 导航到产品详情页，传递产品ID
            await _navigationService.NavigateAsync<ProductDetailViewModel>(productId);
        });
    }

    // 导航生命周期：进入页面时
    public async Task OnNavigatedToAsync(object? parameter)
    {
        if (parameter is string category)
        {
            Category = category;
            _dialogService.ShowMessage($"显示分类: {category}", "提示");
        }

        // 可以在这里加载数据
        await LoadProductsAsync();
    }

    // 导航生命周期：离开页面时
    public async Task OnNavigatedFromAsync()
    {
        // 清理资源、保存状态等
        await Task.CompletedTask;
    }

    private async Task LoadProductsAsync()
    {
        IsBusy = true;
        await Task.Delay(500);  // 模拟加载
        IsBusy = false;
    }
}
```

### 3. ProductDetailViewModel.cs - 详情页（带结果返回）

```csharp
public class ProductDetailViewModel : ViewModelBase,
    INavigationAware,
    INavigationResult<bool>  // 返回 bool（是否购买）
{
    private readonly TaskCompletionSource<bool> _resultSource = new();
    private int _productId;
    private string _productName = "";

    public int ProductId
    {
        get => _productId;
        set => SetProperty(ref _productId, value);
    }

    public string ProductName
    {
        get => _productName;
        set => SetProperty(ref _productName, value);
    }

    public ICommand BuyCommand { get; }
    public ICommand CancelCommand { get; }

    public ProductDetailViewModel()
    {
        BuyCommand = new RelayCommand(() =>
        {
            // 返回结果：已购买
            _resultSource.SetResult(true);
        });

        CancelCommand = new RelayCommand(() =>
        {
            // 返回结果：取消
            _resultSource.SetResult(false);
        });
    }

    public async Task OnNavigatedToAsync(object? parameter)
    {
        if (parameter is int productId)
        {
            ProductId = productId;
            // 加载产品详情
            ProductName = $"产品 #{productId}";
        }
        await Task.CompletedTask;
    }

    public Task OnNavigatedFromAsync() => Task.CompletedTask;

    // 实现 INavigationResult<bool>
    public Task<bool> GetResultAsync()
    {
        return _resultSource.Task;
    }
}
```

### 4. App.xaml.cs - 注册导航服务

```csharp
protected override void OnStartup(StartupEventArgs e)
{
    var services = new ServiceCollection();

    services.AddSharpWpf();  // 自动注册 INavigationService

    // 注册所有页面 ViewModel
    services.AddViewModel<MainViewModel>();
    services.AddViewModel<HomeViewModel>();
    services.AddViewModel<ProductsViewModel>();
    services.AddViewModel<ProductDetailViewModel>();
    services.AddViewModel<SettingsViewModel>();

    var provider = services.BuildServiceProvider();
    var mainWindow = provider.GetRequiredService<MainWindow>();
    mainWindow.Show();
}
```

### 5. MainWindow.xaml - 导航容器

```xml
<Window x:Class="NavigationExample.MainWindow"
        Title="导航系统示例" Height="600" Width="800">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!-- 导航栏 -->
        <StackPanel Grid.Row="0" Orientation="Horizontal" Background="#f0f0f0" Padding="10">
            <Button Content="首页" Command="{Binding NavigateToHomeCommand}" Margin="0,0,10,0"/>
            <Button Content="产品列表" Command="{Binding NavigateToProductsCommand}" Margin="0,0,10,0"/>
            <Button Content="设置" Command="{Binding NavigateToSettingsCommand}" Margin="0,0,20,0"/>

            <Button Content="← 后退" Command="{Binding GoBackCommand}" Margin="0,0,10,0"/>
            <Button Content="前进 →" Command="{Binding GoForwardCommand}"/>
        </StackPanel>

        <!-- 内容区域 - 显示当前页面 -->
        <ContentControl Grid.Row="1" Content="{Binding CurrentPage}">
            <ContentControl.Resources>
                <!-- 为每个 ViewModel 指定对应的 View -->
                <DataTemplate DataType="{x:Type local:HomeViewModel}">
                    <local:HomeView/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:ProductsViewModel}">
                    <local:ProductsView/>
                </DataTemplate>
                <DataTemplate DataType="{x:Type local:SettingsViewModel}">
                    <local:SettingsView/>
                </DataTemplate>
            </ContentControl.Resources>
        </ContentControl>
    </Grid>
</Window>
```

## 🎓 练习建议

### 练习1：面包屑导航
添加面包屑显示当前导航路径（如：首页 > 产品列表 > 产品详情）。

### 练习2：导航守卫
实现 `INavigationGuard` 接口，在离开页面前检查是否有未保存的更改。

### 练习3：嵌套导航
在产品列表页内部实现子导航（如：全部/热销/新品标签页切换）。

### 练习4：导航缓存
实现页面缓存，避免重复创建 ViewModel（保持页面状态）。

## 💡 常见问题

**Q: 导航后如何保持页面状态？**
A: 不要后退时，CurrentViewModel 会保留在前进栈中，前进时会恢复状态。如果需要完全保持状态，可以使用 Singleton ViewModel。

**Q: 如何传递复杂对象作为参数？**
A: 使用 `NavigateAsync(object parameter)`，parameter 可以是任何对象。

**Q: 导航历史栈何时清空？**
A: 调用 `_navigationService.ClearHistory()` 手动清空。

**Q: 能否使用动画过渡？**
A: 可以，在 ContentControl 上添加 Storyboard 实现页面切换动画。

## 📚 延伸阅读

- [WPF 数据模板](https://learn.microsoft.com/zh-cn/dotnet/desktop/wpf/data/data-templating-overview)
- [MVVM 导航模式](https://prismlibrary.com/docs/navigation.html)
- 下一个示例：[05-Localization](../05-Localization/README.md)

---

**掌握导航系统，构建流畅的多页面应用！** 🧭