wpf main button控件的封装（富文本按钮）
一、创建BoolVisibilityConverter类和OppositeVisibilityConverter类
BoolVisibilityConverter.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Data;
using System.Windows.Markup;
namespace WpfApp
{
[ValueConversion(typeof(bool), typeof(Visibility))]
public class BoolVisibilityConverter : MarkupExtension, IValueConverter
{
public override object ProvideValue(IServiceProvider serviceProvider)
{
return new BoolVisibilityConverter
{
FromType = this.FromType ?? typeof(bool),
TargetType = this.TargetType ?? typeof(Visibility),
Parameter = this.Parameter
};
}
public object Parameter { get; set; }
public Type TargetType { get; set; }
public Type FromType { get; set; }
#region IValueConverter成员
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
Visibility result = Visibility.Hidden;
//如果指定参数ConverterParameter=Collapsed，则默认result为Collapsed
if (parameter != null && parameter is string && parameter as string == "Collapsed")
result = Visibility.Collapsed;
if (value is bool)
{
if ((bool)value)
result = Visibility.Visible;
}
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value is Visibility)
{
if ((Visibility)value == Visibility.Visible)
return true;
else
return false;
}
return false;
}
#endregion
}
}
OppositeVisibilityConverter.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Data;
using System.Windows.Markup;
namespace WpfApp
{
[ValueConversion(typeof(Visibility), typeof(Visibility))]
public class OppositeVisibilityConverter : MarkupExtension, IValueConverter
{
public override object ProvideValue(IServiceProvider serviceProvider)
{
return new OppositeVisibilityConverter
{
FromType = this.FromType ?? typeof(Visibility),
TargetType = this.TargetType ?? typeof(Visibility),
Parameter = this.Parameter
};
}
public object Parameter { get; set; }
public Type TargetType { get; set; }
public Type FromType { get; set; }
#region IValueConverter成员
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
Visibility result = Visibility.Hidden;
//如果指定参数ConverterParameter=Collapsed，则默认result为Collapsed
if (parameter != null && parameter is string && parameter as string == "Collapsed")
result = Visibility.Collapsed;
if (value is Visibility)
{
if ((Visibility)value == Visibility.Hidden || (Visibility)value == Visibility.Collapsed)
{
result = Visibility.Visible;
}
}
return result;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
return Convert(value, targetType, parameter, culture);
}
#endregion
}
}
二、创建MainButton用户控件
MainButton.xaml
<UserControl x:Class="WpfApp.MainButton"
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"
xmlns:local="clr-namespace:WpfApp"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<Style TargetType="Border" x:Key="BorderStyle">
<Setter Property="CornerRadius" Value="8"></Setter>
<Setter Property="BorderBrush" Value="#b3d3f2"></Setter>
<Setter Property="BorderThickness" Value="1"></Setter>
<Setter Property="Height" Value="210"></Setter>
<Setter Property="Width" Value="150"></Setter>
<Setter Property="Background" Value="#fcfcfc"/>
</Style>
<Style TargetType="TextBlock" x:Key="TextBlock.Description">
<Setter Property="FontSize" Value="10"></Setter>
<Setter Property="Foreground" Value="#62676d"></Setter>
<Setter Property="TextWrapping" Value="Wrap"></Setter>
<Setter Property="Margin" Value="10,0"></Setter>
<Setter Property="LineHeight" Value="20"></Setter>
</Style>
<Style TargetType="TextBlock" x:Key="TextBlock.Title">
<Setter Property="FontSize" Value="15"></Setter>
<Setter Property="Foreground" Value="#41a0ff"></Setter>
</Style>
<Style TargetType="Button" x:Key="Button.Main">
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="13" Background="#41a1ff">
<TextBlock Foreground="White" VerticalAlignment="Center" HorizontalAlignment="Center"> <ContentPresenter></ContentPresenter></TextBlock>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</UserControl.Resources>
<Grid>
<Border Style="{StaticResource BorderStyle}" Visibility="{Binding ElementName=Border,Path=IsMouseOver,Converter={local:BoolVisibilityConverter}}">
<Border.Effect>
<DropShadowEffect Color="#b3d3f2" Direction="270" BlurRadius="8" ShadowDepth="3" />
</Border.Effect>
</Border>
<Border x:Name="Border" Style="{StaticResource BorderStyle}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<Image x:Name="Img" Grid.Row="0" Visibility="{Binding ElementName=ImgOver,Path=Visibility,Converter={local:OppositeVisibilityConverter},ConverterParameter=Collapsed}" RenderOptions.BitmapScalingMode="Fant" Stretch="UniformToFill" Width="80" Height="80"></Image>
<Image x:Name="ImgOver" Grid.Row="0" Visibility="{Binding ElementName=Border,Path=IsMouseOver,Converter={local:BoolVisibilityConverter},ConverterParameter=Collapsed}" RenderOptions.BitmapScalingMode="Fant" Stretch="UniformToFill" Width="80" Height="80"></Image>
<TextBlock x:Name="TbTitle" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource TextBlock.Title}" Margin="0,12,0,12"></TextBlock>
<TextBlock x:Name="TbDes" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource TextBlock.Description}"></TextBlock>
<Button x:Name="Btn" Grid.Row="3" Style="{StaticResource Button.Main}" Margin="0,10,0,10" Visibility="{Binding ElementName=Border,Path=IsMouseOver,Converter={local:BoolVisibilityConverter},ConverterParameter=Collapsed}" Width="78" Height="26" HorizontalAlignment="Center" Click="Btn_Click"></Button>
</Grid>
</Border>
</Grid>
</UserControl>
MainButton.xaml.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace WpfApp
{
/// <summary>
/// MainButton.xaml 的交互逻辑
/// </summary>
public partial class MainButton : UserControl
{
public event Action OnClick;
public MainButton()
{
InitializeComponent();
}
public string Text
{
get { return (string)GetValue(TextProperty); }
set { SetValue(TextProperty, value); }
}
public static readonly DependencyProperty TextProperty =
DependencyProperty.Register("Text", typeof(string), typeof(MainButton), new UIPropertyMetadata(null, OnTextChanged));
private static void OnTextChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
(sender as MainButton).TbDes.Text = e.NewValue as string;
}
public string Title
{
get { return (string)GetValue(TitleProperty); }
set { SetValue(TitleProperty, value); }
}
public static readonly DependencyProperty TitleProperty =
DependencyProperty.Register("Title", typeof(string), typeof(MainButton), new UIPropertyMetadata(null, OnTitleChanged));
private static void OnTitleChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
(sender as MainButton).TbTitle.Text = e.NewValue as string;
}
public string BtnContent
{
get { return (string)GetValue(BtnContentProperty); }
set { SetValue(BtnContentProperty, value); }
}
public static readonly DependencyProperty BtnContentProperty =
DependencyProperty.Register("BtnContent", typeof(string), typeof(MainButton), new UIPropertyMetadata(null, OnBtnContentChanged));
private static void OnBtnContentChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
(sender as MainButton).Btn.Content = e.NewValue as string;
}
public ImageSource Icon
{
get { return (ImageSource)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
public static readonly DependencyProperty IconProperty =
DependencyProperty.Register("Icon", typeof(ImageSource), typeof(MainButton), new PropertyMetadata(null, OnIconChanged));
private static void OnIconChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
(sender as MainButton).Img.Source = e.NewValue as ImageSource;
}
public ImageSource MouseOverIcon
{
get { return (ImageSource)GetValue(MouseOverIconProperty); }
set { SetValue(MouseOverIconProperty, value); }
}
public static readonly DependencyProperty MouseOverIconProperty =
DependencyProperty.Register("MouseOverIcon", typeof(ImageSource), typeof(MainButton), new PropertyMetadata(null, OnMouseOverIconChanged));
private static void OnMouseOverIconChanged(DependencyObject sender, DependencyPropertyChangedEventArgs e)
{
(sender as MainButton).ImgOver.Source = e.NewValue as ImageSource;
}
private void Btn_Click(object sender, RoutedEventArgs e)
{
var handler = this.OnClick;
if (handler != null)
handler.Invoke();
}
}
}
三、使用MainButton用户控件
创建一个Window窗体，在窗体的xaml文件中添加命名空间（xmlns:local="clr-namespace:WpfApp"）和MainButton用户控件（<local:MainButton></local:MainButton>）；
<Window x:Class="WpfApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApp"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"></RowDefinition>
<RowDefinition Height="1*"></RowDefinition>
</Grid.RowDefinitions>
<Border Grid.Row="1" BorderBrush="#dfdfdf" BorderThickness="0,1,0,0" Margin="10,0,10,0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<local:MainButton BtnContent="btn" Text="des" Title="t" Icon="/images/test.png" MouseOverIcon="/images/test_over.png" OnClick="MainButton_OnClick"></local:MainButton>
<local:MainButton Grid.Column="1" BtnContent="btn1" Text="des1" Title="t1" Icon="/images/test.png" MouseOverIcon="/images/test_over.png" OnClick="MainButton_OnClick_1"></local:MainButton>
</Grid>
</Border>
</Grid>
</Window>
浙公网安备 33010602011771号