WPF 如何实现ComboBox下拉Popup边框与主控件边框无缝衔接

核心原因 #

WPF的Popup本质是独立的顶层窗口，渲染层级高于当前应用窗口的所有子元素，因此父容器内设置Panel.ZIndex无法生效，不需要尝试把Popup放到主控件下层，只要调整视觉样式实现无缝衔接即可。

修改步骤 #

1. 调整Popup纵向偏移，取消下拉容器的边距
2. 动态切换主控件/下拉框的圆角，展开时主控件底部改为直角，下拉框顶部改为直角
3. 统一阴影样式，避免衔接处出现双层阴影

具体代码修改 #

1. 修改Popup节点及内部布局

<Popup 
    Name="Popup"
    Placement="Bottom"
    IsOpen="{TemplateBinding IsDropDownOpen}"
    AllowsTransparency="True" 
    Focusable="False"
    PopupAnimation="Slide"
    VerticalOffset="-2"> <!-- 新增纵向偏移，贴合主控件底部 -->

    <Grid Name="DropDown"
          SnapsToDevicePixels="True"                
          MinWidth="{TemplateBinding ActualWidth}"
          MaxHeight="{TemplateBinding MaxDropDownHeight}"
          Margin="0"> <!-- 把原有15,15,15,15的边距改为0 -->
        <Border 
            x:Name="DropDownBorder"
            Background="White"
            BorderThickness="0"
            CornerRadius="0,0,4,4"> <!-- 新增圆角设置，底部保留圆角，顶部为直角 -->
            <Border.Effect>
                <DropShadowEffect ShadowDepth="0"
                                  Color="Black"
                                  Opacity="0.29"
                                  BlurRadius="5"/>
            </Border.Effect>
        </Border>
        <ScrollViewer Margin="4,6,4,6" SnapsToDevicePixels="True">
            <StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Contained" />
        </ScrollViewer>
    </Grid>
</Popup>

2. 新增下拉展开状态触发器

在ComboBox的ControlTemplate.Triggers节点下新增以下触发器，控制展开时主控件的圆角样式：

<Trigger Property="IsDropDownOpen" Value="True">
    <Setter TargetName="ToggleButton" Property="Border.CornerRadius" Value="4,4,0,0"/>
</Trigger>

3. 清理冗余设置

删除原有Popup.AllowsTransparency触发器中对DropDownBorder.Margin的设置，避免和偏移配置冲突。

修改后即可实现主控件和下拉框的无缝衔接，和设计稿效果一致。

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