WPF自定义导航栏实现返回上一页并保留页面内容

嘿，我懂你说的痛点——默认导航栏样式太拉胯，自己写跳转又每次新建页面实例，返回的时候根本回不到原来的那个Page1。别慌，咱用页面实例缓存+NavigationService栈管理就能搞定，下面给你一步步拆解：

1. 先整个页面实例管理器，避免重复new #

首先要搞一个类帮咱缓存已经创建好的Page实例，每次需要的时候直接拿，不用重新创建。这样不管跳多少次，同一个Page的实例都是唯一的：

public class PageInstanceManager
{
    // 用单例模式，保证整个应用只有一个管理器实例
    private static PageInstanceManager _instance;
    // 字典存页面类型和对应的实例
    private readonly Dictionary<string, Page> _pageCache = new Dictionary<string, Page>();

    private PageInstanceManager() { }

    public static PageInstanceManager Instance
    {
        get
        {
            _instance ??= new PageInstanceManager();
            return _instance;
        }
    }

    // 获取指定页面的实例，不存在就创建并缓存
    public Page GetPage<T>() where T : Page, new()
    {
        var pageTypeKey = typeof(T).FullName;
        if (!_pageCache.ContainsKey(pageTypeKey))
        {
            _pageCache[pageTypeKey] = new T();
        }
        return _pageCache[pageTypeKey];
    }
}

2. 自定义导航栏的跳转逻辑（关键！） #

假设你的主窗口里有个Frame控件（比如叫MainContentFrame）用来放页面，自定义按钮的点击事件这么写：

跳转到Page2的代码 #

private void GoToPage2Btn_Click(object sender, RoutedEventArgs e)
{
    // 从缓存里拿Page2的实例，不是new新的！
    var page2 = (Page2)PageInstanceManager.Instance.GetPage<Page2>();
    // 用Frame的NavigationService导航，这时候会把Page2加入导航栈
    MainContentFrame.NavigationService.Navigate(page2);
}

返回上一页的代码（回到原Page1） #

这里绝对不要自己new Page1！直接用NavigationService的GoBack()就行——因为你第一次跳转到Page1的时候，它已经被存在导航栈里了，调用GoBack就会回到原来的那个实例，完全不会新建：

private void BackBtn_Click(object sender, RoutedEventArgs e)
{
    // 先判断能不能返回，避免报错
    if (MainContentFrame.NavigationService.CanGoBack)
    {
        MainContentFrame.NavigationService.GoBack();
    }
}

3. 几个关键注意事项 #

• 别手动new页面返回：你之前的问题就是返回的时候还在new页面，这完全没必要，导航栈已经帮你存了原来的实例，直接用GoBack就好。
• 页面状态的处理：如果Page1有一些输入框状态、数据需要保留，缓存实例正好满足；如果需要返回时重置状态，可以在Page1的Loaded事件里写重置逻辑，或者在导航到的时候手动调用重置方法。
• 样式随便自定义：自定义导航栏的UI完全不受影响，你可以用StackPanel、Grid放按钮，自己写Style改颜色、加图标、做hover效果，想怎么好看都可以，导航逻辑和UI样式是完全分离的。

举个简单的自定义导航栏XAML例子：

<StackPanel Orientation="Horizontal" Margin="15,10">
    <Button Content="← 返回" 
            Click="BackBtn_Click" 
            Margin="0,0,10,0"
            Style="{StaticResource CustomNavButton}"/>
    <Button Content="跳转到Page2" 
            Click="GoToPage2Btn_Click"
            Style="{StaticResource CustomNavButton}"/>
</StackPanel>

然后你在Window的Resources里定义CustomNavButton样式，比如：

<Style x:Key="CustomNavButton" TargetType="Button">
    <Setter Property="Background" Value="#2C3E50"/>
    <Setter Property="Foreground" Value="White"/>
    <Setter Property="Padding" Value="10,5"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="CornerRadius" Value="4"/>
    <Style.Triggers>
        <Trigger Property="IsMouseOver" Value="True">
            <Setter Property="Background" Value="#34495E"/>
        </Trigger>
    </Style.Triggers>
</Style>

这样导航栏的样式就完全是你自己说了算，再也不用看默认的丑样式了。

内容的提问来源于stack exchange，提问作者Bad-Ass