美化一下WPF自带得ToolTip

对照一下原版和美化以后得版本

原版: ---------- 新版:

 

新增了 圆角阴影效果;

第一步:新建项,最下面有一个自定义控件,取名为CornerToolTip。

第二步:系统会创建一个CornerToolTip得类,默认继承自Control,我们把Control改成ToolTip:

第三步:系统生成CornerToolTip类得同时,还会生成一个Themes文件夹,里面会有一个Generic.xaml的资源字典,在这里面可以写自定义控件的样式,

CornerToolTip类里面的静态构造函数里面的下面的代码会去加载资源字典里面的控件对应的样式

DefaultStyleKeyProperty.OverrideMetadata(typeof(CornerToolTip), new FrameworkPropertyMetadata(typeof(CornerToolTip)));

第四步:

<Style TargetType="{x:Type local:CornerToolTip}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:CornerToolTip}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="5"/>
                            <ColumnDefinition Width="*" MinWidth="100"/>
                            <ColumnDefinition Width="5"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="5"/>
                            <RowDefinition Height="*" MinHeight="30"/>
                            <RowDefinition Height="5"/>
                        </Grid.RowDefinitions>
                        <Border BorderThickness="1" BorderBrush="#FF565353" Background="{StaticResource CornerToolTip.Background}"
                                CornerRadius="{TemplateBinding CornerRadius}"
                                Grid.Column="1" Grid.Row="1">
                            <Border.Effect>
                                <DropShadowEffect BlurRadius="8" Color="#FF4D4B4B" Direction="306" ShadowDepth="0" RenderingBias="Performance"/>
                            </Border.Effect>
                        </Border>
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" TextElement.Foreground="Black"
                                          Grid.Column="1" Grid.Row="1" x:Name="cp1"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

最后就可以使用ConerToolTip来替代原始得ToolTip了:

            <Button Content="MouseHoverHere" Height="30" Width="150">
                <Button.ToolTip>
                    <cc:CornerToolTip Content="what can i say" />
                </Button.ToolTip>
            </Button>

 

posted @ 2024-04-16 10:36  BearHan  阅读(172)  评论(0编辑  收藏  举报