页面设计需求，做了一个气泡形状的弹出框，效果如下：
设计思路如下：
1. 使用Path绘制气泡的尖尖，将这个放到顶层；
2. 在用border绘制长方形框，将这个放到底层，并且设置Margin值，使得Path图层和border看起来衔接在一起。
代码如下：
<Window x:Class="BubblePanelTest.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow"> <Window.Resources> <Style TargetType="Label" x:Key="TopBubblePanel"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Label}"> <Grid> <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top" Background="Yellow" HorizontalAlignment="Left" Margin="0,8.5,0,0" Padding="5"> <ContentPresenter /> </Border> <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10,0,0,0" Background="Transparent"> <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow"> <Path.Data> <PathGeometry Figures="M 0,10 L 0,10,5,0 L 5,0,10,10 "/> </Path.Data> </Path> </Canvas> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="Label" x:Key="BottomBubblePanel"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Label}"> <Grid> <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Bottom" Margin="0,0,0,8.5" Background="Yellow" HorizontalAlignment="Left" Padding="5"> <ContentPresenter /> </Border> <Canvas HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="10,0,0,0" Background="Transparent"> <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow"> <Path.Data> <PathGeometry Figures="M 0,0 L 0,0,5,10 L 5,10,10,0 "/> </Path.Data> </Path> </Canvas> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="Label" x:Key="LeftBubblePanel"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Label}"> <Grid> <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" VerticalAlignment="Top" Margin="8.5,0,0,0" Background="Yellow" HorizontalAlignment="Left" Padding="5"> <ContentPresenter /> </Border> <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0,10,0,0" Background="Transparent"> <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow"> <Path.Data> <PathGeometry Figures="M 10,0 L 10,0,0,5 L 0,5,10,10 "/> </Path.Data> </Path> </Canvas> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style TargetType="Label" x:Key="RightBubblePanel"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Label}"> <Grid HorizontalAlignment="Left"> <Border CornerRadius="4" BorderBrush="Black" BorderThickness="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,0,8.5,0" Background="Yellow" Padding="5"> <ContentPresenter /> </Border> <Canvas HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,10,0,0" Background="Transparent"> <Path Stroke="Black" StrokeThickness="0.5" Fill="Yellow"> <Path.Data> <PathGeometry Figures="M 0,0 L 0,0,10,5 L 10,5,0,10 "/> </Path.Data> </Path> </Canvas> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <StackPanel> <Label Tag="Top" Margin="2"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox/> </StackPanel> </StackPanel> </Label> <Label Tag="Top" Margin="2"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox/> </StackPanel> </StackPanel> </Label> <Label Tag="Top" Margin="2"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox/> </StackPanel> </StackPanel> </Label> <Label Tag="Top" Margin="2"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox/> </StackPanel> </StackPanel> </Label> <StackPanel Orientation="Horizontal" Margin="0,30,0,0"> <Button Content="Bottom" /> <Button Content="Top" /> <Button Content="Right" /> <Button Content="Left" /> </StackPanel> <Popup AllowsTransparency="True" StaysOpen="False" PopupAnimation="Slide" PlacementTarget="{Binding ElementName=btnTestPopup1}" Placement="Bottom" > <Label Tag="Top"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox /> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="确定" Margin="5" /> <Button Content="取消" Margin="5"/> </StackPanel> </StackPanel> </Label> </Popup> <Popup AllowsTransparency="True" StaysOpen="False" PopupAnimation="Fade" PlacementTarget="{Binding ElementName=btnTestPopup2}" Placement="Top" > <Label Tag="Top"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox /> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="确定" Margin="5"/> <Button Content="取消" Margin="5"/> </StackPanel> </StackPanel> </Label> </Popup> <Popup AllowsTransparency="True" StaysOpen="False" PopupAnimation="Scroll" PlacementTarget="{Binding ElementName=btnTestPopup3}" Placement="Right" > <Label Tag="Top"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox /> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="确定" Margin="5"/> <Button Content="取消" Margin="5"/> </StackPanel> </StackPanel> </Label> </Popup> <Popup AllowsTransparency="True" StaysOpen="False" PopupAnimation="None" PlacementTarget="{Binding ElementName=btnTestPopup4}" Placement="Left" > <Label Tag="Top"> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="abc" /> <TextBox /> </StackPanel> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Button Content="确定" Margin="5"/> <Button Content="取消" Margin="5"/> </StackPanel> </StackPanel> </Label> </Popup> </StackPanel> </Window>
后台代码，很简单，就是控制pupup显示或隐藏