How to Implement the WPF image button

How to Implement the WPF image button

This example shares the implementation code of the WPF image button for your reference. The details are as follows:

Direct code

Public class ImageButton: System. windows. controls. button {// <summary> /// picture /// </summary> public static readonly DependencyProperty ImageProperty = DependencyProperty. register ("Image", typeof (ImageSource), typeof (ImageButton), new PropertyMetadata (null )); /// <summary> /// Image Width /// </summary> public static readonly DependencyProperty ImageWidthProperty = DependencyProperty. register ("ImageWidth", typeof (double), typeof (ImageButton), new PropertyMetadata (double. naN); // <summary> /// Image Height // </summary> public static readonly DependencyProperty ImageHeightProperty = DependencyProperty. register ("ImageHeight", typeof (double), typeof (ImageButton), new PropertyMetadata (double. naN); // <summary> // constructor // </summary> static ImageButton () {defastylekeyproperty. overrideMetadata (typeof (ImageButton), new System. windows. frameworkPropertyMetadata (typeof (ImageButton);} // <summary> // set the Image // </summary> public ImageSource Image {get {return GetValue (ImageProperty) as ImageSource;} set {SetValue (ImageProperty, value) ;}/// <summary> // image width (attribute) /// </summary> public double ImageWidth {get {return (double) GetValue (ImageWidthProperty);} set {SetValue (ImageWidthProperty, value );}} /// <summary> /// Image Height (attribute) /// </summary> public double ImageHeight {get {return (double) GetValue (ImageHeightProperty );} set {SetValue (ImageHeightProperty, value );}}}

Style code

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

Call an instance

Copy codeThe Code is as follows: <xi: ImageButton Image = ".. /Image/set.png "Content =" add member "ImageHeight =" 52 "ImageWidth =" 52 "Width =" 72 "Height =" 72 "Margin =" 30, 10, 10 "/>

Effect display

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.