<think>我们需要在WPF中实现一个类似导航的界面，
左侧是功能栏（比如树形菜单或列表），点击功能项后，在右侧区域打开
对应的功能
页面。同时，在右侧区域上方有一个类似标签页的
导航栏，显示当前打开的
页面以及历史
页面（可以点击切换），并且每个标签页上有一个关闭按钮（x）用于关闭
页面。
设计思路：
1. 主界面分为左右两部分，
左侧是功能菜单（比如ListBox），右侧是内容区域。
2. 内容区域上方是一个TabControl（或者自定义的标签页
导航栏），用于显示已打开的
页面和当前
页面，下方是内容展示区域（这里我们可以用一个Frame或者ContentControl来承载
页面）。
3. 但是，根据需求，我们不需要同时显示多个
页面（像多标签那样），而是通过标签页
导航栏来切换不同的
页面（类似于浏览器的多个标签，但一次只显示一个
页面）。然而，题目要求显示“目前
页面和历史导航的
页面”，并且可以点击切换，所以我们需要一个可以记录导航历史并且可以切换的界面。
然而，WPF本身并没有提供内置的导航历史标签控件。因此，我们需要自己实现一个。我们可以这样设计：
- 使用一个ObservableCollection来存储打开的
页面（或者
页面的标识，如标题
和对应的
页面类型/实例）。
- 使用一个ContentControl来显示当前选中的
页面。
-
导航栏可以使用一个ItemsControl（比如ListBox）来显示打开的
页面标签，每个标签包含一个标题
和一个关闭按钮。
但是，考虑到导航历史（即打开
页面的顺序）以及当前
页面，我们还需要记录当前选中的
页面。另外，点击功能菜单时，如果该功能
页面已经打开，则直接切换到该
页面；否则，打开一个新的
页面并添加到
导航栏。
另一种做法：我们可以使用TabControl，但是隐藏TabControl的头部，然后自定义一个标签栏（作为TabControl的头部），这样我们就可以控制标签的显示
和关闭。但是TabControl本身会同时管理多个TabItem，每个TabItem的内容是一个
页面。这样我们就不需要自己管理多个
页面的切换了。
因此，我们可以这样设计：
主窗口布局：
- Grid分为两列：
左侧功能菜单，右侧分为两行：第一行是标签栏，第二行是内容区域（即TabControl的内容展示区，但隐藏TabControl自带的标签栏，用我们自定义的标签栏代替）。
具体步骤：
1. 创建主窗口，并设置Grid布局。
2.
左侧功能菜单：使用ListBox，绑定功能项列表（功能项包括标题
和对应的
页面类型）。
3. 右侧上方：自定义标签栏，使用ListBox（水平排列）来显示每个打开的
页面的标签，每个标签包含标题
和关闭按钮。
4. 右侧下方：放置一个TabControl，设置其TabStripPlacement为None（这样自带的标签栏就隐藏了），然后TabControl的内容就是我们打开的
页面。同时，将自定义标签栏的选中项与TabControl的选中项同步。
但是，我们也可以不用TabControl，而是自己管理
页面和当前选中的
页面。这样更灵活，但需要写更多的代码。
为了简化，我们可以使用TabControl，并绑定到打开的
页面集合。然后自定义标签栏（即另一个ListBox）的ItemsSource绑定到同一个集合，并且将两个控件的SelectedItem进行双向绑定。
然而，TabControl的标签项（TabItem）是作为TabControl的ItemContainer出现的，我们无法直接在外部ListBox中绑定。因此，我们可以创建一个ViewModel来表示每个打开的
页面。
我们定义：
- MainWindowViewModel：包含一个ObservableCollection<PageViewModel> OpenPages，
和一个PageViewModel CurrentPage。
- 功能菜单项：可以是一个集合，每个菜单项包含标题
和要打开的
页面类型（或创建
页面的方式）。
具体实现：
1. 创建PageViewModel类，代表一个打开的
页面：
public class PageViewModel : INotifyPropertyChanged
{
public string Title { get; set; }
public object Content { get; set; } // 这里Content可以是UserControl的实例
// 关闭命令
public ICommand CloseCommand { get; set; }
// 为了简化，这里省略INotifyPropertyChanged的实现
}
2. 在MainWindowViewModel中：
public ObservableCollection<PageViewModel> OpenPages { get; } = new ObservableCollection<PageViewModel>();
private PageViewModel _currentPage;
public PageViewModel CurrentPage
{
get => _currentPage;
set
{
_currentPage = value;
OnPropertyChanged();
}
}
// 功能菜单项集合
public ObservableCollection<MenuItemViewModel> MenuItems { get; } = new ObservableCollection<MenuItemViewModel>();
// 打开新
页面的命令
public void OpenPage(PageViewModel page)
{
// 如果该
页面已经打开，则直接切换到该
页面
var existingPage = OpenPages.FirstOrDefault(p => p.Title == page.Title);
if (existingPage != null)
{
CurrentPage = existingPage;
}
else
{
OpenPages.Add(page);
CurrentPage = page;
}
}
// 关闭
页面
public void ClosePage(PageViewModel page)
{
if (page == null)
return;
int index = OpenPages.IndexOf(page);
OpenPages.Remove(page);
// 如果关闭的是当前页，则设置当前页为最后一个（或者如果还有
页面就选另一个）
if (CurrentPage == page)
{
if (OpenPages.Count > 0)
CurrentPage = OpenPages.LastOrDefault(); // 或者可以设置成关闭前一个，这里简单处理为最后一个
else
CurrentPage = null;
}
}
3. 在MainWindow的XAML中，布局如下：
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--
左侧功能菜单 -->
<ListBox Grid.Column="0" ItemsSource="{Binding MenuItems}" DisplayMemberPath="Title">
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<EventSetter Event="MouseDoubleClick" Handler="MenuItem_MouseDoubleClick"/>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
<!-- 右侧区域 -->
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- 自定义标签栏：显示打开的
页面标签 -->
<ListBox Grid.Row="0" ItemsSource="{Binding OpenPages}" SelectedItem="{Binding CurrentPage}" Background="LightGray" HorizontalAlignment="Stretch">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="Black" Margin="2,2,0,2">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="5,0"/>
<Button Content="x" Command="{Binding CloseCommand}" Width="20" Height="20" Margin="5,0"/>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
<!-- 内容区域：使用TabControl，但隐藏自带标签栏，绑定OpenPages
和CurrentPage -->
<TabControl Grid.Row="1" ItemsSource="{Binding OpenPages}" SelectedItem="{Binding CurrentPage}" TabStripPlacement="None">
<TabControl.ItemTemplate>
<!-- 这里设置项模板为空，因为我们不需要显示TabItem的头部，因为我们已经自定义了标签栏 -->
<DataTemplate>
<ContentControl Content="{Binding Content}"/>
</DataTemplate>
</TabControl.ItemTemplate>
<TabControl.ContentTemplate>
<DataTemplate>
<ContentPresenter Content="{Binding Content}"/>
</DataTemplate>
</TabControl.ContentTemplate>
</TabControl>
</Grid>
</Grid>
但是，这里我们用了两个控件（ListBox
和TabControl）来绑定同一个集合，并且通过SelectedItem同步当前选中的
页面。注意，在TabControl中，我们通过设置ItemTemplate
和ContentTemplate来显示
页面的内容。
然而，这里有一个
问题：TabControl的每个项会包裹在一个TabItem中，而TabItem的Header默认会使用ItemTemplate（如果设置了HeaderTemplate则用HeaderTemplate）。但我们这里隐藏了TabItem的头部（因为TabStripPlacement为None），所以不用担心重复显示。
但是，我们自定义的标签栏（ListBox）
和TabControl都绑定了同一个集合，所以当我们在标签栏中点击某个标签时，由于SelectedItem的双向绑定，TabControl也会切换到
对应的
页面。
4. 在PageViewModel中，我们需要实现CloseCommand，该命令调用MainWindowViewModel的ClosePage方法。因此，PageViewModel需要持有MainWindowViewModel的引用（或者通过其他方式，比如事件或消息传递）。这里为了简单，我们可以在创建PageViewModel时传入MainWindowViewModel。
public class PageViewModel : INotifyPropertyChanged
{
private MainWindowViewModel _mainVM;
public PageViewModel(MainWindowViewModel mainVM, string title, object content)
{
_mainVM = mainVM;
Title = title;
Content = content;
CloseCommand = new RelayCommand(() => _mainVM.ClosePage(this));
}
// ... 其他属性 ...
}
5. 在MainWindowViewModel中，创建菜单项，并为每个菜单项定义打开
页面的逻辑。在MainWindow的代码中，处理ListBox的双击事件（或者使用命令绑定更合适），然后调用MainWindowViewModel的OpenPage方法。
6. 为了解耦，我们可以使用命令。在MenuItemViewModel中，我们添加一个命令属性：
public class MenuItemViewModel
{
public string Title { get; set; }
public ICommand OpenCommand { get; set; }
}
然后在MainWindowViewModel中初始化菜单项时，设置OpenCommand：
MenuItems.Add(new MenuItemViewModel { Title = "功能1", OpenCommand = new RelayCommand(OpenPage1) });
MenuItems.Add(new MenuItemViewModel { Title = "功能2", OpenCommand = new RelayCommand(OpenPage2) });
private void OpenPage1()
{
// 创建
页面1
var page = new PageViewModel(this, "功能1", new UserControl1());
OpenPage(page);
}
private void OpenPage2()
{
// 创建
页面2
var page = new PageViewModel(this, "功能2", new UserControl2());
OpenPage(page);
}
7. 在XAML中，将ListBox的ItemTemplate设置为包含一个TextBlock，并绑定到Title，同时将命令绑定到OpenCommand（但注意，ListBoxItem本身不是按钮，所以我们需要用ItemContainerStyle将命令绑定到ListBoxItem的某个事件，比如双击。或者，我们可以将ListBox的ItemTemplate中的元素设置为按钮，这样点击整个菜单项就可以触发命令）。
修改
左侧菜单的ListBox：
<ListBox Grid.Column="0" ItemsSource="{Binding MenuItems}" SelectedItem="{Binding SelectedMenuItem}">
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Title}" Padding="5">
<TextBlock.InputBindings>
<MouseBinding MouseAction="LeftClick" Command="{Binding OpenCommand}"/>
</TextBlock.InputBindings>
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
这样，点击菜单项就会执行OpenCommand。
8. 实现RelayCommand。
注意：以上设计是一种实现方式。由于时间关系，我们简化了一些地方。在实际应用中，可能需要考虑
页面的唯一性（比如根据功能ID判断，而不是标题），以及更复杂的
页面生命周期管理。
下面给出一个简单的代码示例（由于代码较长，这里只给出关键部分）：
步骤：
- 创建MainWindowViewModel、PageViewModel、MenuItemViewModel。
- 在MainWindow的构造函数中设置DataContext为MainWindowViewModel的实例。
- 实现INotifyPropertyChanged接口。
由于代码量较大，以下仅提供关键代码：
MainWindowViewModel.cs:</think>下面是一个使用WPF实现导航功能的解决方案，
左侧为功能栏，右侧为内容区域，顶部显示标签式导航历史：
```csharp
// MainWindow.xaml
<Window x:Class="NavigationDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:NavigationDemo"
Title="Navigation Demo" Height="450" Width="800">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!--
左侧功能栏 -->
<StackPanel Grid.Column="0" Background="#FFE3E3E3" Width="120">
<Button Content="仪表盘" Margin="10" Padding="10" Command="{Binding NavigateCommand}" CommandParameter="Dashboard"/>
<Button Content="用户管理" Margin="10" Padding="10" Command="{Binding NavigateCommand}" CommandParameter="Users"/>
<Button Content="订单管理" Margin="10" Padding="10" Command="{Binding NavigateCommand}" CommandParameter="Orders"/>
<Button Content="系统设置" Margin="10" Padding="10" Command="{Binding NavigateCommand}" CommandParameter="Settings"/>
</StackPanel>
<!-- 右侧内容区域 -->
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- 导航标签栏 -->
<ScrollViewer Grid.Row="0" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding NavigationHistory}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border Background="LightBlue" Margin="5,2" CornerRadius="3">
<StackPanel Orientation="Horizontal">
<Button Content="{Binding Title}"
Style="{StaticResource LinkButtonStyle}"
Command="{Binding DataContext.NavigateToCommand, RelativeSource={RelativeSource AncestorType=Window}}"
CommandParameter="{Binding}"/>
<Button Content="×" Margin="5,0,0,0" Padding="2"
Command="{Binding DataContext.ClosePageCommand, RelativeSource={RelativeSource AncestorType=Window}}"
CommandParameter="{Binding}"/>
</StackPanel>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<!-- 内容显示区域 -->
<ContentControl Grid.Row="1" Content="{Binding CurrentPage}"/>
</Grid>
</Grid>
</Window>
```
```csharp
// MainWindow.xaml.cs
using System.Collections.ObjectModel;
using System.Windows;
using System.Windows.Input;
namespace NavigationDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = new MainViewModel();
}
}
public class MainViewModel : BaseViewModel
{
private PageViewModel _currentPage;
public PageViewModel CurrentPage
{
get => _currentPage;
set => SetField(ref _currentPage, value);
}
public ObservableCollection<PageViewModel> NavigationHistory { get; }
= new ObservableCollection<PageViewModel>();
public ICommand NavigateCommand { get; }
public ICommand NavigateToCommand { get; }
public ICommand ClosePageCommand { get; }
public MainViewModel()
{
NavigateCommand = new RelayCommand<string>(Navigate);
NavigateToCommand = new RelayCommand<PageViewModel>(NavigateTo);
ClosePageCommand = new RelayCommand<PageViewModel>(ClosePage);
// 初始
页面
Navigate("Dashboard");
}
private void Navigate(string pageKey)
{
var page = PageFactory.CreatePage(pageKey);
if (page == null) return;
// 如果
页面已存在，移动到最后
if (NavigationHistory.Contains(page))
{
NavigationHistory.Remove(page);
}
NavigationHistory.Add(page);
CurrentPage = page;
}
private void NavigateTo(PageViewModel page)
{
if (page == null) return;
CurrentPage = page;
// 将
页面移到历史记录末尾
NavigationHistory.Remove(page);
NavigationHistory.Add(page);
}
private void ClosePage(PageViewModel page)
{
if (page == null) return;
int index = NavigationHistory.IndexOf(page);
NavigationHistory.Remove(page);
// 如果关闭的是当前页
if (CurrentPage == page)
{
// 显示前一个
页面或清空
if (NavigationHistory.Count > 0)
{
CurrentPage = NavigationHistory[^1];
}
else
{
CurrentPage = null;
}
}
}
}
public class PageViewModel : BaseViewModel
{
public string Title { get; set; }
public string Key { get; set; }
public object Content { get; set; }
}
public static class PageFactory
{
public static PageViewModel CreatePage(string key)
{
return key switch
{
"Dashboard" => new PageViewModel
{
Title = "仪表盘",
Key = key,
Content = new DashboardPage()
},
"Users" => new PageViewModel
{
Title = "用户管理",
Key = key,
Content = new UserManagementPage()
},
"Orders" => new PageViewModel
{
Title = "订单管理",
Key = key,
Content = new OrderManagementPage()
},
"Settings" => new PageViewModel
{
Title = "系统设置",
Key = key,
Content = new SettingsPage()
},
_ => null
};
}
}
// 示例
页面（实际项目中应使用UserControl）
public class DashboardPage { }
public class UserManagementPage { }
public class OrderManagementPage { }
public class SettingsPage { }
}
```
```csharp
// 基础ViewModel
和命令
using System;
using System.ComponentModel;
using System.Runtime.CompilerServices;
using System.Windows.Input;
namespace NavigationDemo
{
public class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string name = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(name));
}
protected bool SetField<T>(ref T field, T value, [CallerMemberName] string propertyName = null)
{
if (EqualityComparer<T>.Default.Equals(field, value)) return false;
field = value;
OnPropertyChanged(propertyName);
return true;
}
}
public class RelayCommand<T> : ICommand
{
private readonly Action<T> _execute;
private readonly Func<T, bool> _canExecute;
public RelayCommand(Action<T> execute, Func<T, bool> canExecute = null)
{
_execute = execute ?? throw new ArgumentNullException(nameof(execute));
_canExecute = canExecute;
}
public bool CanExecute(object parameter) =>
_canExecute == null || _canExecute((T)parameter);
public void Execute(object parameter) => _execute((T)parameter);
public event EventHandler CanExecuteChanged
{
add => CommandManager.RequerySuggested += value;
remove => CommandManager.RequerySuggested -= value;
}
}
}
```
### 实现说明：
1. **导航架构**：
-
左侧功能栏使用StackPanel+Button实现
- 右侧分为导航标签栏（ItemsControl）
和内容区（ContentControl）
- 使用MVVM模式分离界面逻辑
2. **导航逻辑**：
- 点击功能按钮时创建
对应的PageViewModel
- 导航历史记录在ObservableCollection中
- 当前
页面绑定到ContentControl
3. **标签功能**：
- 每个标签显示
页面标题
和关闭按钮
- 点击标签切换到
对应页面
- 关闭按钮移除
页面并自动切换
4. **关键特性**：
- 使用RelayCommand实现命令绑定
-
页面工厂模式创建
页面实例
-
页面历史自动维护（最近访问在最后）
- 支持关闭当前页时的自动切换
5. **样式优化**：
- 导航标签使用Border+StackPanel实现
- 链接式按钮样式（需在App.xaml中定义）
- 滚动支持多标签显示
### 使用建议：
1. 实际项目中应将
页面内容实现为UserControl
2. 添加
页面缓存机制避免重复创建
3. 实现
页面状态保持功能
4. 添加导航动画效果
5. 实现标签拖拽排序功能
本文探讨了使用TABLE标签时出现的元素对齐问题，并提供了一种解决方案：通过DIV标签来实现更好的布局控制。文章对比了两种方法，并展示了如何利用DIV及内联样式达到期望的对齐效果。
扫一扫
363
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
