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

最新文章

热门文章