WPF圖片按鈕的實現

直接代碼

 public class ImageButton : System.Windows.Controls.Button
    {

        /// <summary>
        /// 圖片
        /// </summary>
        public static readonly DependencyProperty ImageProperty = DependencyProperty.Register("Image", typeof(ImageSource), typeof(ImageButton),
            new PropertyMetadata(null));

        /// <summary>
        /// 圖片的寬度
        /// </summary>
        public static readonly DependencyProperty ImageWidthProperty = DependencyProperty.Register("ImageWidth", typeof(double), typeof(ImageButton),
            new PropertyMetadata(double.NaN));

        /// <summary>
        /// 圖片的高度
        /// </summary>
        public static readonly DependencyProperty ImageHeightProperty = DependencyProperty.Register("ImageHeight", typeof(double), typeof(ImageButton),
            new PropertyMetadata(double.NaN));

        /// <summary>
        /// 構造函數
        /// </summary>
        static ImageButton()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), 
                new System.Windows.FrameworkPropertyMetadata(typeof(ImageButton)));
        }

        /// <summary>
        /// 設置圖片
        /// </summary>
        public ImageSource Image
        {
            get
            {
                return GetValue(ImageProperty) as ImageSource;
            }
            set
            {
                SetValue(ImageProperty, value);
            }
        }

        /// <summary>
        /// 圖片寬度(屬性)
        /// </summary>
        public double ImageWidth
        {
            get
            {
                return (double)GetValue(ImageWidthProperty);
            }
            set
            {
                SetValue(ImageWidthProperty, value);
            }
        }

        /// <summary>
        /// 圖片高度(屬性)
        /// </summary>
        public double ImageHeight
        {
            get
            {
                return (double)GetValue(ImageHeightProperty);
            }
            set
            {
                SetValue(ImageHeightProperty, value);
            }
        }

    }

樣式代碼

    <Style TargetType="{x:Type xi:ImageButton}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type xi:ImageButton}">
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Border x:Name="border" Grid.RowSpan="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" 
                                SnapsToDevicePixels="true" CornerRadius="3,3,3,3"/>
                        <Image Grid.Row="0" Source="{TemplateBinding Image}"
                                   Width="{TemplateBinding ImageWidth}"
                                   Height="{TemplateBinding ImageHeight}"
                                   VerticalAlignment="{TemplateBinding VerticalAlignment}"/>
                        <ContentPresenter Grid.Row="1" HorizontalAlignment="Center" Margin="{TemplateBinding Padding}"   
                                    VerticalAlignment="Center" RecognizesAccessKey="True" />
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter Property="Foreground" Value="#999999"/>
                        </Trigger>
                    </ControlTemplate.Triggers>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

調用實例

    <xi:ImageButton Image="../Image/設置.png" Content="新增會員" ImageHeight="52" ImageWidth="52" Width="72" Height="72" Margin="30,10,10,10"/>

效果展示

本文原創出處：http://www.cnblogs.com/PettyHandSome/

歡迎各位轉載，但是未經作者本人同意，轉載文章之后必須在文章頁面明顯位置給出作者和原文連接，否則保留追究法律責任的權利!