【WPF】自定义图文按钮控件，实现鼠标悬停内容变色、旋转动作

使用了Border、ViewBox、Path、TextBlock等控件。

效果下图

1.Xaml资源

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="clr-namespace:FTools">
    <Style TargetType="{x:Type local:ButtonEx}" >
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:ButtonEx}">
                    <!--设置了Background属性，鼠标事件才能响应！下面的Triggers需要用-->
                    <Border x:Name="bd"  CornerRadius="10" Background="Transparent" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}">
                        <StackPanel  Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="5" >
                            <Viewbox x:Name="vb" Width="{TemplateBinding ImageSize}" Height="{TemplateBinding ImageSize}" Stretch="Uniform">
 
                                <Path x:Name="Pic" Data="{TemplateBinding PathData}"
                                         Fill="{TemplateBinding Foreground}">
                                    <!-- 这里得实现Path.LayoutTransform.RotateTransform.Angle 下面才能使用触发器触发旋转动作-->
                                    <Path.LayoutTransform>
                                        <RotateTransform Angle="0"/>
                                    </Path.LayoutTransform>
                                </Path>
                            </Viewbox>
                            <TextBlock x:Name="Txt" Margin="0,5" Text="{TemplateBinding Content}" FontFamily="{TemplateBinding FontFamily}" FontSize="{TemplateBinding FontSize}" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="Center"/>
                        </StackPanel>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger SourceName="bd"  Property="IsMouseOver"  Value="True">
                            <Setter TargetName="Txt" Property="Foreground" Value="{Binding OnMouseOverColor, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Setter TargetName="Pic" Property="Fill"  Value="{Binding OnMouseOverColor, RelativeSource={RelativeSource TemplatedParent}}"/>
                            <Trigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard  >
                                        <DoubleAnimation Storyboard.TargetName="Pic" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(RotateTransform.Angle)"
                                                From="-10" To="10" Duration="0:0:0.2" AutoReverse="True" RepeatBehavior="2x" FillBehavior="Stop"    
                                                     >
                                        </DoubleAnimation>
                                    </Storyboard>
                                </BeginStoryboard>
                            </Trigger.EnterActions>
                        </Trigger>
                        <!-- 和上面 Trigger.EnterActions 同样效果-->
                        <!--<EventTrigger SourceName="bd"   RoutedEvent="MouseEnter">
                            <BeginStoryboard>
                                <Storyboard  >
                                    <DoubleAnimation Storyboard.TargetName="Pic" Storyboard.TargetProperty="(FrameworkElement.LayoutTransform).(RotateTransform.Angle)"
                                                From="-10" To="10" Duration="0:0:0.2" AutoReverse="True" RepeatBehavior="2x" FillBehavior="Stop"    
                                                     >
                                    </DoubleAnimation>
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger>-->
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>

2.C#代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
 
namespace FTools
{
    public class ButtonEx : Button
    {
        static ButtonEx()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ButtonEx), new FrameworkPropertyMetadata(typeof(ButtonEx)));
        }
        //public ImageSource Icon
        //{
        //    get { return (ImageSource)GetValue(IconProperty); }
        //    set { SetValue(IconProperty, value); }
        //}
 
        //public static readonly DependencyProperty IconProperty =
        // DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ButtonEx), new PropertyMetadata(null));
 
        public double ImageSize
        {
            get { return (double)GetValue(ImageSizeProperty); }
            set { SetValue(ImageSizeProperty, value); }
        }
 
        public static readonly DependencyProperty ImageSizeProperty =
         DependencyProperty.Register("ImageSize", typeof(double), typeof(ButtonEx), new PropertyMetadata(null));
 
        public Geometry PathData
        {
            get { return (Geometry)GetValue(PathDataProperty); }
            set { SetValue(PathDataProperty, value); }
        }
 
        public static readonly DependencyProperty PathDataProperty =
         DependencyProperty.Register("PathData", typeof(Geometry), typeof(ButtonEx), new PropertyMetadata(null));
 
        public Brush OnMouseOverForegroundColor
        {
            get { return (Brush)GetValue(OnMouseOverForegroundColorProperty); }
            set { SetValue(OnMouseOverForegroundColorProperty, value); }
        }
 
        public static readonly DependencyProperty OnMouseOverForegroundColorProperty =
         DependencyProperty.Register("OnMouseOverColor", typeof(Brush), typeof(ButtonEx), new PropertyMetadata(null));
 
    }
}

3.在Page或者Window使用

3.1先引用Xaml

<Page.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="\Controls\Themes\ButtonEx.xaml"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
 </Page.Resources>

3.2控件使用

 <local:ButtonEx Grid.Column="1" Grid.Row="0" Width="150" Height="100"  Content="路径处理" FontFamily="kaiti" FontSize="20"  Foreground="Gray" OnMouseOverForegroundColor="#4834d4"
                        ImageSize="50" PathData="M900.608 608.768h-31.744V68.096C868.864 30.72 836.096 0 795.136 0H355.84c-40.448 0-73.728 30.72-73.728 68.096v48.128h-42.496c-37.376 0-68.096 30.72-68.096 68.096v424.448h-48.128c-37.376 0-68.096 30.72-68.096 68.096v279.04c0 37.376 30.72 68.096 68.096 68.096h777.216c37.376 0 68.096-30.72 68.096-68.096v-279.04c0-37.376-30.72-68.096-68.096-68.096zM355.84 55.296h439.296c10.752 0 18.432 6.656 18.432 12.8v540.672h-133.632c-32.256 0-57.856 26.112-57.856 57.856v72.192c0 1.536-1.024 2.56-2.56 2.56H481.28c-0.512 0-1.536-0.512-2.048-1.024-0.512-0.512-1.024-1.024-1.024-1.536l1.024-71.68c0-15.872-5.632-30.208-16.896-41.472-10.752-11.264-25.6-17.408-41.472-17.408H337.408V68.096c0-6.144 7.68-12.8 18.432-12.8zM226.816 184.32c0-7.168 5.632-12.8 12.8-12.8h42.496v437.248H226.816V184.32z m686.592 771.584c0 7.168-5.632 12.8-12.8 12.8H123.392c-7.168 0-12.8-5.632-12.8-12.8v-279.04c0-7.168 5.632-12.8 12.8-12.8h297.984c0.512 0 1.536 0.512 2.048 1.024 0.512 0.512 1.024 1.024 1.024 1.536l-1.024 71.68c0 15.872 5.632 30.208 16.896 41.472s25.6 17.408 41.472 17.408h138.24c32.256 0 57.856-26.112 57.856-57.856v-72.192c0-1.536 1.024-2.56 2.56-2.56H901.12c7.168 0 12.8 5.632 12.8 12.8v278.528z M437.248 265.728h282.112c15.36 0 27.648-12.288 27.648-27.648 0-15.36-12.288-27.648-27.648-27.648H437.248c-15.36 0-27.648 12.288-27.648 27.648 0 15.36 12.288 27.648 27.648 27.648zM437.248 442.88h282.112c15.36 0 27.648-12.288 27.648-27.648 0-15.36-12.288-27.648-27.648-27.648H437.248c-15.36 0-27.648 12.288-27.648 27.648 0 15.36 12.288 27.648 27.648 27.648z"
                        />

 

posted @   yzhyingcool  阅读(1629)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示