如何在WinUI 3中创建DataGrid ComboBox？求完整设计与代码

设计说明 #

根据参考图片的布局，实现一个具备侧边栏导航、顶部可切换标签页、内容展示区的单页应用界面，包含基础交互功能：

• 侧边栏折叠/展开
• 顶部标签页的添加、切换、关闭
• 内容区与标签页联动展示

完整代码实现 #

HTML 结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理界面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 侧边栏 -->
    <aside class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h2 class="logo">Admin</h2>
            <button class="toggle-btn" id="toggleBtn">☰</button>
        </div>
        <nav class="sidebar-menu">
            <a href="#" class="menu-item" data-page="首页">首页</a>
            <a href="#" class="menu-item" data-page="用户管理">用户管理</a>
            <a href="#" class="menu-item" data-page="订单管理">订单管理</a>
            <a href="#" class="menu-item" data-page="系统设置">系统设置</a>
        </nav>
    </aside>

    <!-- 顶部导航栏 -->
    <header class="top-header">
        <div class="tabs-container" id="tabsContainer">
            <!-- 标签页将通过JS动态生成 -->
        </div>
    </header>

    <!-- 内容区域 -->
    <main class="content-area" id="contentArea">
        <div class="content" id="homeContent">
            <h3>首页内容</h3>
            <p>欢迎进入后台管理系统</p>
        </div>
        <div class="content" id="userContent" style="display: none;">
            <h3>用户管理</h3>
            <p>这里可以管理所有用户信息</p>
        </div>
        <div class="content" id="orderContent" style="display: none;">
            <h3>订单管理</h3>
            <p>查看与处理所有订单</p>
        </div>
        <div class="content" id="settingContent" style="display: none;">
            <h3>系统设置</h3>
            <p>配置系统各项参数</p>
        </div>
    </main>

    <script src="script.js"></script>
</body>
</html>

CSS 样式 #

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
    width: 220px;
    background-color: #2c3e50;
    color: white;
    transition: width 0.3s ease;
}

.sidebar.collapsed {
    width: 60px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    border-bottom: 1px solid #34495e;
}

.logo {
    font-size: 18px;
    font-weight: bold;
}

.toggle-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
}

.sidebar-menu {
    margin-top: 20px;
}

.menu-item {
    display: block;
    padding: 12px 15px;
    color: white;
    text-decoration: none;
    transition: background-color 0.2s;
}

.menu-item:hover {
    background-color: #34495e;
}

.sidebar.collapsed .menu-item span {
    display: none;
}

/* 顶部导航栏样式 */
.top-header {
    flex: 1;
    height: 60px;
    background-color: white;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    padding: 0 15px;
    overflow-x: auto;
}

.tabs-container {
    display: flex;
    gap: 8px;
}

.tab-item {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    background-color: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #eee;
}

.tab-item.active {
    background-color: #3498db;
    color: white;
    border-color: #3498db;
}

.tab-close {
    margin-left: 8px;
    font-size: 14px;
}

/* 内容区域样式 */
.content-area {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background-color: #fafafa;
}

.content {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

JavaScript 交互逻辑 #

const sidebar = document.getElementById('sidebar');
const toggleBtn = document.getElementById('toggleBtn');
const menuItems = document.querySelectorAll('.menu-item');
const tabsContainer = document.getElementById('tabsContainer');
const contentArea = document.getElementById('contentArea');
const contents = document.querySelectorAll('.content');

// 侧边栏折叠/展开
toggleBtn.addEventListener('click', () => {
    sidebar.classList.toggle('collapsed');
});

// 标签页管理
const tabs = new Map();

// 添加标签页
function addTab(pageName) {
    if (tabs.has(pageName)) {
        // 切换到已有标签
        switchTab(pageName);
        return;
    }

    // 创建标签元素
    const tabItem = document.createElement('div');
    tabItem.className = 'tab-item active';
    tabItem.dataset.page = pageName;
    tabItem.innerHTML = `
        <span>${pageName}</span>
        <span class="tab-close">×</span>
    `;

    // 添加关闭事件
    const closeBtn = tabItem.querySelector('.tab-close');
    closeBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        removeTab(pageName);
    });

    // 添加切换事件
    tabItem.addEventListener('click', () => {
        switchTab(pageName);
    });

    tabsContainer.appendChild(tabItem);
    tabs.set(pageName, tabItem);

    // 切换到新标签
    switchTab(pageName);
}

// 切换标签页
function switchTab(pageName) {
    // 移除所有标签的active类
    tabs.forEach(tab => {
        tab.classList.remove('active');
    });
    // 激活当前标签
    tabs.get(pageName).classList.add('active');

    // 隐藏所有内容
    contents.forEach(content => {
        content.style.display = 'none';
    });
    // 显示对应内容
    const contentId = pageName.replace('管理', '').replace('首页', 'home').replace('设置', 'setting') + 'Content';
    document.getElementById(contentId).style.display = 'block';
}

// 移除标签页
function removeTab(pageName) {
    const tab = tabs.get(pageName);
    if (!tab) return;

    const isActive = tab.classList.contains('active');
    tab.remove();
    tabs.delete(pageName);

    // 如果移除的是激活标签，切换到第一个标签
    if (isActive && tabs.size > 0) {
        const firstTabName = Array.from(tabs.keys())[0];
        switchTab(firstTabName);
    }
}

// 菜单点击事件
menuItems.forEach(item => {
    item.addEventListener('click', (e) => {
        e.preventDefault();
        const pageName = item.dataset.page;
        addTab(pageName);
    });
});

// 初始化添加首页标签
addTab('首页');

使用说明 #

1. 将上述代码分别保存为 index.html、styles.css、script.js，放在同一目录下
2. 打开 index.html 即可看到完整界面
3. 点击侧边栏按钮可折叠/展开侧边栏，点击菜单可添加对应标签页，点击标签页的关闭按钮可移除标签

内容的提问来源于stack exchange，提问作者Ammar Uddin