How I get this kind of drop shadow Direction, Shadow depth, Color shown in the Tooltip (Click me) in this image in WPF?

Question

I just want to know the Drop Shadow shadow depth, Direction, Blur radius, opacity of the tooltip? And what is the Hex Color code of a windows 10 Tooltip

Answer 1

You can get/set the values in the Tooltip's ControlTemplate.In my code, I set the name for the DropShadowEffect and get the value by using ElementName, then show the values in a Grid which included in parent grid.

<Window.Resources>
    <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" Background="White" >
                        <Border x:Name="Border" Margin="0,0,0,0" BorderThickness="0.5" Width="{TemplateBinding Width}" Height="150">
                            <Border.BorderBrush>
                                <SolidColorBrush Color="Gray" />
                            </Border.BorderBrush>
                            <Border.Effect>
                                <DropShadowEffect x:Name="Myeffect" ShadowDepth="6" Direction="135" Color="Maroon" Opacity="0.35" BlurRadius="0.0"/>
                            </Border.Effect>
                            <ContentPresenter Margin="4,0" HorizontalAlignment="Left" VerticalAlignment="Top" />
                        </Border>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="100"></ColumnDefinition>
                                <ColumnDefinition Width="60"></ColumnDefinition>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                                <RowDefinition></RowDefinition>
                            </Grid.RowDefinitions>
                            <TextBlock Grid.Row="0" Grid.Column="0">ShadowDepth:</TextBlock>
                            <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=ShadowDepth}"><!--Useful information goes here.--></TextBlock>
                            <TextBlock Grid.Row="1" Grid.Column="0">Direction:</TextBlock>
                            <TextBlock Grid.Row="1" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Direction}"><!--Useful information goes here.--></TextBlock>
                            <TextBlock Grid.Row="2" Grid.Column="0">Color:</TextBlock>
                            <TextBlock Grid.Row="2" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Color}"><!--Useful information goes here.--></TextBlock>
                            <TextBlock Grid.Row="3" Grid.Column="0">Opacity:</TextBlock>
                            <TextBlock Grid.Row="3" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=Opacity}"><!--Useful information goes here.--></TextBlock>
                            <TextBlock Grid.Row="4" Grid.Column="0">BlurRadius:</TextBlock>
                            <TextBlock Grid.Row="4" Grid.Column="1" Text="{Binding ElementName=Myeffect,Path=BlurRadius}"><!--Useful information goes here.--></TextBlock>
                        </Grid>
                    </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>
</Window.Resources>
<Grid>
    <Button Width="200" Height="50" HorizontalAlignment="Center" Content="Click Here">
        <Button.Template >
            <ControlTemplate TargetType="{x:Type Button}" >
                <Border BorderBrush="{TemplateBinding Control.BorderBrush}" BorderThickness="1" CornerRadius="7,7,7,7">
                    <Border.Background>#FFDDDDDD</Border.Background>
                    <ContentPresenter Content="{TemplateBinding ContentControl.Content}" HorizontalAlignment="Center" VerticalAlignment="Center" ></ContentPresenter>
                </Border>
            </ControlTemplate>
        </Button.Template>
        <Button.ToolTip>
            <ToolTip>
            </ToolTip>
        </Button.ToolTip>
    </Button>
</Grid>

The result is as below picture shown: