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; }    }

 

WPF 自訂IconButton