Radzen Blazor侧边栏展开/折叠功能失效问题求助

问题根源 #

你的代码存在两个核心问题导致侧边栏无响应：

1. RadzenSidebar未绑定状态变量：你修改了sidebarExpanded但没把它和RadzenSidebar的Expanded属性绑定，组件无法感知状态变化。
2. 固定宽度覆盖了组件自适应逻辑：给RadzenSidebar设置了Style="width: max-content"，导致即使PanelMenu切换了显示样式，侧边栏宽度不会跟着变化，视觉上没有展开/折叠的效果。

修复方案 #

1. 绑定RadzenSidebar的Expanded属性 #

将sidebarExpanded变量绑定到RadzenSidebar的Expanded属性，让组件状态与变量同步。

2. 移除固定宽度或动态控制宽度 #

去掉Style="width: max-content"，改用RadzenSidebar的内置宽度控制，或者根据sidebarExpanded动态设置宽度。

3. 简化Toggle逻辑（可选） #

RadzenSidebarToggle支持直接绑定Expanded属性，无需手动编写Toggle方法，更简洁。

修改后的完整代码 #

@inherits LayoutComponentBase
@using Radzen
@using Radzen.Blazor
<RadzenComponents @rendermode="InteractiveServer" />

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <!-- 直接绑定Expanded属性，无需手动写Toggle方法 -->
            <RadzenSidebarToggle Expanded="@sidebarExpanded" ExpandedChanged="@((value) => sidebarExpanded = value)" />
            <RadzenLabel Text="Header" />
        </RadzenStack>
    </RadzenHeader>
    <!-- 绑定Expanded属性，移除固定宽度 -->
    <RadzenSidebar Responsive="false" Expanded="@sidebarExpanded">
        <RadzenPanelMenu DisplayStyle="@(sidebarExpanded ? MenuItemDisplayStyle.IconAndText : MenuItemDisplayStyle.Icon)" ShowArrow="false">
            <RadzenPanelMenuItem Text="Overview" Icon="home" Path="/" />
            <RadzenPanelMenuItem Text="Dashboard" Icon="dashboard" Path="counter" />
            <RadzenPanelMenuItem Text="UI Fundamentals" Icon="auto_awesome">
                <RadzenPanelMenuItem Text="Themes" Icon="color_lens" />
                <RadzenPanelMenuItem Text="Colors" Icon="invert_colors" />
            </RadzenPanelMenuItem>
        </RadzenPanelMenu>
    </RadzenSidebar>
    
    <div class="rz-p-4">
        @Body
    </div>
    <RadzenFooter>
        Footer
    </RadzenFooter>
</RadzenLayout>

@code {
    bool sidebarExpanded = true;
}

关键说明 #

• RadzenSidebar的Expanded属性是控制侧边栏展开/折叠的核心，必须与状态变量绑定才能实现双向同步。
• 移除固定宽度后，RadzenSidebar会根据内部内容自动调整宽度，配合PanelMenu的DisplayStyle切换，就能实现图标/图标+文本的折叠效果。
• 使用RadzenSidebarToggle的ExpandedChanged事件可以自动更新状态变量，省去手动编写ToggleSidebar方法的步骤。

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