WPF 自定义 ImageButton

控件源码:


    public class ImageButton : Button
    {
        public ImageButton() {
        }

        public string NoramlImgPath
        {
            get { return (string)GetValue(NoramlImgPathProperty); }
            set { SetValue(NoramlImgPathProperty, value); }
        }

        public string HoverImgPath
        {
            get { return (string)GetValue(HoverImgPathProperty); }
            set { SetValue(HoverImgPathProperty, value); }
        }

        public string DisableImgPath
        {
            get { return (string)GetValue(DisableImgPathProperty); }
            set { SetValue(DisableImgPathProperty, value); }
        }

        public static readonly DependencyProperty NoramlImgPathProperty =
    DependencyProperty.Register(
    "NoramlImgPath",
    typeof(string),
    typeof(ImageButton),
    new PropertyMetadata(""));

        public static readonly DependencyProperty HoverImgPathProperty =
    DependencyProperty.Register(
    "HoverImgPath",
    typeof(string),
    typeof(ImageButton),
    new PropertyMetadata(""));

        public static readonly DependencyProperty DisableImgPathProperty =
    DependencyProperty.Register(
    "DisableImgPath",
    typeof(string),
    typeof(ImageButton),
    new PropertyMetadata(""));
    }

Style:资源文件里需要引用控件Namespace


xmlns:local="clr-namespace:Shared.Controls;assembly=Shared"

<SolidColorBrush x:Key="MouseOverBorderBrush" Color="#2D2F3D" />
<SolidColorBrush x:Key="buttonDisableBackground" Color="#222732"/>

<Style x:Key="imageButtonStyle" TargetType="local:ImageButton">
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="BorderBrush" Value="Transparent"/>
        <Setter Property="Template" >
            <Setter.Value>
                <ControlTemplate  TargetType="{x:Type local:ImageButton}">
                    <Border x:Name="border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"  Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"    SnapsToDevicePixels="True">
                        <Rectangle x:Name="bgrect" Margin="2">
                            <Rectangle.Fill>
                                <ImageBrush ImageSource="{Binding NoramlImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform" />
                            </Rectangle.Fill>
                        </Rectangle>
                    </Border>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#000000"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MouseOverBorderBrush}"/>
                            <Setter Property="BorderThickness" TargetName="border" Value="1"/>
                            <Setter Property="Margin" TargetName="border" Value="-1"/>
                            <Setter TargetName="bgrect" Property="Fill">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding HoverImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform"  />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Background" TargetName="border" Value="#000000"/>
                            <Setter Property="BorderBrush" TargetName="border" Value="{StaticResource MouseOverBorderBrush}"/>
                            <Setter Property="BorderThickness" TargetName="border" Value="1"/>
                            <Setter Property="Margin" TargetName="border" Value="1 1 -1 -1"/>
                            <Setter TargetName="bgrect" Property="Fill">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding HoverImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform"  />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter Property="Background" TargetName="border" Value="{StaticResource buttonDisableBackground}"/>
                            <Setter TargetName="bgrect" Property="Fill">
                                <Setter.Value>
                                    <ImageBrush ImageSource="{Binding DisableImgPath, RelativeSource={RelativeSource TemplatedParent}}" Stretch="Uniform"  />
                                </Setter.Value>
                            </Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

使用:


    xmlns:shared="clr-namespace:Shared.Controls;assembly=Shared"

     <shared:ImageButton   Width="24"  Height="24"  Margin="0 5" Command="{Binding SaveImageCommand}"
                                               NoramlImgPath="../Images/export_image.png"
                                               HoverImgPath="../Images/export_image_hover.png"  
                                               Style="{StaticResource imageButtonStyle}" ></shared:ImageButton>

 

显示:

政常:鼠标放上:点击:

 

 

 

 

 

posted @ 2018-12-05 18:02  幸福街10号  阅读(417)  评论(0编辑  收藏  举报