实现Wpf桌面软件的滑动弹出左侧菜单栏和顶部菜单，中间内容版本切换

在WPF中实现滑动弹出菜单和内容切换，可通过以下方案实现：

一、左侧滑动菜单实现

使用Material Design的`DrawerHost`控件实现侧边栏滑动效果：

xml

<materialDesign:DrawerHost.LeftDrawerContent>

<ListBox ItemsSource="{Binding MenuItems}"

Style="{StaticResource MaterialDesignNavigationListBox}">

<ListBox.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding MenuName}" Margin="16"/>

</DataTemplate>

</ListBox.ItemTemplate>

</ListBox>

</materialDesign:DrawerHost.LeftDrawerContent>

<!-- 主内容区域 -->

<DockPanel>

<!-- 顶部菜单 -->

<Menu DockPanel.Dock="Top">

<MenuItem Header="文件"/>

<MenuItem Header="编辑"/>

</Menu>

<!-- 内容切换区域 -->

<Frame x:Name="MainContent" NavigationUIVisibility="Hidden"/>

</DockPanel>

通过绑定`IsMenuOpen`属性控制菜单展开状态，滑动事件可通过`Touch.FrameReported`或`MouseMove`事件处理^1^4

二、顶部菜单固定

使用DockPanel布局实现顶部菜单固定：

xml

<Menu DockPanel.Dock="Top" Background="FFF0F0F0">

<MenuItem Header="版本1" Command="{Binding SwitchVersionCommand}" CommandParameter="v1"/>

<MenuItem Header="版本2" Command="{Binding SwitchVersionCommand}" CommandParameter="v2"/>

</Menu>

<ScrollViewer>

<ContentControl Content="{Binding CurrentView}"/>

</ScrollViewer>

通过MVVM模式切换`CurrentView`属性实现内容版本更新^8

三、内容切换实现

方法1：使用Frame导航

csharp

// 切换页面

MainContent.Navigate(new Uri("/View/Version1Page.xaml", UriKind.Relative));

// 或使用MVVM

public ICommand SwitchCommand => new RelayCommand(param => {

CurrentView = param switch {

"v1" => new Version1View(),

"v2" => new Version2View(),

_ => throw new ArgumentException()

};

});

方法2：使用自定义FluidTabControl

xml

<local:FluidTabControl.ItemTemplate>

<DataTemplate>

<TextBlock Text="{Binding Header}"/>

</DataTemplate>

</local:FluidTabControl.ItemTemplate>

实现滚动同步和动画效果^2

四、滑动事件处理

csharp

private Point _startPosition;

private const double SwipeThreshold = 50;

private void MainGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) {

}

private void MainGrid_MouseMove(object sender, MouseEventArgs e) {

if (e.LeftButton != MouseButtonState.Pressed) return;

var currentPosition = e.GetPosition(this);

if (currentPosition.X - _startPosition.X > SwipeThreshold) {

}

else if (_startPosition.X - currentPosition.X > SwipeThreshold) {

}

}

实现建议：

1. 安装MaterialDesignThemes NuGet包实现现代UI风格

2. 使用`Prism`框架实现模块化导航

3. 滑动灵敏度可通过`SwipeThreshold`常量调整

4. 复杂动画建议使用`DoubleAnimation`实现平滑过渡

完整示例可参考MaterialDesignInXAML项目^1^4^9