Partager via


Comment : positionner une info-bulle

Cet exemple montre comment spécifier la position d’une info-bulle sur l’écran.

Exemple

Vous pouvez positionner une info-bulle à l’aide d’un ensemble de cinq propriétés définies dans les classes et ToolTipService les ToolTip classes. Le tableau suivant présente ces deux ensembles de cinq propriétés et fournit des liens vers leur documentation de référence en fonction de la classe.

Propriétés d’info-bulle correspondantes en fonction de la classe

System.Windows.Controls.ToolTip propriétés de classe System.Windows.Controls.ToolTipService propriétés de classe
ToolTip.Placement ToolTipService.Placement
ToolTip.PlacementTarget ToolTipService.PlacementTarget
ToolTip.PlacementRectangle ToolTipService.PlacementRectangle
ToolTip.HorizontalOffset ToolTipService.HorizontalOffset
ToolTip.VerticalOffset ToolTipService.VerticalOffset

Si vous définissez le contenu d’une info-bulle à l’aide d’un ToolTip objet, vous pouvez utiliser les propriétés de l’une ou l’autre classe . Toutefois, les ToolTipService propriétés sont prioritaires. Utilisez les ToolTipService propriétés des info-bulles qui ne sont pas définies en tant qu’objets ToolTip .

Les illustrations suivantes montrent comment positionner une info-bulle à l’aide de ces propriétés. Bien que les exemples XAML (Extensible Application Markup Language) de ces illustrations montrent comment définir les propriétés définies par la ToolTip classe, les propriétés correspondantes de la ToolTipService classe suivent les mêmes règles de disposition. Pour plus d’informations sur les valeurs possibles pour la propriété Placement, consultez Comportement de placement de fenêtre contextuelle.

L’image suivante montre le positionnement de l’info-bulle à l’aide de la propriété Placement :

Diagram showing ToolTip placement by using the Placement property.

L’image suivante montre le positionnement de l’info-bulle à l’aide des propriétés Placement et PlacementRectangle :

Diagram showing ToolTip placement by using a PlacementRectangle property.

L’image suivante montre le positionnement de l’info-bulle à l’aide des propriétés Placement, PlacementRectangle et Offset :

Diagram showing ToolTip placement by using the Offset property.

L’exemple suivant montre comment utiliser les ToolTip propriétés pour spécifier la position d’une info-bulle dont le contenu est un ToolTip objet.

<Ellipse Height="25" Width="50" 
         Fill="Gray" 
         HorizontalAlignment="Left"
         ToolTipService.InitialShowDelay="1000"
         ToolTipService.ShowDuration="7000"
         ToolTipService.BetweenShowDelay="2000">
  <Ellipse.ToolTip>
    <ToolTip Placement="Right" 
             PlacementRectangle="50,0,0,0"
             HorizontalOffset="10" 
             VerticalOffset="20"
             HasDropShadow="false"
             Opened="whenToolTipOpens"
             Closed="whenToolTipCloses"
             >
      <BulletDecorator>
        <BulletDecorator.Bullet>
          <Ellipse Height="10" Width="20" Fill="Blue"/>
        </BulletDecorator.Bullet>
        <TextBlock>Uses the ToolTip Class</TextBlock>
      </BulletDecorator>
    </ToolTip>
  </Ellipse.ToolTip>
</Ellipse>

//Create an ellipse that will have a
//ToolTip control.
Ellipse ellipse1 = new Ellipse();
ellipse1.Height = 25;
ellipse1.Width = 50;
ellipse1.Fill = Brushes.Gray;
ellipse1.HorizontalAlignment = HorizontalAlignment.Left;

//Create a tooltip and set its position.
ToolTip tooltip = new ToolTip();
tooltip.Placement = PlacementMode.Right;
tooltip.PlacementRectangle = new Rect(50, 0, 0, 0);
tooltip.HorizontalOffset = 10;
tooltip.VerticalOffset = 20;

//Create BulletDecorator and set it
//as the tooltip content.
BulletDecorator bdec = new BulletDecorator();
Ellipse littleEllipse = new Ellipse();
littleEllipse.Height = 10;
littleEllipse.Width = 20;
littleEllipse.Fill = Brushes.Blue;
bdec.Bullet = littleEllipse;
TextBlock tipText = new TextBlock();
tipText.Text = "Uses the ToolTip class";
bdec.Child = tipText;
tooltip.Content = bdec;

//set tooltip on ellipse
ellipse1.ToolTip = tooltip;
'Create an ellipse that will have a 
'ToolTip control. 
Dim ellipse1 As New Ellipse()
ellipse1.Height = 25
ellipse1.Width = 50
ellipse1.Fill = Brushes.Gray
ellipse1.HorizontalAlignment = HorizontalAlignment.Left

'Create a tooltip and set its position.
Dim tooltip As New ToolTip()
tooltip.Placement = PlacementMode.Right
tooltip.PlacementRectangle = New Rect(50, 0, 0, 0)
tooltip.HorizontalOffset = 10
tooltip.VerticalOffset = 20

'Create BulletDecorator and set it
'as the tooltip content.
Dim bdec As New BulletDecorator()
Dim littleEllipse As New Ellipse()
littleEllipse.Height = 10
littleEllipse.Width = 20
littleEllipse.Fill = Brushes.Blue
bdec.Bullet = littleEllipse
Dim tipText As New TextBlock()
tipText.Text = "Uses the ToolTip class"
bdec.Child = tipText
tooltip.Content = bdec

'set tooltip on ellipse
ellipse1.ToolTip = tooltip

L’exemple suivant montre comment utiliser les ToolTipService propriétés pour spécifier la position d’une info-bulle dont le contenu n’est pas un ToolTip objet.

<Ellipse Height="25" Width="50" 
      Fill="Gray" 
      HorizontalAlignment="Left"
      ToolTipService.InitialShowDelay="1000"
      ToolTipService.ShowDuration="7000"
      ToolTipService.BetweenShowDelay="2000"
      ToolTipService.Placement="Right" 
      ToolTipService.PlacementRectangle="50,0,0,0"
      ToolTipService.HorizontalOffset="10" 
      ToolTipService.VerticalOffset="20"
      ToolTipService.HasDropShadow="false"
      ToolTipService.ShowOnDisabled="true" 
      ToolTipService.IsEnabled="true"
      ToolTipOpening="whenToolTipOpens"
      ToolTipClosing="whenToolTipCloses"
      >
  <Ellipse.ToolTip>
    <BulletDecorator>
      <BulletDecorator.Bullet>
        <Ellipse Height="10" Width="20" Fill="Blue"/>
      </BulletDecorator.Bullet>
      <TextBlock>Uses the ToolTipService class</TextBlock>
    </BulletDecorator>
  </Ellipse.ToolTip>
</Ellipse>

//Create and Ellipse with the BulletDecorator as
//the tooltip
Ellipse ellipse2 = new Ellipse();
ellipse2.Name = "ellipse2";
this.RegisterName(ellipse2.Name, ellipse2);
ellipse2.Height = 25;
ellipse2.Width = 50;
ellipse2.Fill = Brushes.Gray;
ellipse2.HorizontalAlignment = HorizontalAlignment.Left;

//set tooltip timing
ToolTipService.SetInitialShowDelay(ellipse2, 1000);
ToolTipService.SetBetweenShowDelay(ellipse2, 2000);
ToolTipService.SetShowDuration(ellipse2, 7000);

//set tooltip placement

ToolTipService.SetPlacement(ellipse2, PlacementMode.Right);

ToolTipService.SetPlacementRectangle(ellipse2,
    new Rect(50, 0, 0, 0));

ToolTipService.SetHorizontalOffset(ellipse2, 10.0);

ToolTipService.SetVerticalOffset(ellipse2, 20.0);


ToolTipService.SetHasDropShadow(ellipse2, false);

ToolTipService.SetIsEnabled(ellipse2, true);

ToolTipService.SetShowOnDisabled(ellipse2, true);

ellipse2.AddHandler(ToolTipService.ToolTipOpeningEvent,
    new RoutedEventHandler(whenToolTipOpens));
ellipse2.AddHandler(ToolTipService.ToolTipClosingEvent,
    new RoutedEventHandler(whenToolTipCloses));

//define tooltip content
BulletDecorator bdec2 = new BulletDecorator();
Ellipse littleEllipse2 = new Ellipse();
littleEllipse2.Height = 10;
littleEllipse2.Width = 20;
littleEllipse2.Fill = Brushes.Blue;
bdec2.Bullet = littleEllipse2;
TextBlock tipText2 = new TextBlock();
tipText2.Text = "Uses the ToolTipService class";
bdec2.Child = tipText2;
ToolTipService.SetToolTip(ellipse2, bdec2);
stackPanel_1_2.Children.Add(ellipse2);

'Create and Ellipse with the BulletDecorator as 
'the tooltip 
Dim ellipse2 As New Ellipse()
ellipse2.Name = "ellipse2"
Me.RegisterName(ellipse2.Name, ellipse2)
ellipse2.Height = 25
ellipse2.Width = 50
ellipse2.Fill = Brushes.Gray
ellipse2.HorizontalAlignment = HorizontalAlignment.Left

'set tooltip timing
ToolTipService.SetInitialShowDelay(ellipse2, 1000)
ToolTipService.SetBetweenShowDelay(ellipse2, 2000)
ToolTipService.SetShowDuration(ellipse2, 7000)

'set tooltip placement

ToolTipService.SetPlacement(ellipse2, PlacementMode.Right)

ToolTipService.SetPlacementRectangle(ellipse2, New Rect(50, 0, 0, 0))

ToolTipService.SetHorizontalOffset(ellipse2, 10.0)

ToolTipService.SetVerticalOffset(ellipse2, 20.0)


ToolTipService.SetHasDropShadow(ellipse2, False)

ToolTipService.SetIsEnabled(ellipse2, True)

ToolTipService.SetShowOnDisabled(ellipse2, True)

ellipse2.AddHandler(ToolTipService.ToolTipOpeningEvent, New RoutedEventHandler(AddressOf whenToolTipOpens))
ellipse2.AddHandler(ToolTipService.ToolTipClosingEvent, New RoutedEventHandler(AddressOf whenToolTipCloses))

'define tooltip content
Dim bdec2 As New BulletDecorator()
Dim littleEllipse2 As New Ellipse()
littleEllipse2.Height = 10
littleEllipse2.Width = 20
littleEllipse2.Fill = Brushes.Blue
bdec2.Bullet = littleEllipse2
Dim tipText2 As New TextBlock()
tipText2.Text = "Uses the ToolTipService class"
bdec2.Child = tipText2
ToolTipService.SetToolTip(ellipse2, bdec2)
stackPanel_1_2.Children.Add(ellipse2)

Voir aussi