在这篇博文中,我将向您展示如何创建自定义控件 ImageButton。在这个控件中,我们将使用 Grid 控件来定位我们的图像,按钮的内容将始终位于它的中心。您不必指定按钮内容 - 在这种情况下,它只是一个图像按钮。ImageButton 继承自 Button,因此您可以访问所有按钮的属性。此外,您可以设置以下属性:
- 图像源
- ImageLocation(左、上、右、下、中)
- 图像宽度
- 图像高度
如何使用此控件的示例代码:
<local:ImageButton Width="200" Height="50" Content="Click Me!"
ImageSource="ok.png" ImageLocation="Left" ImageWidth="20" ImageHeight="25" />
创建此自定义控件的步骤:
1、创建Custom Control (WPF)
并命名为ImageButton.cs。
public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}
public ImageButton()
{
this.SetCurrentValue(ImageButton.ImageLocationProperty, WpfImageButton.ImageLocation.Left);
}
public int ImageWidth
{
get { return (int)GetValue(ImageWidthProperty); }
set { SetValue(ImageWidthProperty, value); }
}
public static readonly DependencyProperty ImageWidthProperty =
DependencyProperty.Register("ImageWidth", typeof(int), typeof(ImageButton), new PropertyMetadata(30));
public int ImageHeight
{
get { return (int)GetValue(ImageHeightProperty); }
set { SetValue(ImageHeightProperty, value); }
}
public static readonly DependencyProperty ImageHeightProperty =
DependencyProperty.Register("ImageHeight", typeof(int), typeof(ImageButton), new PropertyMetadata(30));
public ImageLocation? ImageLocation
{
get { return (ImageLocation)GetValue(ImageLocationProperty); }
set { SetValue(ImageLocationProperty, value); }
}
public static readonly DependencyProperty ImageLocationProperty =
DependencyProperty.Register("ImageLocation", typeof(ImageLocation?), typeof(ImageButton), new PropertyMetadata(null, PropertyChangedCallback));
private static void PropertyChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
var imageButton = (ImageButton)d;
var newLocation = (ImageLocation?) e.NewValue ?? WpfImageButton.ImageLocation.Left;
switch (newLocation)
{
case WpfImageButton.ImageLocation.Left:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 0);
break;
case WpfImageButton.ImageLocation.Top:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 0);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
break;
case WpfImageButton.ImageLocation.Right:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 2);
break;
case WpfImageButton.ImageLocation.Bottom:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 2);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
break;
case WpfImageButton.ImageLocation.Center:
imageButton.SetCurrentValue(ImageButton.RowIndexProperty, 1);
imageButton.SetCurrentValue(ImageButton.ColumnIndexProperty, 1);
break;
default:
throw new ArgumentOutOfRangeException();
}
}
public ImageSource ImageSource
{
get { return (ImageSource)GetValue(ImageSourceProperty); }
set { SetValue(ImageSourceProperty, value); }
}
public static readonly DependencyProperty ImageSourceProperty =
DependencyProperty.Register("ImageSource", typeof(ImageSource), typeof(ImageButton), new PropertyMetadata(null));
public int RowIndex
{
get { return (int)GetValue(RowIndexProperty); }
set { SetValue(RowIndexProperty, value); }
}
public static readonly DependencyProperty RowIndexProperty =
DependencyProperty.Register("RowIndex", typeof(int), typeof(ImageButton), new PropertyMetadata(0));
public int ColumnIndex
{
get { return (int)GetValue(ColumnIndexProperty); }
set { SetValue(ColumnIndexProperty, value); }
}
public static readonly DependencyProperty ColumnIndexProperty =
DependencyProperty.Register("ColumnIndex", typeof(int), typeof(ImageButton), new PropertyMetadata(0));
}
public enum ImageLocation
{
Left,
Top,
Right,
Bottom,
Center
}
将以下代码粘贴到创建资源文件中。
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfImageButton">
<Style TargetType="{x:Type local:ImageButton}" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Source="{Binding ImageSource, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Width="{Binding ImageWidth, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Height="{Binding ImageHeight, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Grid.Row="{Binding RowIndex, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
Grid.Column="{Binding ColumnIndex, RelativeSource={RelativeSource AncestorType=local:ImageButton}}"
VerticalAlignment="Center" HorizontalAlignment="Center"></Image>
<ContentPresenter Grid.Row="1" Grid.Column="1" Content="{TemplateBinding Content}"
VerticalAlignment="Center" HorizontalAlignment="Center"></ContentPresenter>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>