WPF自定义控件

一、ImageButton

1、继承ImageButtonButton，添加依赖属性

using System;

using System.Windows;

using System.Windows.Controls;



namespace June.Wpf.Tookit.Controls

{

    public class ImageButton : Button

    {

        static ImageButton()

        {

            DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));//去掉默认属性

        }



        #region Dependency Properties



        public double ImageSize

        {

            get { return (double)GetValue(ImageSizeProperty); }

            set { SetValue(ImageSizeProperty, value); }

        }



        public static readonly DependencyProperty ImageSizeProperty =

            DependencyProperty.Register("ImageSize", typeof(double), typeof(ImageButton),

            new FrameworkPropertyMetadata(30.0, FrameworkPropertyMetadataOptions.AffectsRender));



        public string NormalImage

        {

            get { return (string)GetValue(NormalImageProperty); }

            set { SetValue(NormalImageProperty, value); }

        }



        public static readonly DependencyProperty NormalImageProperty =

            DependencyProperty.Register("NormalImage", typeof(string), typeof(ImageButton),

            new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));



        public string HoverImage

        {

            get { return (string)GetValue(HoverImageProperty); }

            set { SetValue(HoverImageProperty, value); }

        }



        public static readonly DependencyProperty HoverImageProperty =

            DependencyProperty.Register("HoverImage", typeof(string), typeof(ImageButton),

            new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));



        public string PressedImage

        {

            get { return (string)GetValue(PressedImageProperty); }

            set { SetValue(PressedImageProperty, value); }

        }



        public static readonly DependencyProperty PressedImageProperty =

            DependencyProperty.Register("PressedImage", typeof(string), typeof(ImageButton),

            new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));



        public string DisabledImage

        {

            get { return (string)GetValue(DisabledImageProperty); }

            set { SetValue(DisabledImageProperty, value); }

        }



        public static readonly DependencyProperty DisabledImageProperty =

            DependencyProperty.Register("DisabledImage", typeof(string), typeof(ImageButton),

            new FrameworkPropertyMetadata("", FrameworkPropertyMetadataOptions.AffectsRender, ImageSourceChanged));

        //依赖属性发生改变时候触发

        private static void ImageSourceChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)

        {

            Application.GetResourceStream(new Uri("pack://application:,,," + (string)e.NewValue));

        }



        public Visibility BorderVisibility

        {

            get { return (Visibility)GetValue(BorderVisibilityProperty); }

            set { SetValue(BorderVisibilityProperty, value); }

        }



        public static readonly DependencyProperty BorderVisibilityProperty =

            DependencyProperty.Register("BorderVisibility", typeof(Visibility), typeof(ImageButton),

            new FrameworkPropertyMetadata(Visibility.Hidden, FrameworkPropertyMetadataOptions.AffectsRender));



        #endregion

    }

}

View Code

2、Themes文件夹定义样式

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

                    xmlns:JunControls="clr-namespace:June.Wpf.Tookit.Controls">

    <ControlTemplate x:Key="ImageButtonTemplate" TargetType="{x:Type JunControls:ImageButton}">

        <Grid x:Name="Grid">

            <Border 

        x:Name="Background" 

        Background="{TemplateBinding Background}" 

        BorderBrush="{TemplateBinding BorderBrush}" 

        BorderThickness="{TemplateBinding BorderThickness}" 

        CornerRadius="3" 

        Visibility="{Binding BorderVisibility, RelativeSource={RelativeSource TemplatedParent}}"/>

            <StackPanel

                Orientation="Horizontal" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" 

                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">

                <Image x:Name="ButtonImage" 

               Source="{Binding NormalImage, RelativeSource={RelativeSource TemplatedParent}}" 

               Height="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}" 

               Width="{Binding ImageSize, RelativeSource={RelativeSource TemplatedParent}}"

               ToolTip="{TemplateBinding ToolTip}"/>

                <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" 

                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True" />

            </StackPanel>

        </Grid>

        <ControlTemplate.Triggers>

            <Trigger Property="IsMouseOver" Value="true">

                <Setter TargetName="ButtonImage" Property="Source" Value="{Binding HoverImage, RelativeSource={RelativeSource TemplatedParent}}" />

            </Trigger>

            <Trigger Property="IsPressed" Value="true">

                <Setter TargetName="ButtonImage" Property="Source" Value="{Binding PressedImage, RelativeSource={RelativeSource TemplatedParent}}" />

            </Trigger>

            <Trigger Property="IsEnabled" Value="false">

                <Setter TargetName="ButtonImage" Property="Source" Value="{Binding DisabledImage, RelativeSource={RelativeSource TemplatedParent}}" />

            </Trigger>

        </ControlTemplate.Triggers>

    </ControlTemplate>

    <Style TargetType="{x:Type JunControls:ImageButton}" BasedOn="{x:Null}">

        <Setter Property="Padding" Value="3" />

        <Setter Property="Margin" Value="5" />

        <Setter Property="ImageSize" Value="32" />

        <Setter Property="BorderThickness" Value="3"/>

        <Setter Property="Foreground" Value="{DynamicResource TextBrush}" />

        <Setter Property="Background" Value="{DynamicResource ButtonBackgroundBrush}" />

        <Setter Property="BorderBrush" Value="{DynamicResource ButtonBorderBrush}" />

        <Setter Property="VerticalContentAlignment" Value="Center"/>

        <Setter Property="HorizontalContentAlignment" Value="Center"/>

        <Setter Property="Template" Value="{StaticResource ImageButtonTemplate}" />

    </Style>

</ResourceDictionary>

View Code

3、使用时候记得App.xaml中导入样式

        <StackPanel Orientation="Horizontal">

            <JuneControl:ImageButton 

                NormalImage="/JuneTookitDemo;component/Resources/Normal.png" 

                HoverImage="/JuneTookitDemo;component/Resources/Happy.png" 

                PressedImage="/JuneTookitDemo;component/Resources/Tounge.png" 

                Width="136" Background="Black" Content="test" Margin="0,22,0,10"/>

        </StackPanel>

View Code

 

<Application x:Class="JuneTookitDemo.App"

             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

             xmlns:Controls="clr-namespace:June.Wpf.Tookit.Controls;assembly=June.Wpf.Tookit"

             StartupUri="MainWindow.xaml">

    <Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <ResourceDictionary Source="/June.Wpf.Tookit;component/Themes/ImageButton.xaml"/>

            </ResourceDictionary.MergedDictionaries>

        </ResourceDictionary>

    </Application.Resources>

</Application>

View Code