Need help in winUI tooltip design

Smrithi Surendran 61 Reputation points
2022-09-22T10:47:41.127+00:00

Hi Team,

Could you please suggest a way to create tooltip in winUI. Image is attached

Windows App SDK
Windows App SDK
A set of Microsoft open-source libraries, frameworks, components, and tools to be used in apps to access Windows platform functionality on many versions of Windows. Previously known as Project Reunion.
727 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Castorix31 81,741 Reputation points
    2022-09-22T14:24:38.55+00:00

    You can do something like this (test on a Button, to be improved (I hardcoded sizes for the test) =>

                    ToolTip tt = new ToolTip();  
      
                    var polygon1 = new Polygon();  
                    polygon1.Fill = new SolidColorBrush(Microsoft.UI.Colors.LightSeaGreen);  
                    var points = new PointCollection();  
                    points.Add(new Windows.Foundation.Point(0, 100));  
                    points.Add(new Windows.Foundation.Point(60, 50));  
                    points.Add(new Windows.Foundation.Point(60, 100));  
                    points.Add(new Windows.Foundation.Point(60, 150));  
                    polygon1.Points = points;  
                    polygon1.Margin = new Thickness(0, 30, 0, 0);  
      
                    var rectangle1 = new Rectangle();  
                    rectangle1.Fill = new SolidColorBrush(Microsoft.UI.Colors.LightSeaGreen);  
                    rectangle1.Width = 400;  
                    rectangle1.Height = 260;  
                    rectangle1.RadiusX = 25;  
                    rectangle1.RadiusY = 25;  
      
                    var rectangle2 = new Rectangle();  
                    rectangle2.Fill = new SolidColorBrush(Microsoft.UI.Colors.RoyalBlue);  
                    rectangle2.Width = 400 - 60;  
                    rectangle2.Height = 260 - 60;  
                    rectangle2.Stroke = new SolidColorBrush(Microsoft.UI.Colors.Blue);  
                    rectangle2.StrokeThickness = 3;  
                    rectangle2.Margin = new Thickness(-400, 0, 0, 0);  
      
                    StackPanel sp = new StackPanel();  
                    sp.Orientation = Orientation.Horizontal;  
      
                    sp.Children.Add(polygon1);  
                    sp.Children.Add(rectangle1);  
                    sp.Children.Add(rectangle2);  
      
                    tt.Content = sp;  
                    tt.MaxWidth = 620;  
                    tt.Placement = PlacementMode.Right;  
      
                    TextBlock tb = new TextBlock();  
                    tb.HorizontalAlignment = HorizontalAlignment.Center;  
                    tb.VerticalAlignment = VerticalAlignment.Center;  
                    tb.Text = "This is a tooltip";  
                    tb.FontSize = 30;  
                    tb.Foreground = new SolidColorBrush(Microsoft.UI.Colors.Yellow);  
                    tb.Margin = new Thickness(-400, 0, 0, 0);  
      
                    sp.Children.Add(tb);  
      
                    tt.Style = Application.Current.Resources["MyToolTipStyle"] as Style;  
                    myButton.SetValue(ToolTipService.ToolTipProperty, tt);  
    

    In App.xaml : Updated Tooltip Style

    243884-tooltip-custom.gif

    1 person found this answer helpful.