Search code examples
wpfxamltooltipborderdropshadow

How to get a drop shadow from a Tool tip WPF?


Here is my Code which I made by control template. I try <Border.Effect> but it does not work properly. Anybody does have any idea that how to implement drop shadow in custom made tool tip. I try to give a border in my template so that the shadow appear but still there no dropshadow.

        <Style x:Key="{x:Type ToolTip}"
   TargetType="ToolTip">
            <Setter Property="OverridesDefaultStyle"
      Value="True" />
            <Setter Property="HasDropShadow" 
      Value="True" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ToolTip}">

                        <Grid x:Name="grid" >
                            <Border x:Name="Border" Margin="0,0,0,0"
            BorderThickness="0.5"
                                
            Width="{TemplateBinding Width}"
            Height="19">
                                <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="Gray" />

                                </Border.BorderBrush>


                                <Border.Effect>

                                    <DropShadowEffect ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>

                                </Border.Effect>



                                <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>

Solution

  • The effect of Border.Background overrides the effect of Border.Effect.You set your all GradientStop to 'white',the effect is the same as just setting the background to White in here.To see the shadow, you can set the background of the Grid to white and remove the part of Border.Background.Here is my edited Grid part:

    <Grid x:Name="grid" Background="White" >
                            <Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="19">
                                <Border.BorderBrush>
                                    <SolidColorBrush Color="Gray" />
                                </Border.BorderBrush>
                                <Border.Effect>
                                    <DropShadowEffect ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
                                </Border.Effect>
                                <ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
                            </Border></Grid>