WPF 自定義IconButton

自定義一個按鈕控件

按鈕控件很簡單，我們在項目中有時把樣式封裝起來，添加依賴屬性，也是為了統一。

這里舉例，單純的圖標控件怎么設置

1、UserControl界面樣式

<UserControl x:Class="WpfApplication12.IconButton"                xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"                xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"                xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"                 mc:Ignorable="d" 
                d:DesignHeight="300" d:DesignWidth="300" Loaded="IconButton_OnLoaded">
    <UserControl.Resources>
        <Style TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid>
                            <Rectangle x:Name="T_Rectangle" Height="15" Width="15">
                                <Rectangle.Fill>
                                    <ImageBrush ImageSource="{Binding ImagesSource}"></ImageBrush>
                                </Rectangle.Fill>
                            </Rectangle>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}"></ContentPresenter>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter TargetName="T_Rectangle" Property="Height" Value="18"></Setter>
                                <Setter TargetName="T_Rectangle" Property="Width" Value="18"></Setter>
                            </Trigger>
                            <Trigger Property="IsPressed" Value="True">
                                <Setter TargetName="T_Rectangle" Property="Height" Value="20"></Setter>
                                <Setter TargetName="T_Rectangle" Property="Width" Value="20"></Setter>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Resources>
    <Grid>
        <Button Click="ButtonBase_OnClick"></Button>
    </Grid>
</UserControl>

2、后台設置，我這邊只添加了個圖片路徑和事件委托。其它的自己加吧

    public partial class IconButton : UserControl
    {
        public IconButton()
        {
            InitializeComponent();
        }

        public ImageSource ImagesSource
        {
            get { return (ImageSource)GetValue(ImagesSourceProperty); }
            set { SetValue(ImagesSourceProperty, value); }
        }

        public static readonly DependencyProperty ImagesSourceProperty = DependencyProperty.Register("ImagesSource",
        typeof(ImageSource), typeof(IconButton));

        private void IconButton_OnLoaded(object sender, RoutedEventArgs e)
        {
            var data = new IconButtonModel()
            {
                ImagesSource = ImagesSource
            };
            this.DataContext = data;
        }

        public delegate void ClickEventArgs(object sender, RoutedEventArgs e);

        public event ClickEventArgs Click;
        private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
        {
            if (Click != null)
            {
                Click(sender, e);
            }
        }
    }

    public class IconButtonModel
    {
        public ImageSource ImagesSource { get; set; }
    }