2012-03-12 6 views
6

私はWPFツールチップ上に、基本的にはスピーチバブルのようなスタイルを持っています。 WPFがウィンドウに収まるようにツールチップを再整列するので、コントロールがウィンドウの右側にあるときに、バブルの尖った部分が正しく整列しなくなります。ツールチップの配置方法に基づいて別のスタイルを適用する方法はありますか?WPFツールチップの配置

私のXAMLは、次のようになります。

<Style x:Key="MyToolTip" TargetType="{x:Type ToolTip}"> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type ToolTip}"> 
       <Grid x:Name="Grid"> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="20" /> 
         <RowDefinition Height="*" /> 
        </Grid.RowDefinitions> 
        <Rectangle Fill="#fff" Stroke="#FF000000" RadiusX="4" RadiusY="4" Grid.Row="1" /> 
        <Path Fill="#fff" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" Margin="8,0,0,-1.5" Width="20" Grid.Row="0" 
         Data="M 0,21 L 10,0 20,21" /> 
        <ContentPresenter Margin="8" Grid.Row="1" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
    <Setter Property="Placement" Value="Bottom" /> 
    <Setter Property="HorizontalOffset" Value="-2" /> 
    <Setter Property="Width" Value="250" /> 
    <Setter Property="Height" Value="Auto" /> 
</Style> 
+0

はい。トリガを使用します。 – NVM

+0

私はどのプロパティをトリガーですか? – sohum

+0

あなたはこれを今までに把握しましたか? – Chris

答えて

7

標準WPFのWindows 7スタイルStandard WPF Windows 7 style

私の意見では完璧に仕上げるマウスポインタでの標準的なWPFのツールチップの位置、

。あなたは、水平方向の調整を計算するために、スタイルにコードビハインドを必要とする、下記

絵はあなたが本当に求めているものをやりたい場合は、それが可能である

Styled ToolTip with no code-behind

あなたの問題を示しています算出された調整に先のとがった部分の境界線をToolTip.Tagにこれを入れて、バインド:

改訂ツールヒントスタイル -

<Style TargetType="{x:Type ToolTip}"> 
     <!-- As before, except Margin of the pointy part is now bound to calculated ToolTip.Tag --> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type ToolTip}"> 
        <Grid x:Name="Grid"> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="20" /> 
          <RowDefinition Height="*" /> 
         </Grid.RowDefinitions> 
         <Rectangle Fill="#fff" Stroke="#FF000000" RadiusX="4" RadiusY="4" Grid.Row="1" /> 
         <Path Fill="#fff" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" 
           Margin="{TemplateBinding Tag}" Width="20" Grid.Row="0" 
        Data="M 0,21 L 10,0 20,21" /> 
         <ContentPresenter Margin="8" Grid.Row="1" /> 
        </Grid> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
     <Setter Property="Placement" Value="Bottom" /> 
     <!-- Event to adjust horizontal position of the pointy part --> 
     <EventSetter Event="Opened" Handler="ToolTipOpenedHandler" /> 
    </Style> 

コードビハインド

private void ToolTipOpenedHandler(object sender, RoutedEventArgs e) 
{ 
    ToolTip toolTip = (ToolTip) sender; 
    UIElement target = toolTip.PlacementTarget; 
    Point adjust = target.TranslatePoint(new Point(8, 0), toolTip); 
    toolTip.Tag = new Thickness(adjust.X, 0, 0, -1.5); 
} 

これは尋ねた、

Styled ToolTip - Top Right

として、あなたの質問に答えるが、ツールチップは、画面の下部付近にあるときには十分ではありません。

Styled ToolTip - Bottom Right

これを修正するには、ツールヒントがターゲットの上にあることを検出するコードビハインド、およびツールヒントの位置を上に設定し、プロパティトリガースタイルを指定します。

完全なXAML(ワイド、ナロー、マルチラインtooptips)

<Window x:Class="WpfToolTip.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 

     Title="MainWindow" Height="250" Width="250"> 
    <Window.Resources> 
     <Style TargetType="{x:Type ToolTip}"> 
      <!-- As before, except Margin of the pointy part is now bound to calculated ToolTip.Tag --> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="{x:Type ToolTip}"> 
         <Grid x:Name="Grid"> 
          <Grid.RowDefinitions> 
           <RowDefinition Height="20" /> 
           <RowDefinition Height="*" /> 
          </Grid.RowDefinitions> 
          <Rectangle MinWidth="40" Fill="#fff" Stroke="#FF000000" RadiusX="4" RadiusY="4" Grid.Row="1" /> 
          <Path Fill="#fff" Stretch="Fill" Stroke="#FF000000" HorizontalAlignment="Left" 
            Margin="{TemplateBinding Tag}" Width="20" Grid.Row="0" 
         Data="M 0,21 L 10,0 20,21" /> 
          <ContentPresenter Margin="8" Grid.Row="1" /> 
         </Grid> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
      <Setter Property="Placement" Value="Bottom" /> 
      <!-- Event to adjust horizontal position of the pointy part --> 
      <EventSetter Event="Opened" Handler="ToolTipOpenedHandler" /> 
      <Style.Triggers> 
       <Trigger Property="Placement" Value="Top"> 
        <!-- When placement is Top, place the pointy part below the rectangle part --> 
        <Setter Property="Template"> 
         <Setter.Value> 
          <ControlTemplate TargetType="{x:Type ToolTip}"> 
           <Grid> 
            <Grid.RowDefinitions> 
             <RowDefinition Height="*" /> 
             <RowDefinition Height="20" /> 
            </Grid.RowDefinitions> 
            <Rectangle MinWidth="40" Fill="#fff" Stroke="#FF000000" RadiusX="4" RadiusY="4" Grid.Row="0" /> 
            <Path Fill="#fff" Stretch="None" Stroke="#FF000000" HorizontalAlignment="Left" Width="20" Grid.Row="1" 
             Data="M 0,0 L 10,20 20,0" Margin="{TemplateBinding Tag}" /> 
            <ContentPresenter Margin="8" Grid.Row="0" /> 
           </Grid> 
          </ControlTemplate> 
         </Setter.Value> 
        </Setter> 
       </Trigger> 
      </Style.Triggers> 
     </Style> 
    </Window.Resources> 
    <Grid> 
     <TextBlock VerticalAlignment="Top" HorizontalAlignment="Left" Background="Aqua" ToolTipService.ToolTip="ToolTip for TopLeft - MMMMMMMMMWWWWWWWWWW">TopLeft</TextBlock> 
     <TextBlock VerticalAlignment="Top" HorizontalAlignment="Right" Background="Aqua" ToolTipService.ToolTip="ToolTip for TopRight - MMMMMMMMMWWWWWWWWWW">TopRight</TextBlock> 
     <TextBlock VerticalAlignment="Center" HorizontalAlignment="Left" Background="Aqua" ToolTipService.ToolTip="i">CenterLeft</TextBlock> 
     <TextBlock VerticalAlignment="Center" HorizontalAlignment="Right" Background="Aqua" ToolTipService.ToolTip="i">CenterRight</TextBlock> 
     <TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Left" Background="Aqua" Text="BottomLeft"> 
      <TextBlock.ToolTip> 
       <TextBlock>Multi-line ToolTip for Bottomleft - MMMMMMMMMWWWWWWWWWW<LineBreak/>x<LineBreak/>y<LineBreak/>z</TextBlock> 
      </TextBlock.ToolTip> 
     </TextBlock> 
     <TextBlock VerticalAlignment="Bottom" HorizontalAlignment="Right" Background="Aqua" ToolTipService.ToolTip="ToolTip for BottomRight - MMMMMMMMMWWWWWWWWWW">BottomRight</TextBlock> 
    </Grid> 
</Window> 

コードビハインド

private void ToolTipOpenedHandler(object sender, RoutedEventArgs e) 
{ 
    ToolTip toolTip = (ToolTip)sender; 
    UIElement target = toolTip.PlacementTarget; 
    Point adjust = target.TranslatePoint(new Point(8, 0), toolTip); 
    if (adjust.Y > 0) 
    { 
     toolTip.Placement = PlacementMode.Top; 
    } 
    toolTip.Tag = new Thickness(adjust.X, -1.5, 0, -1.5); 
} 

最終結果

Final result - Top left

Final fixed result - Bottom right

ツールヒントが画面の右側付近にあるときに先のとがった部分は今、水平調整し、ツールチップは、画面の下部にある垂直場合。

関連する問題