如何仅用XAML实现WPF左右可调整大小Expander与中间自适应Grid布局

原代码失效的核心原因 #

• 把GridSplitter放在Expander内部，拖拽时只能影响Expander内部的布局，根本碰不到外层容器的尺寸，自然没法同步调整中间Grid的大小
• 内部Grid硬绑定Expander的ActualWidth形成自引用尺寸循环，WPF布局测量系统遇到这种循环引用会把控件宽度压缩到最小值，最终导致右侧Expander、中间Grid宽度为0，完全看不见
• 之前用DockPanel布局时，给中间Grid设置了HorizontalAlignment=Center，破坏了DockPanel默认的“最后一个元素填充剩余空间”的逻辑，把本来要撑满的中间栏挤成了窄条，根本显示不出来

推荐实现方案 #

这种左右可调整边栏、中间自适应内容的布局，最适合用带列定义的原生Grid实现。GridSplitter是Grid的原生配套控件，不需要手动写尺寸同步逻辑，调整时中间自适应列会自动适配剩余空间。

• 根Grid设置5列结构：左侧边栏列（固定初始宽度）、左分隔条列、中间主内容列（星号宽度自适应）、右分隔条列、右侧边栏列（固定初始宽度）
• 两个GridSplitter分别放在分隔条列上，直接对接相邻列的宽度调整逻辑
• 去掉Expander内部的自引用宽度绑定，所有子元素设置HorizontalAlignment=Stretch自动占满父容器可用空间

可直接运行的XAML代码 #

<Grid>
    <Grid.ColumnDefinitions>
        <!-- 左侧Expander列：可设置最小/最大宽度限制 -->
        <ColumnDefinition Width="250" MinWidth="180" MaxWidth="400"/>
        <!-- 左侧分隔条占位列 -->
        <ColumnDefinition Width="2"/>
        <!-- 中间主内容列：星号宽度自动占满剩余空间 -->
        <ColumnDefinition Width="*"/>
        <!-- 右侧分隔条占位列 -->
        <ColumnDefinition Width="2"/>
        <!-- 右侧Expander列：可设置最小/最大宽度限制 -->
        <ColumnDefinition Width="235" MinWidth="180" MaxWidth="350"/>
    </Grid.ColumnDefinitions>

    <!-- 左侧Expander -->
    <Expander 
        Grid.Column="0"
        x:Name="ProjectsExpander" 
        Header="Projects" 
        IsExpanded="True" 
        ExpandDirection="Right"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <Grid Background="#F5F5F5">
            <TextBlock Text="左侧项目列表内容" Margin="8"/>
        </Grid>
    </Expander>

    <!-- 左侧分隔条：拖拽时同步调整左列和中间列宽度 -->
    <GridSplitter 
        Grid.Column="1"
        Width="2"
        Background="LightGray"
        ResizeBehavior="PreviousAndCurrent"
        ResizeDirection="Columns"
        ShowsPreview="True"/>

    <!-- 中间主Grid -->
    <Grid 
        Grid.Column="2" 
        Background="Green">
        <TextBlock Text="Test" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    </Grid>

    <!-- 右侧分隔条：拖拽时同步调整中间列和右列宽度 -->
    <GridSplitter 
        Grid.Column="3"
        Width="2"
        Background="LightGray"
        ResizeBehavior="PreviousAndCurrent"
        ResizeDirection="Columns"
        ShowsPreview="True"/>

    <!-- 右侧Expander -->
    <Expander 
        Grid.Column="4"
        Header="Properties" 
        IsExpanded="True"
        ExpandDirection="Left"
        HorizontalAlignment="Stretch"
        VerticalAlignment="Stretch">
        <Grid Background="#F5F5F5">
            <TextBlock Text="右侧属性面板内容" Margin="8"/>
        </Grid>
    </Expander>
</Grid>

补充优化提示 #

• 拖拽分隔条时可以开启ShowsPreview属性，实时显示拖动时的宽度预览，调整体验更顺滑
• 如果需要Expander折叠时，对应边栏的宽度自动收缩到0，只需要把边栏列的Width通过值转换器绑定到对应Expander的IsExpanded属性即可，不需要额外写同步逻辑
• 给列设置MinWidth/MaxWidth，可以避免拖拽时把边栏缩到完全看不见，或者撑得太宽挤占中间内容空间

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