wpf 自定义按钮

2021-01-17 00:13

阅读:535

标签:down   relative   enabled   setter   binding   get   names   depend   ima   

 

  一  代码结构
       如图所示,采用自定义控件(CustomControl)的方式对Button控件进行封装。其中ImageButton.xaml为默认控件模板,ImageButton.cs为控件的逻辑控制文件,其中包含了ImageButton控件所需要的新的依赖属性,包括图片源属性等。

       技术图片

 

 

        

       二 模板代码

 

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:CustomControl">




在模板中,通过TemplateBinding 的方式绑定了控件中的自定义属性,并默认显示给定的图标和文字。
然后通过触发器,当鼠标悬停或按下的时候,控制相关图标的显示隐藏以及文字的背景色、前景色和边框颜色。

 

三 自定义依赖属性
       在ImageButton.cs中定义依赖属性,这些依赖属性包含了图片按钮控件的边框、前景色、背景色,图片等属性。在复写的OnApplyTemplate方法中,会判断如果某些依赖属性的值为null,则使用默认属性。

public class ImageButton : Button
{
static ImageButton()
{
DefaultStyleKeyProperty.OverrideMetadata(typeof(ImageButton), new FrameworkPropertyMetadata(typeof(ImageButton)));
}

public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (this.MouseOverBackground == null)
{
this.MouseOverBackground = Background;
}
if (this.MouseDownBackground == null)
{
if (this.MouseOverBackground == null)
{
this.MouseDownBackground = Background;
}
else
{
this.MouseDownBackground = MouseOverBackground;
}
}
if (this.MouseOverBorderBrush == null)
{
this.MouseOverBorderBrush = BorderBrush;
}
if (this.MouseDownBorderBrush == null)
{
if (this.MouseOverBorderBrush == null)
{
this.MouseDownBorderBrush = BorderBrush;
}
else
{
this.MouseDownBorderBrush = MouseOverBorderBrush;
}
}
if (this.MouseOverForeground == null)
{
this.MouseOverForeground = Foreground;
}
if (this.MouseDownForeground == null)
{
if (this.MouseOverForeground == null)
{
this.MouseDownForeground = Foreground;
}
else
{
this.MouseDownForeground = this.MouseOverForeground;
}
}
}

#region Dependency Properties

///


/// 鼠标移上去的背景颜色
///

public static readonly DependencyProperty MouseOverBackgroundProperty
= DependencyProperty.Register("MouseOverBackground", typeof(Brush), typeof(ImageButton));

///
/// 鼠标按下去的背景颜色
///

public static readonly DependencyProperty MouseDownBackgroundProperty
= DependencyProperty.Register("MouseDownBackground", typeof(Brush), typeof(ImageButton));

///
/// 鼠标移上去的字体颜色
///

public static readonly DependencyProperty MouseOverForegroundProperty
= DependencyProperty.Register("MouseOverForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

///
/// 鼠标按下去的字体颜色
///

public static readonly DependencyProperty MouseDownForegroundProperty
= DependencyProperty.Register("MouseDownForeground", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

///
/// 鼠标移上去的边框颜色
///

public static readonly DependencyProperty MouseOverBorderBrushProperty
= DependencyProperty.Register("MouseOverBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

///
/// 鼠标按下去的边框颜色
///

public static readonly DependencyProperty MouseDownBorderBrushProperty
= DependencyProperty.Register("MouseDownBorderBrush", typeof(Brush), typeof(ImageButton), new PropertyMetadata(null, null));

///
/// 圆角
///

public static readonly DependencyProperty CornerRadiusProperty
= DependencyProperty.Register("CornerRadius", typeof(CornerRadius), typeof(ImageButton), null);

//图标
public static readonly DependencyProperty IconProperty
= DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ImageButton), null);

//鼠标移上去的图标图标
public static readonly DependencyProperty IconMouseOverProperty
= DependencyProperty.Register("IconMouseOver", typeof(ImageSource), typeof(ImageButton), null);

//鼠标按下去的图标图标
public static readonly DependencyProperty IconPressProperty
= DependencyProperty.Register("IconPress", typeof(ImageSource), typeof(ImageButton), null);

//图标高度
public static readonly DependencyProperty IconHeightProperty
= DependencyProperty.Register("IconHeight", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));

//图标宽度
public static readonly DependencyProperty IconWidthProperty
= DependencyProperty.Register("IconWidth", typeof(double), typeof(ImageButton), new PropertyMetadata(24.0, null));

//图标和内容的对齐方式
public static readonly DependencyProperty IconContentOrientationProperty
= DependencyProperty.Register("IconContentOrientation", typeof(Orientation), typeof(ImageButton), new PropertyMetadata(Orientation.Horizontal, null));

//图标和内容的距离
public static readonly DependencyProperty IconContentMarginProperty
= DependencyProperty.Register("IconContentMargin", typeof(Thickness), typeof(ImageButton), new PropertyMetadata(new Thickness(0, 0, 0, 0), null));

#endregion

#region Property Wrappers

public Brush MouseOverBackground
{
get
{
return (Brush)GetValue(MouseOverBackgroundProperty);
}
set { SetValue(MouseOverBackgroundProperty, value); }
}

public Brush MouseDownBackground
{
get
{
return (Brush)GetValue(MouseDownBackgroundProperty);
}
set { SetValue(MouseDownBackgroundProperty, value); }
}

public Brush MouseOverForeground
{
get
{
return (Brush)GetValue(MouseOverForegroundProperty);
}
set { SetValue(MouseOverForegroundProperty, value); }
}

public Brush MouseDownForeground
{
get
{
return (Brush)GetValue(MouseDownForegroundProperty);
}
set { SetValue(MouseDownForegroundProperty, value); }
}

public Brush MouseOverBorderBrush
{
get { return (Brush)GetValue(MouseOverBorderBrushProperty); }
set { SetValue(MouseOverBorderBrushProperty, value); }
}

public Brush MouseDownBorderBrush
{
get { return (Brush)GetValue(MouseDownBorderBrushProperty); }
set { SetValue(MouseDownBorderBrushProperty, value); }
}

public CornerRadius CornerRadius
{
get { return (CornerRadius)GetValue(CornerRadiusProperty); }
set { SetValue(CornerRadiusProperty, value); }
}

public ImageSource Icon
{
get { return (ImageSource)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}

public ImageSource IconMouseOver
{
get { return (ImageSource)GetValue(IconMouseOverProperty); }
set { SetValue(IconMouseOverProperty, value); }
}

public ImageSource IconPress
{
get { return (ImageSource)GetValue(IconPressProperty); }
set { SetValue(IconPressProperty, value); }
}

public double IconHeight
{
get { return (double)GetValue(IconHeightProperty); }
set { SetValue(IconHeightProperty, value); }
}

public double IconWidth
{
get { return (double)GetValue(IconWidthProperty); }
set { SetValue(IconWidthProperty, value); }
}

public Orientation IconContentOrientation
{
get { return (Orientation)GetValue(IconContentOrientationProperty); }
set { SetValue(IconContentOrientationProperty, value); }
}

public Thickness IconContentMargin
{
get { return (Thickness)GetValue(IconContentMarginProperty); }
set { SetValue(IconContentMarginProperty, value); }
}

#endregion
}

       四 控件的应用
       应用控件的时候,只需要简单的绑定控件的相关属性即可。

HorizontalContentAlignment="Center"
VerticalContentAlignment="Center"
Background="Red"
Margin="5,0,5,0" ToolTip="播放" Content="播放"
Height="30" Width="80"
Icon="Images\BroadcastWhite.png"
IconMouseOver="Images\BroadcastGray.png"
IconPress="Images\BroadcastBlue.png"
IconHeight="24"
IconWidth="24"
FontSize="16"
IconContentMargin="10,0,0,0"
Foreground="#FFFFFF"
MouseOverForeground="Gray"
MouseDownForeground="Blue"/>

wpf 自定义按钮

标签:down   relative   enabled   setter   binding   get   names   depend   ima   

原文地址:https://www.cnblogs.com/sword1983/p/12208865.html


评论


亲,登录后才可以留言!