Search code examples
wpfxamltooltipdelaydatatrigger

ToolTip appears Instantly in WPF. Does not trigger Initial delay


I have two buttons in Main.Xaml. I declare ToolTip for each of them. They have a very small gap which is barely visible with open eyes but still they have gap which you you can see by their Margin.

    <Button
    Style="{StaticResource RoundCorner}"
        x:Name="button1" Width="71" HorizontalAlignment="Left" Margin="165,14,0,0" Height="24" 
     VerticalAlignment="Top"  UseLayoutRounding="True"  RenderOptions.ClearTypeHint="Enabled"  RenderOptions.BitmapScalingMode="NearestNeighbor"   SnapsToDevicePixels="True"        
                   >
            <Button.Content  >
                <TextBlock FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display"  Margin="0,-2,0,0" >
                    Settings
                </TextBlock>
                </Button.Content>
              <Button.ToolTip >
<ToolTip Style="{StaticResource ToolTipDefaults}"   UseLayoutRounding="True"  RenderOptions.ClearTypeHint="Enabled"  RenderOptions.BitmapScalingMode="NearestNeighbor"   SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display"
                    >
                    <StackPanel>
                        <TextBlock  FontFamily="Segoe UI"  FontSize="12"  TextOptions.TextFormattingMode="Display"    > 
                           Settings
                        </TextBlock>
                    </StackPanel>
                  </ToolTip>
            </Button.ToolTip>
        </Button>


           `enter code here`<Button
    Style="{StaticResource RoundCorner}"
        x:Name="button2" Width="71" HorizontalAlignment="Left" Margin="237,14,0,0" Height="24" 
     VerticalAlignment="Top"  UseLayoutRounding="True"  RenderOptions.ClearTypeHint="Enabled"  RenderOptions.BitmapScalingMode="NearestNeighbor"   SnapsToDevicePixels="True"        
                   >
            <Button.Content                                               >
                <TextBlock FontSize="10" FontFamily="Segoe UI" UseLayoutRounding="True" TextOptions.TextFormattingMode="Display"  Margin="0,-2,0,0" >
                    Settings
                </TextBlock>
                </Button.Content>
              <Button.ToolTip >
<ToolTip Style="{StaticResource ToolTipDefaults}"   UseLayoutRounding="True"  RenderOptions.ClearTypeHint="Enabled"  RenderOptions.BitmapScalingMode="NearestNeighbor"   SnapsToDevicePixels="True" TextOptions.TextFormattingMode="Display"
                    >
                    <StackPanel>
                        <TextBlock  FontFamily="Segoe UI"  FontSize="12"  TextOptions.TextFormattingMode="Display"    > 
                           Settings
                        </TextBlock>
                    </StackPanel>
                  </ToolTip>
            </Button.ToolTip>
        </Button>

I have created two control template one is for button which is consider as "RoundCorner" and declare as StaticResource of buttons in Main.XAMl. And another is for ToolTip.

Here is the Code for RoundCorner Controltemplate(Button) --

<Style x:Key="RoundCorner" TargetType="{x:Type Button}" x:Name="RoundCornerButton"  >
                <Setter Property="HorizontalContentAlignment" Value="Center"/>
                <Setter Property="VerticalContentAlignment" Value="Center"/>
                <Setter Property="Padding" Value="1"/>
                <Setter Property="Foreground" Value="#bababa" />
               <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Grid x:Name="grid" >
                                <Border x:Name="border" CornerRadius="1"  BorderThickness="0"  >
                                    <Border.Background>
                                        <RadialGradientBrush GradientOrigin="0.496,1.052">
                                            <RadialGradientBrush.RelativeTransform>
                                                <TransformGroup>
                                                    <ScaleTransform CenterX="0.5" CenterY="0.5" 
                                                        ScaleX="1.5" ScaleY="1.5"/>
                                                    <TranslateTransform X="0.02" Y="0.3"/>
                                                </TransformGroup>
                                            </RadialGradientBrush.RelativeTransform>
                                            <GradientStop Offset="1" Color="#282828"/>
                                            <GradientStop Offset="0.3" Color="#282828"/>
                                        </RadialGradientBrush>
                                    </Border.Background>
                                    <ContentPresenter                                                           
                                        HorizontalAlignment="Center"
                                        VerticalAlignment="Center"
                                          >
                                    </ContentPresenter>
                                </Border>

                            </Grid>

                            <ControlTemplate.Triggers>

                                <Trigger Property="IsMouseOver" Value="True">
                                    <Setter Property="Background" TargetName="border" Value="#202020"/>
                                    <Setter Property="Foreground" Value="WhiteSmoke" />
                                   
                                </Trigger>

                              <Trigger Property="IsPressed" Value="True">
                                    <Setter Property="Background" TargetName="border">
                                        <Setter.Value>
                                            <RadialGradientBrush GradientOrigin="0.496,1.052">
                                                <RadialGradientBrush.RelativeTransform>
                                                    <TransformGroup>
                                                        <ScaleTransform CenterX="0.5" CenterY="0.5" ScaleX="1.5" ScaleY="1.5"/>
                                                        <TranslateTransform X="0.02" Y="0.3"/>
                                                    </TransformGroup>
                                                </RadialGradientBrush.RelativeTransform>
                                                <GradientStop Color="#161616" Offset="1"/>
                                                <GradientStop Color="#161616" Offset="0.3"/>
                                            </RadialGradientBrush>
                                        </Setter.Value>
                                    </Setter>
                                </Trigger>

                          </ControlTemplate.Triggers>

                        </ControlTemplate>
                    </Setter.Value>
                </Setter>

                 </Style>

Here is the Control template code for Tooltip--

<Style x:Key="ToolTipDefaults" x:Name="NewTooltip"
       TargetType="{x:Type ToolTip}">
                <Setter Property="OverridesDefaultStyle"
          Value="True" />
                <Setter Property="HasDropShadow" 
          Value="True" />
                <Setter Property="ToolTipService.Placement"
          Value="MousePoint" />
                <Setter Property="ToolTipService.VerticalOffset"
          Value="5"   />
                <Setter Property="ToolTipService.HorizontalOffset"
          Value="-10" />
                <Setter Property="Foreground"
          Value="#606060"/>
                <Setter Property="ToolTipService.InitialShowDelay"
          Value="1000" />
                <Setter Property="ToolTipService.BetweenShowDelay"
          Value="0" />
                <Setter Property="ToolTipService.ShowDuration"
          Value="6000" />

                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type ToolTip}">

                            <Grid x:Name="grid"  Margin="10"  >

                                <Border x:Name="Bordermini"  HorizontalAlignment="Right" 
                BorderThickness="0.5"  
                                    
                Width="{TemplateBinding Width}"
                Height="15">
                        
                                    <Border.Background>
                                        <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStopCollection>
                                                    <GradientStop Color="White"
                                Offset="0.0" />
                                                    <GradientStop Color="White"
                                Offset="1.0" />
                                                </GradientStopCollection>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>

                                    </Border.Background>

                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="Gainsboro" />
                                    </Border.BorderBrush>

                                    <Border.Effect>

                                        <DropShadowEffect   Opacity="0.8"  BlurRadius="5"  Direction="-82" ShadowDepth="3.8" Color="#282828"      >
                                    </DropShadowEffect>

                                    </Border.Effect>

                          <ContentPresenter Margin="1.5,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top" />
                                </Border>

                 <Border x:Name="Border"  HorizontalAlignment="Right"
                BorderThickness="0.5"  
                                    
                Width="{TemplateBinding Width}"
                Height="19">
                                    <Border.Background>
                                        <LinearGradientBrush StartPoint="0,0"
                                 EndPoint="0,1">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStopCollection>
                                                    <GradientStop Color="#ffffff"
                                Offset="0.0" />
                                                    <GradientStop Color="#ffffff"
                                Offset="1.0" />
                                                </GradientStopCollection>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>

                                    </Border.Background>

                                    <Border.BorderBrush>
                                        <SolidColorBrush Color="Gray" />
                                    </Border.BorderBrush>

                                    <ContentPresenter Margin="4,0"
                            HorizontalAlignment="Left"
                            VerticalAlignment="Top" />
                                </Border>

                            </Grid>

                            <ControlTemplate.Triggers>
                                <Trigger Property="HasDropShadow" Value="True" >

                                    <Setter TargetName="Border"
                    Property="CornerRadius"
                    Value="0" />
                                    <Setter TargetName="Border"
                    Property="SnapsToDevicePixels"
                    Value="true" />
                            </Trigger>

                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                     </Setter.Value>
                </Setter>
            </Style>

So, How I re trigger the initial delay as soon as I quickly move the mouse cursor from one button to another? Is there any need to use the "Datatrigger" or "DataBinding" to overcome this issue?


Solution

  • 1:Open the Nuget of your package,search and add YshXaf.DevExpress.Mvvm_yesfree and YshXaf.DevExpress.Xpf.Core_yesfree.

    2:Add below class and using DevExpress.Mvvm.UI.Interactivity for it.

    public class ToolTipBehavior : Behavior<FrameworkElement>
    {
        private object _popupControlService;
        private PropertyInfo _toolTipTimerProperty;
        protected override void OnAttached()
        {
            base.OnAttached();
            var popControlServiceProperty = typeof(FrameworkElement).GetProperty("PopupControlService", BindingFlags.Static | BindingFlags.NonPublic);
            _popupControlService = popControlServiceProperty.GetValue(this.AssociatedObject);
            _toolTipTimerProperty = _popupControlService.GetType().GetProperty("ToolTipTimer", BindingFlags.Instance | BindingFlags.NonPublic);
            this.AssociatedObject.ToolTipClosing += AssociatedObject_ToolTipClosing;
        }
    
        void AssociatedObject_ToolTipClosing(object sender, ToolTipEventArgs e)
        {
            _toolTipTimerProperty.SetValue(_popupControlService, new DispatcherTimer());
        }
        protected override void OnDetaching()
        {
            base.OnDetaching();
        }
    }
    

    3: Add xmlns:dxmvvm="http://schemas.devexpress.com/winfx/2008/xaml/mvvm" in the Xaml.Then use the ToolTipBeahvior in your RoundCorner.

     <Setter Property="dxmvvm:Interaction.BehaviorsTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <ContentControl>
                            <local:ToolTipBehavior/>
                        </ContentControl>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
    

    Here is the result picture: enter image description here