question

MMSunil-2457 avatar image
0 Votes"
MMSunil-2457 asked MMSunil-2457 commented

Baloon tooltip above the overlay using WPF

Hi Team,

I need a ballon kind of tooltip just above the overlay using WPF XAML C#.(I need tooltil same as below screenshot).
154491-image.png


dotnet-wpf-xaml
image.png (37.3 KiB)
· 4
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi,@MMSunil-2457. Do you want the bubble tooltip to be displayed only in the upper right corner? Is this kind of Baloon tooltip okay?
154614-image.png

0 Votes 0 ·
image.png (18.1 KiB)

Yes, I want balloon tooltip to be displayed only in the upper right corner always(static place).
I want the style of balloon tool tip to be same as there in my screenshot.

0 Votes 0 ·

Hi,@MMSunil-2457 . Are there any updates? Has the problem been solved? May I know if you have time to check my answer?

0 Votes 0 ·
Show more comments

1 Answer

HuiLiu-MSFT avatar image
0 Votes"
HuiLiu-MSFT answered MMSunil-2457 commented

Below is an example about Balloon tooltip above the overlay, you could try to refer to it. For the content of the tooltip position, you can refer to here.
MainWindow.xaml:

 <Window x:Class="tooltipballoon.MainWindow"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
         xmlns:local="clr-namespace:tooltipballoon"
         mc:Ignorable="d"  Name="window" Loaded="window_Loaded"
         Title="MainWindow" Height="450" Width="800">
     <Window.ToolTip>
         <ToolTip x:Name="tt">Press G to Surface or Hide</ToolTip>
     </Window.ToolTip>
     <Window.Resources>
         <Style x:Key="{x:Type ToolTip}" TargetType="ToolTip">
             <Setter Property="Placement" Value="Top"/>
             <Setter Property="PlacementTarget" Value="{Binding ElementName=winodw}"/>
             <Setter Property="PlacementRectangle" Value="10,0,700,0"/>
             <Setter Property="OverridesDefaultStyle" Value="true" />
             <Setter Property="HorizontalOffset" Value="250" />
             <Setter Property="VerticalOffset" Value="15" />
             <Setter Property="Background" Value="LightSkyBlue" />
             <Setter Property="Foreground" Value="White" />
             <Setter Property="Template">
                 <Setter.Value>
                     <ControlTemplate TargetType="ToolTip">
                         <Canvas Width="200" Height="100">
                             <Path x:Name="Container"
                   Canvas.Left="0" Canvas.Top="0"                                 
                   Margin="0" Data="M 0,45 L10,40  L160,40 C160,40 170,40 170,35 L170 10 C170,10 170,5 160,5 L10,5 C10,5 0,5 0,10 L0,35 C0,35 0,40 0,45 Z"                                    
                   Stroke="LightSkyBlue">
                                 <Path.Fill>
                                     <SolidColorBrush Color="DeepSkyBlue"/>
                                 </Path.Fill>
                             </Path>
                             <TextBlock Canvas.Left="15" Canvas.Top="15"  Width="200"
                        Height="55" Text="{TemplateBinding Content}" TextWrapping="Wrapwithoverflow" />
                         </Canvas>
                     </ControlTemplate>
                 </Setter.Value>
             </Setter>
         </Style>
     </Window.Resources>
     <Grid>
     </Grid>
 </Window>

MainWindow.xaml.cs:

 using System.Windows;
 using System.Windows.Input;
    
 namespace tooltipballoon
 {
   public partial class MainWindow : Window
   {
     public MainWindow()
     {
       InitializeComponent();
     }
     private void window_Loaded(object sender, RoutedEventArgs e)
     {
       var window = Window.GetWindow(this);
       window.KeyDown += windowKeyDown;
     }
     private void windowKeyDown(object sender, KeyEventArgs e)
     {
       var window =sender as Window;
          
       tt.PlacementTarget=window;
       if (e.Key == Key.G)
       {
         if (tt.IsOpen == false)
         {
           tt.IsOpen = true;
         }
         else
         {
           tt.IsOpen = false;
         }
       }
     }
   }
 }

The result:

154772-3.gif


If the response is helpful, please click "Accept Answer" and upvote it.
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.



2.gif (237.4 KiB)
3.gif (261.2 KiB)
· 1
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi @HuiLiu-MSFT

I have restarted my balloon tooltip work.
I had some queries regarding your last answer - Currently the path inside the canvas is hardcoded, Due to which the size of the container remains constant. I want to increase the container size to fit my tooltip message inside the container.
Instead of a path can I create a our own custom shape for bubble. OR can you tell us how to create our own custom path inside the canvas.

240510-image.png




0 Votes 0 ·
image.png (20.9 KiB)