WPF 自定义雷达图（二）

标签：

2、然后自定义一下标题按钮，命名为“ChartButton”

前台：

<UserControl x:Class="WpfApplication4.ChartButton"
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"
mc:Ignorable="d"
d:DesignHeight="80" d:DesignWidth="200" Loaded="ChartButton_OnLoaded">
<UserControl.Resources>
<Style TargetType="Button">
<Setter Property="Foreground" Value="White"></Setter>
</Style>
</UserControl.Resources>
<Grid>
<Button x:Name="MyButton" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button.Template>
<ControlTemplate TargetType="{x:Type Button}">
<Grid x:Name="ButtonGrid" Height="{TemplateBinding Height}">
<Rectangle x:Name="ButtonRetc" RadiusX="20" RadiusY="25" Stroke="#FF06FFE8"></Rectangle>
<StackPanel Orientation="Horizontal" Margin="20,5" HorizontalAlignment="Center">
<Rectangle Height="{Binding IconHeight}" Width="{Binding IconWidth}">
<Rectangle.Fill>
<ImageBrush ImageSource="{Binding Icon}"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="ButtonTextBlock" Text="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" Margin="8,-2,0,0" FontSize="22" VerticalAlignment="Center" TextAlignment="Center"></TextBlock>
</StackPanel>
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding ElementName=MyButton,Path=IsFocused}" Value="True">
<DataTrigger.Setters>
<Setter TargetName="ButtonRetc" Property="Fill" Value="#FFA9BCFF"></Setter>
<Setter TargetName="ButtonRetc" Property="StrokeThickness" Value="0.5"></Setter>
<Setter TargetName="ButtonTextBlock" Property="Foreground" Value="#FF06FFE8"></Setter>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=MyButton,Path=IsPressed}" Value="true">
<DataTrigger.Setters>
<Setter TargetName="ButtonTextBlock" Property="FontWeight" Value="Bold"></Setter>
</DataTrigger.Setters>
</DataTrigger>
<DataTrigger Binding="{Binding ElementName=MyButton,Path=IsFocused}" Value="false">
<DataTrigger.Setters>
<Setter TargetName="ButtonRetc" Property="Fill" Value="Transparent"></Setter>
<Setter TargetName="ButtonRetc" Property="StrokeThickness" Value="0"></Setter>
</DataTrigger.Setters>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</UserControl>

2、后台：

/// <summary>
/// ChartButton.xaml 的交互逻辑
/// </summary>
public partial class ChartButton : UserControl
{
public ChartButton()
{
InitializeComponent();
}
#region 属性
/// <summary>
/// 工具提示
/// </summary>
public string ToolTip
{
get {return (string) GetValue(ToolTipProperty); }
set {SetValue(ToolTipProperty,value); }
}
public static readonly DependencyProperty ToolTipProperty = DependencyProperty.Register("ToolTip",
typeof (string), typeof (ChartButton),new PropertyMetadata());
/// <summary>
/// 按钮内容
/// </summary>
public string Content
{
get { return (string)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
public static readonly DependencyProperty ContentProperty = DependencyProperty.Register("Content",
typeof(string), typeof(ChartButton), new PropertyMetadata("按钮"));
/// <summary>
/// 图标
/// </summary>
public ImageSource Icon
{
get { return (ImageSource)GetValue(IconProperty); }
set { SetValue(IconProperty, value); }
}
public static readonly DependencyProperty IconProperty = DependencyProperty.Register("Icon",
typeof(ImageSource), typeof(ChartButton), new PropertyMetadata());
/// <summary>
/// 图标高度
/// </summary>
public double IconHeight
{
get { return (double)GetValue(IconHeightProperty); }
set { SetValue(IconHeightProperty, value); }
}
public static readonly DependencyProperty IconHeightProperty = DependencyProperty.Register("IconHeight",
typeof(double), typeof(ChartButton), new PropertyMetadata(25.0));
/// <summary>
/// 图标宽度
/// </summary>
public double IconWidth
{
get { return (double)GetValue(IconWidthProperty); }
set { SetValue(IconWidthProperty, value); }
}
public static readonly DependencyProperty IconWidthProperty = DependencyProperty.Register("IconWidth",
typeof(double), typeof(ChartButton), new PropertyMetadata(25.0));
/// <summary>
/// 高度
/// </summary>
public double Height
{
get { return (double)GetValue(HeightProperty); }
set { SetValue(HeightProperty, value); }
}
public static readonly DependencyProperty HeightProperty = DependencyProperty.Register("Height",
typeof(double), typeof(ChartButton), new PropertyMetadata(46.0));
/// <summary>
/// 宽度
/// </summary>
public double Width
{
get { return (double)GetValue(WidthProperty); }
set { SetValue(WidthProperty, value); }
}
public static readonly DependencyProperty WidthProperty = DependencyProperty.Register("Width",
typeof(double), typeof(ChartButton), new PropertyMetadata(170.0));
#endregion

private void ChartButton_OnLoaded(object sender, RoutedEventArgs e)
{
MyButton.ToolTip = ToolTip;
MyButton.Content = Content;
MyButton.Width = Width;
MyButton.Height = Height;
if (Icon!=null)
{
MyButton.DataContext =new ChartButtonModel()
{
Icon = Icon,
IconHeight =IconHeight,
IconWidth = IconWidth
};
}
}
}

public class ChartButtonModel
{
public ImageSource Icon { get; set; }
public double IconHeight { get; set; }
public double IconWidth { get; set; }
}

WPF 自定义雷达图（二）

标签：

原文地址：http://www.cnblogs.com/kybs0/p/5788780.html