WPF custom radar Diagram (ii)

2, then customize the title button, named "Chartbutton"

Front desk:

<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= "d:designwidth=" 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= "radiusy=" "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= "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. Backstage:

<summary>
The interactive logic of Chartbutton.xaml
</summary>
public partial class Chartbutton:usercontrol
{
Public Chartbutton ()
{
InitializeComponent ();
}
#region Properties
<summary>
Tool Tips
</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>
Button content
</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 ("button"));
<summary>
Icon
</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>
Icon Height
</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>
Icon width
</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>
Height
</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>
Width
</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 custom radar Diagram (ii)