WPF自定义控件（具有提示信息的按钮）

外观样式

<Style TargetType="{x:Type local:ToolTipButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ToolTipButton}">
                    <Grid x:Name="grid" Height="{TemplateBinding Height}" Width="{TemplateBinding Width}" Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
                        <Grid.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform/>
                                <SkewTransform/>
                                <RotateTransform/>
                                <TranslateTransform/>
                            </TransformGroup>
                        </Grid.RenderTransform>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="auto"/>
                        </Grid.RowDefinitions>
                        <Path x:Name="icon" Grid.Row="0" Stretch="Fill" Stroke="{TemplateBinding Foreground}" Data="{TemplateBinding PathData}" RenderTransformOrigin="0.5,0.5">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <Border x:Name="border" Grid.Row="1" Height="0">
                            <TextBlock x:Name="textBlock" Text="{TemplateBinding TipText}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center"/>
                        </Border>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <EventTrigger RoutedEvent="UIElement.MouseEnter">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="icon">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.6">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="icon">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0.6">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="border">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="14">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="UIElement.MouseLeave">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="icon">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="icon">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="0.6"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="1">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Height)" Storyboard.TargetName="border">
                                        <EasingDoubleKeyFrame KeyTime="0:0:0" Value="14"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="0">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="ButtonBase.Click">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[2].(RotateTransform.Angle)">
                                        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="00:00:00.3" Value="360"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <!--<DoubleAnimationUsingKeyFrames Storyboard.TargetName="grid" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.Y)">
                                        <EasingDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
                                        <EasingDoubleKeyFrame KeyTime="00:00:00.2" Value="-20"/>
                                        <EasingDoubleKeyFrame KeyTime="00:00:00.4" Value="0"/>
                                    </DoubleAnimationUsingKeyFrames>-->
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <!--<EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonDown">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.1">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1.1">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>
                        <EventTrigger RoutedEvent="UIElement.PreviewMouseLeftButtonUp">
                            <BeginStoryboard>
                                <Storyboard>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1.1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
                                        <EasingDoubleKeyFrame KeyTime="0" Value="1.1"/>
                                        <EasingDoubleKeyFrame KeyTime="0:0:0.2" Value="1">
                                            <EasingDoubleKeyFrame.EasingFunction>
                                                <CircleEase EasingMode="EaseOut"/>
                                            </EasingDoubleKeyFrame.EasingFunction>
                                        </EasingDoubleKeyFrame>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>-->
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

后台代码

public class ToolTipButton : Button
    {
        static ToolTipButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ToolTipButton), new FrameworkPropertyMetadata(typeof(ToolTipButton)));
        }
        /// <summary>
        /// 提示文本
        /// </summary>
        public string TipText
        {
            get { return (string)GetValue(TipTextProperty); }
            set { SetValue(TipTextProperty, value); }
        }
        // Using a DependencyProperty as the backing store for TipText.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty TipTextProperty =
            DependencyProperty.Register("TipText", typeof(string), typeof(ToolTipButton), new PropertyMetadata(""));

        /// <summary>
        /// 图标
        /// </summary>
        public Geometry PathData
        {
            get { return (Geometry)GetValue(PathDataProperty); }
            set { SetValue(PathDataProperty, value); }
        }
        // Using a DependencyProperty as the backing store for PathData.  This enables animation, styling, binding, etc...
        public static readonly DependencyProperty PathDataProperty =
            DependencyProperty.Register("PathData", typeof(Geometry), typeof(ToolTipButton), new PropertyMetadata(null));

        protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo)
        {
            base.OnRenderSizeChanged(sizeInfo);
            Path p = (Path)Template.FindName("icon", this);
            p.Height = sizeInfo.NewSize.Height / 2;
            p.Width = sizeInfo.NewSize.Width / 2;
        }
    }

最终实现的效果