WPF弹框阴影与内容一起显示且不会被切割的样式方法

最新推荐文章于 2025-05-13 00:57:00 发布

原创最新推荐文章于 2025-05-13 00:57:00 发布 · 311 阅读

0 ·

CC 4.0 BY-SA版权

WPF 同时被 2 个专栏收录

64 篇文章

订阅专栏

经验笔记

37 篇文章

订阅专栏

本文介绍如何在 WPF 应用中使用 Popup 控件实现带有阴影效果的下拉菜单，通过设置 Border 和 DropShadowEffect 属性，创建美观且响应式的用户界面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 更多按钮弹框 -->
<Popup x:Name="unfoldPopup"
	   PopupAnimation="Fade"  
	   AllowsTransparency="True"
	   HorizontalOffset="-30" VerticalOffset="-5" 
	   Placement="Bottom" 
	   PlacementTarget="{Binding ElementName=unfold}" 
	   StaysOpen="False">
	<Grid Margin="20">
		<Border CornerRadius="4" Background="White" Style="{StaticResource ShadowSmallOuterGlow}"/>
		<ListBox Style="{StaticResource unfoldListStyle}"
				 ItemsSource="{Binding NaviListFold}" 
				 SelectedIndex="{Binding NaviListFoldSelectedIndex,Mode=TwoWay}"
				 SelectionChanged="OnNavigateToMore"/>
	</Grid>
</Popup>

grid要留margin=20的距离,这样阴影就可以在弹框里撑开了,例子中阴影样式如下:

<Style x:Key="ShadowSmallOuterGlow" TargetType="{x:Type Border}">
	<Setter Property="Effect">
		<Setter.Value>
			<DropShadowEffect BlurRadius="20" Color="Black" Opacity="0.1" RenderingBias="Quality" ShadowDepth="0"/>
		</Setter.Value>
	</Setter>
</Style>