WPF bubble style pop-up window effect code sharing, wpf bubble style pop-up window

WPF bubble style pop-up window effect code sharing, wpf bubble style pop-up window

The page design requirement is as follows:

 

The design concept is as follows:

1. Use Path to draw the tip of the bubble and place it to the top layer;

2. Draw a rectangular box with border, place the box to the bottom layer, and set the Margin value so that the Path layer and border seem to be connected together.

The Code is as follows:

<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 "Height =" 350 "Width =" 525 "> <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 "verticalignment =" Top "Background =" Yellow "HorizontalAlignment =" Left" margin = "0, 8.5, 0, 0 "Padding =" 5 "> <ContentPresenter/> </Border> <Canvas Width =" 10 "Height =" 10 "HorizontalAlignment =" Left "verticalignment =" Top "Margin = "10, 0, 0.5 "Background =" Transparent "> <Path Stroke =" Black "StrokeThickness =" "Fill =" Yellow "> <Path. data> <PathGeometry Figures = "m l, L,"/> </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, 8.5 "Background =" Yellow "HorizontalAlignment =" Left "Padding =" 5 "> <ContentPresenter/> </Border> <Canvas Width =" 10 "Height =" 10 "HorizontalAlignment = "Left" verticalignment = "Bottom" Margin = "10, 0, 0.5 "Background =" Transparent "> <Path Stroke =" Black "StrokeThickness =" "Fill =" Yellow "> <Path. data> <PathGeometry Figures = "m l, L,"/> </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 "Background =" Yellow "HorizontalAlignment =" Left "Padding =" 5 "> <ContentPresenter/> </Border> <Canvas Width =" 10 "Height =" 10 "HorizontalAlignment = "Left" verticalignment = "Top" Margin = "0, 10, 0.5 "Background =" Transparent "> <Path Stroke =" Black "StrokeThickness =" "Fill =" Yellow "> <Path. data> <PathGeometry Figures = "M 10, 0 L 10, 0, L,"/> </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 Width =" 10 "Height =" 10 "HorizontalAlignment =" Right "verticalignment = ""Top" Margin = "0, 10, 0.5 "Background =" Transparent "> <Path Stroke =" Black "StrokeThickness =" "Fill =" Yellow "> <Path. data> <PathGeometry Figures = "m l, L,"/> </Path. data> </Path> </Canvas> </Grid> </ControlTemplate> </Setter. value> </Setter> </Style> </Window. resources> <StackPanel> <Label Style = "{StaticResource TopBubblePanel}" Tag = "Top" Margin = "2"> <StackPanel Orientation = "Horizontal"> <TextBlock Text = "abc"/> <TextBox Width = "80"/> </StackPanel> </Label> <Label Style = "{StaticResource BottomBubblePanel}" Tag =" top "Margin =" 2 "> <StackPanel Orientation =" Horizontal "> <TextBlock Text =" abc "/> <TextBox Width =" 80 "/> </StackPanel> </StackPanel> </Label> <Label Style = "{StaticResource LeftBubblePanel}" Tag = "Top" Margin = "2"> <StackPanel Orientation = "Horizontal"> <TextBlock Text = "abc"/> <TextBox Width = "80"/> </StackPanel> </Label> <Label Style = "{StaticResource RightBubblePanel} "Tag =" Top "Margin =" 2 "> <StackPanel Orientation =" Horizontal "> <TextBlock Text =" abc "/> <TextBox Width =" 80 "/> </StackPanel> </Label> <StackPanel Orientation = "Horizontal" Margin = "0, 30, 100 "> <Button Name =" btnTestPopup1 "Width =" "Height =" 30 "Content =" Bottom "Click =" btnTestPopup1_Click "/> <Button Name =" btnTestPopup2 "Width = "100" Height = "30" Content = "Top" Click = "btnTestPopup2_Click"/> <Button Name = "btnTestPopup3" Width = "100" Height = "30" Content =" "Right" Click = "btnTestPopup3_Click"/> <Button Name = "btnTestPopup4" Width = "100" Height = "30" Content = "Left" Click = "btnTestPopup4_Click"/> </StackPanel> <Popup Name = "pop1" AllowsTransparency = "True" StaysOpen = "False" PopupAnimation = "Slide" PlacementTarget = "{Binding ElementName = comment}" Placement = "Bottom"> <Label Style = "{StaticResource TopBubblePanel}" Tag = "Top"> <StackPanel Orientation = "Horizontal"> <TextBlock Text = "abc"/> <TextBox Width = "80" Name = "txtTest1"/> </StackPanel> <StackPanel Orientation = "Horizontal" HorizontalAlignment = "Right"> <Button Content = "OK" Click = "btnOK1_Click" width = "50" Height = "25" Margin = "5"/> <Button Content = "cancel" Click = "btnCancel1_Click" Width = "50" Height = "25" Margin = "5"/> </StackPanel> </Label> </Popup> <Popup Name = "pop2" AllowsTransparency = "True" StaysOpen = "False" PopupAnimation = "Fade" PlacementTarget = "{Binding ElementName = btnTestPopup2}" Placement = "Top"> <Label Style = "{StaticResource BottomBubblePanel}" Tag = "Top"> <StackPanel> <stackPanel Orientation = "Horizontal"> <TextBlock Text = "abc"/> <TextBox Width = "80" Name = "txtTest2"/> </StackPanel> <StackPanel Orientation = "Horizontal "HorizontalAlignment =" Right "> <Button Content =" OK "Click =" btnOK2_Click "Width =" 50 "Height =" 25 "Margin =" 5 "/> <Button Content = "cancel" Click = "btnCancel2_Click" Width = "50" Height = "25" Margin = "5"/> </StackPanel> </Label> </Popup> <Popup Name = "pop3" AllowsTransparency = "True" StaysOpen = "False" PopupAnimation = "Scroll" PlacementTarget = "{Binding ElementName = btnTestPopup3}" Placement = "Right"> <label Style = "{StaticResource LeftBubblePanel}" Tag = "Top"> <StackPanel Orientation = "Horizontal"> <TextBlock Text = "abc"/> <TextBox Width =" 80 "Name =" txtTest3 "/> </StackPanel> <StackPanel Orientation =" Horizontal "HorizontalAlignment =" Right "> <Button Content =" OK "Click =" btnOK2_Click "Width = "50" Height = "25" Margin = "5"/> <Button Content = "cancel" Click = "btnCancel3_Click" Width = "50" Height = "25" Margin =" 5 "/> </StackPanel> </Label> </Popup> <Popup Name =" pop4 "AllowsTransparency =" True "StaysOpen =" False "PopupAnimation =" none "PlacementTarget =" {Binding ElementName = btnTestPopup4} "Placement =" Left "> <Label Style =" {StaticResource RightBubblePanel} "Tag =" Top "> <StackPanel Orientation = "Horizontal"> <TextBlock Text = "abc"/> <TextBox Width = "80" Name = "txtTest4"/> </StackPanel> <StackPanel Orientation = "Horizontal" HorizontalAlignment = "Right"> <Button Content = "OK" Click = "btnOK4_Click" Width = "50" Height = "25" Margin = "5"/> <Button Content = "cancel "Click =" btnCancel4_Click "Width =" 50 "Height =" 25 "Margin =" 5 "/> </StackPanel> </Label> </Popup> </StackPanel> </Window>

The background code, which is very simple, is to control pupup display or hide

private void btnTestPopup1_Click(object sender, RoutedEventArgs e)  {   pop1.IsOpen = true;  }  private void btnOK1_Click(object sender, RoutedEventArgs e)  {   pop1.IsOpen = false;  }  private void btnCancel1_Click(object sender, RoutedEventArgs e)  {   pop1.IsOpen = false;  }  private void btnTestPopup2_Click(object sender, RoutedEventArgs e)  {   pop2.IsOpen = true;  }  private void btnOK2_Click(object sender, RoutedEventArgs e)  {   pop2.IsOpen = false;  }  private void btnCancel2_Click(object sender, RoutedEventArgs e)  {   pop2.IsOpen = false;  }  private void btnTestPopup3_Click(object sender, RoutedEventArgs e)  {   pop3.IsOpen = true;  }  private void btnOK3_Click(object sender, RoutedEventArgs e)  {   pop3.IsOpen = false;  }  private void btnCancel3_Click(object sender, RoutedEventArgs e)  {   pop3.IsOpen = false;  }  private void btnTestPopup4_Click(object sender, RoutedEventArgs e)  {   pop4.IsOpen = true;  }  private void btnOK4_Click(object sender, RoutedEventArgs e)  {   pop4.IsOpen = false;  }  private void btnCancel4_Click(object sender, RoutedEventArgs e)  {   pop4.IsOpen = false;  }

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.