C#中实现左侧折叠导航菜单的示例代码_Asp.net

基于c#实现左侧折叠导航菜单的完整技术方案，涵盖winforms和wpf两种主流开发框架，结合界面设计、交互逻辑和工程实践：

一、winforms实现方案

1. 基础控件组合

核心控件选择：

panel容器：用于包裹折叠内容
button/label：作为菜单触发器
treeview：展示多级菜单结构
splitcontainer：实现左右分栏布局

示例代码：

// 初始化菜单面板
panel menupanel = new panel {
    dock = dockstyle.left,
    width = 200,
    backcolor = color.fromargb(240, 240, 240)
};

// 创建折叠按钮
button togglebtn = new button {
    text = "☰ 菜单",
    dock = dockstyle.top,
    font = new font("微软雅黑", 10, fontstyle.bold),
    backcolor = color.dimgray
};
togglebtn.click += (s, e) => {
    menupanel.width = menupanel.width == 200 ? 60 : 200;
    this.invalidate(); // 触发重绘
};

// 添加到窗体
this.controls.add(togglebtn);
this.controls.add(menupanel);

2. 动画效果实现

通过定时器实现平滑展开/折叠：

timer anitimer = new timer { interval = 20 };
int targetwidth = 200;
int currentwidth = 60;

void animateresize() {
    if (menupanel.width < targetwidth) {
        menupanel.width += 5;
        togglebtn.text = "☰ 菜单";
    } else if (menupanel.width > currentwidth) {
        menupanel.width -= 5;
        togglebtn.text = "▶ 内容";
    } else {
        anitimer.stop();
    }
}

// 触发时启动动画
togglebtn.click += (s, e) => {
    targetwidth = menupanel.width == 200 ? 60 : 200;
    currentwidth = menupanel.width;
    anitimer.start();
};

3. 多级菜单实现

使用treeview控件构建层级结构：

treenode node1 = new treenode("系统管理", 0, 0);
treenode node1_1 = new treenode("用户管理", 1, 1);
treenode node1_2 = new treenode("权限设置", 2, 2);
node1.nodes.add(node1_1);
node1.nodes.add(node1_2);

treeview1.nodes.add(node1);
treeview1.expandall();

二、wpf实现方案

1. xaml布局设计

<window x:class="foldablemenu.mainwindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        title="折叠导航菜单" height="450" width="800">
    <grid>
        <grid.columndefinitions>
            <columndefinition width="auto"/>
            <columndefinition width="*"/>
        </grid.columndefinitions>

        <!-- 左侧菜单 -->
        <dockpanel x:name="menudock" grid.column="0" width="200" background="#2d2d30">
            <button dockpanel.dock="top" 
                    content="☰ 菜单" 
                    foreground="white" 
                    fontsize="16"
                    margin="5"
                    click="togglemenu"/>
            
            <expander header="系统管理" isexpanded="false">
                <expander.headertemplate>
                    <datatemplate>
                        <textblock text="{binding}" 
                                   foreground="lightblue" 
                                   margin="5"/>
                    </datatemplate>
                </expander.headertemplate>
                <listbox>
                    <listboxitem content="用户管理"/>
                    <listboxitem content="权限设置"/>
                </listbox>
            </expander>
        </dockpanel>

        <!-- 主内容区 -->
        <grid grid.column="1">
            <textblock text="主内容区域" 
                       fontsize="24" 
                       verticalalignment="center" 
                       horizontalalignment="center"/>
        </grid>
    </grid>
</window>

2. 动态菜单绑定

通过viewmodel绑定数据：

public class menumodel : inotifypropertychanged {
    private bool _isexpanded;
    public bool isexpanded {
        get => _isexpanded;
        set {
            _isexpanded = value;
            onpropertychanged(nameof(isexpanded));
        }
    }
    
    // 实现inotifypropertychanged接口
    public event propertychangedeventhandler propertychanged;
    protected void onpropertychanged(string prop) {
        propertychanged?.invoke(this, new propertychangedeventargs(prop));
    }
}

// xaml绑定
<expander header="系统管理" isexpanded="{binding isexpanded}">

3. 动画效果实现

使用storyboard实现折叠动画：

<window.resources>
    <storyboard x:key="collapseanim">
        <doubleanimation storyboard.targetname="menudock" 
                         storyboard.targetproperty="width"
                         from="200" to="60" duration="0:0:0.3"/>
    </storyboard>
    
    <storyboard x:key="expandanim">
        <doubleanimation storyboard.targetname="menudock" 
                         storyboard.targetproperty="width"
                         from="60" to="200" duration="0:0:0.3"/>
    </storyboard>
</window.resources>

// 触发动画
private void togglemenu(object sender, routedeventargs e) {
    storyboard sb = (menudock.width == 200) 
        ? (storyboard)findresource("collapseanim") 
        : (storyboard)findresource("expandanim");
    sb.begin(this);
}

参考代码 c#左侧折叠导航菜单 youwenfan.com/contentcsb/111938.html

三、进阶功能实现

1. 图标与样式定制

图标集成：使用image控件或字体图标库（如fontawesome）
悬停效果：通过style.triggers实现颜色变化

<style targettype="button">
    <setter property="background" value="transparent"/>
    <style.triggers>
        <trigger property="ismouseover" value="true">
            <setter property="background" value="#404040"/>
        </trigger>
    </style.triggers>
</style>

2. 状态持久化

使用applicationsettings保存展开状态：

// 保存状态
properties.settings.default.menuwidth = menudock.width;
properties.settings.default.save();

// 恢复状态
menudock.width = properties.settings.default.menuwidth;

3. 多分辨率适配

wpf自适应布局：使用viewbox控件自动缩放
winforms动态调整：监听resize事件

private void form_resize(object sender, eventargs e) {
    menupanel.width = this.clientsize.width / 4;
}

四、第三方库推荐

库名称	特点	适用场景
hslcommunication	提供现成的导航控件，支持主题切换	企业级应用开发
devexpress winforms	包含ribbon控件和高级布局管理器	复杂业务系统
materialdesigninxaml	实现material design风格菜单	现代化ui设计