WPF Custom Radar Map Development Example Tutorial _c# Tutorial

The custom radar chart is as follows:

1, create UserControl, called "Radarchartcontrol"

Front desk:

<usercontrol x:class= "Wpfapplication2.radarchartcontrol" 
 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=" radarchartcontrol_onloaded ">
 <canvas x:name=" Canvaspanel "horizontalalignment=" center "verticalalignment=" Center ">
 </ Canvas>
</UserControl>

Background:

<summary>///radarchartcontrol.xaml Interactive logic///</summary> public partial class Radarchartcontrol:use
 Rcontrol {public Radarchartcontrol () {InitializeComponent (); #region Properties///<summary>///size///width size///</summary> public double size {get {return (Doub Le) GetValue (sizeproperty);
 } set {SetValue (Sizeproperty, value);} public static readonly DependencyProperty Sizeproperty = Dependencyproperty.register ("Size", typeof (Double), typeof (R
 Adarchartcontrol), New PropertyMetadata (400.0)); <summary>///title///</summary> public list<argumentmodel> Arguments {get {return (list<a rgumentmodel>) GetValue (Argumentsproperty);
 } set {SetValue (Argumentsproperty, value);} public static readonly DependencyProperty Argumentsproperty = Dependencyproperty.register ("Arguments", typeof (List
 <ArgumentModel>), typeof (Radarchartcontrol), New PropertyMetadata (New list<argumentmodel> ()); ///<summary>///Data///</summary> public list<chartitem> Datas {get {return (LIST<CHARTITEM&G t;) GetValue (Datasproperty);
 } set {SetValue (Datasproperty, value);} public static readonly DependencyProperty Datasproperty = Dependencyproperty.register ("Datas", typeof (list<
 chartitem>), typeof (Radarchartcontrol), New PropertyMetadata (New list<chartitem> ()); <summary>///Gets or sets the line color///</summary> public Brush BorderBrush {getting {return (Brush) GetValue (Borde Rbrushproperty);
 } set {SetValue (Borderbrushproperty, value);} public static readonly DependencyProperty Borderbrushproperty = Dependencyproperty.register ("BorderBrush", typeof (
 Brush), typeof (Radarchartcontrol), New PropertyMetadata (Brushes.royalblue));
 <summary>///connection point size///</summary> public int ellipsesize = 7;
  <summary>///Control size///</summary> public double totalsize {get {double size = size + 200; Return Size
 }///<summary>///panel///</summary> public Canvas Chartcanvas = new Canvas (); Declaring and registering routed events public static readonly RoutedEvent titleclickroutedevent = eventmanager.registerroutedevent ("Titleclick",
 Routingstrategy.bubble, typeof (Eventhandler<routedeventargs>), typeof (Radarchartcontrol)); CLR event wrapper public event Routedeventhandler Titleclick {add {this. AddHandler (titleclickroutedevent, value); } remove {this. RemoveHandler (titleclickroutedevent, value); }///Excitation routed event, borrowing click event firing method protected void OnClick (object sender, RoutedEventArgs e) {RoutedEventArgs args = new Ro
  Utedeventargs (Titleclickroutedevent, E); This.
 RaiseEvent (args); #endregion private void Radarchartcontrol_onloaded (object sender, RoutedEventArgs e) {if (!).
  Checkdata ()) {throw new Exception ("Radarchart data Mismatch!");
  //Get the maximum number int maxdata = Datas.max (i => i.datalist.max (o => o.data));
  Setup Panel and background setcanvasandbackground (maxdata);
 Set Data headers Setdatatitle (Datas);
  Gets half circle size double length = SIZE/2/maxdata;
  Connection point radius int ellipser = ELLIPSESIZE/2;
  foreach (Var chartitem in Datas) {var color = Chartitem.color;
  Two polygons, one setting background, one setting border Polygon Polygonarea = new Polygon () {Fill = color, Opacity = 0.2, strokethickness = 0};
  Polygon Polygonborder = new Polygon () {Fill = brushes.transparent, Stroke = color, strokethickness = 0.8};
  int index = 0;
   foreach (var data in chartitem.datalist) {Double currentangle = Angle * index + 90;
   Double angle = (currentangle/360) * 2 * MATH.PI; var r = data.
   Data * length;
   Double x = size/2 + R * Math.Cos (angle);
   Double y = size/2-R * Math.sin (angle);
   Polygon Add node var point = new Point () {x = x, y = y};
   POLYGONAREA.POINTS.ADD (point);
   POLYGONBORDER.POINTS.ADD (point);
   Set node style var ellipse = new Ellipse () {Width = ellipsesize, Height = ellipsesize, Fill = color};
   Canvas.setleft (ellipse, x-ellipser); Canvas.setTop (ellipse, y-ellipser);
   CHARTCANVAS.CHILDREN.ADD (ellipse);
  index++;
  } ChartCanvas.Children.Add (Polygonarea);
  CHARTCANVAS.CHILDREN.ADD (Polygonborder);
 //Set the title setarguments (); ///<summary>///Set data title///</summary>///<param name= "datas" ></param> private void SETDA
  Tatitle (list<chartitem> datas) {radarcharttitlelist titlelist = new Radarcharttitlelist ();
  Titlelist.itemsoure = datas;
  Double angle = Math.PI * 0.25;
  Double x = totalsize/2 + (TOTALSIZE/2) * Math.sin (angle);
  Canvas.setleft (titlelist, x);
  Canvas.settop (titlelist, x);
 CANVASPANEL.CHILDREN.ADD (titlelist);
  ///<summary>///set title///</summary> private void setarguments () {int index = 0;
  foreach (var argument in Arguments) {var button = new Chartbutton (); button. Content = argument.
  Name; button. Icon = argument.
  Iconsource; button.
  Mybutton.click + = OnClick;
  Draw xy Double currentangle = Angle * index + 90; Double Angle = (currentangle/360) * 2 * MATH.PI;
  var r = TOTALSIZE/2; Double x = R + R * Math.Cos (angle)-(button.
  WIDTH/2); Double y = r-r * Math.sin (angle)-(button.
  HEIGHT/2); Add button height difference y = y + math.sin (angle) * (button. WIDTH/2-button.
  HEIGHT/2);
  Canvas.setleft (button, x);
  Canvas.settop (button, y);
  CANVASPANEL.CHILDREN.ADD (button);
  index++;
 }///<summary>///check data///</summary>///<returns></returns> private bool Checkdata ()
  {if (Datas = null) {return false; foreach (var data in Datas) {bool result =! Datas.any (i => i.datalist.count!= data.
  Datalist.count);
  if (!result) {return false;
 } return true; ///<summary>///Settings panel and background///</summary>///<param name= "Maxindex" ></param> private void S
  Etcanvasandbackground (int maxindex) {canvaspanel.height = TotalSize;
  Canvaspanel.width = totalsize;
  Panel chartcanvas.height = Size; Chartcanvas.width= Size;
  Double canvasx = (totalsize-size)/2;
  Canvas.setleft (Chartcanvas, canvasx);
  Canvas.settop (Chartcanvas, canvasx);
  CANVASPANEL.CHILDREN.ADD (Chartcanvas);
  Circle and Straight line var color = BorderBrush;
  Double length = SIZE/2/Maxindex;
  for (int i = 0; i < Maxindex i++) {Double height = length * 2 * (i + 1);
  Double left = size/2-Length * (i + 1);
  var ellipse = new Ellipse () {Stroke = color, strokethickness = 0.5, height = height, Width = height};
  Canvas.setleft (ellipse, left);
  Canvas.settop (ellipse, left);
  CHARTCANVAS.CHILDREN.ADD (ellipse); //Temporarily set: 4 titles, draw line if (Arguments.count = 4) {//Vertical line path Verticalpath = new Path () {Stroke = color, St
  Rokethickness = 0.2,};
  Add data streamgeometry geometry = new StreamGeometry (); Geometry. FillRule = Fillrule.nonzero; Sound before F0 or F1, now is the F1 using (streamgeometrycontext CTX = geometry. Open ()) {ctx.
   Beginfigure (new Point (SIZE/2, 0), true, true); CTx. LineTo (new Point (SIZE/2, SiZe), true, false); } geometry.
  Freeze ();
  Verticalpath.data = geometry;
  CHARTCANVAS.CHILDREN.ADD (Verticalpath);
  Horizontal line Path Horizontalpath = new Path () {Stroke = color, strokethickness = 0.2,};
  Add Data Geometry = new StreamGeometry (); Geometry. FillRule = Fillrule.nonzero; Sound before F0 or F1, now is the F1 using (streamgeometrycontext CTX = geometry. Open ()) {ctx.
   Beginfigure (new Point (0, SIZE/2), true, true); CTx.
  LineTo (new Point (Size, SIZE/2), true, false); } geometry.
  Freeze ();
  Horizontalpath.data = geometry;
  CHARTCANVAS.CHILDREN.ADD (Horizontalpath); }}///<summary>///separator angle///</summary> private double Angle {get {int count = Arguments.count
  ;
  Double angle = 360/count;
  return angle; }}///<summary>///class Header///</summary> public class Argumentmodel {public ImageSource Iconsource
 {get; set;}
 public string Name {get; set;} ///<summary>///Single Group data///</summary> public CLASS Chartitem {public Brush Color {get; set;}
 list<chartdata> dataList = new list<chartdata> ();
  Public list<chartdata> DataList {get {return DataList;}
 set {dataList = value;}
 Public object Name {get; set;}
 ///<summary>///Data///</summary> public class ChartData {public string Name {get; set;}
 public int Data {get; set;} }

2, create the Title Class button control, the definition name is Chartbutton

Front desk:

<usercontrol x:class= "Wpfapplication2.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:desig nheight= "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= ' Buttongr ID "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}" &
    Gt 
    <Rectangle.Fill> <imagebrush imagesource= "{Binding Icon}" ></ImageBrush> </Rectangle.Fill> </Rectangle> <textblock x:name= "Buttontextblock" text= "{templatebinding Content}" foreground= "{Templateb Inding foreground} "margin=" 8,-2,0,0 "fontsize=" verticalalignment= "center" textalignment= "center" ></ textblock> </StackPanel> </Grid> <ControlTemplate.Triggers> <datatrigger binding= "{Bin Ding elementname=mybutton,path=isfocused} "value=" True "> <DataTrigger.Setters> <setter targetname=" But Tonretc "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}" V Alue= "true" > <DataTrigger.Setters> <setter targetname= "Buttontextblock" property= "FontWeight" value= "B Old "></Setter> </DataTrigger.Setters> </DataTrigger> <datatrigger binding=" {Binding Elem  Entname=mybutton,path=isfocused} "value= false" > <DataTrigger.Setters> <setter targetname= "Buttonretc" Property= "Fill" value= "Transparent" ></Setter> <setter targetname= "Buttonretc" StrokeThickness "value=" 0 "></Setter> </DataTrigger.Setters> </DataTrigger> </controltemp Late. triggers> </ControlTemplate> </Button.Template> </Button> </Grid> </UserControl>

Background:

<summary>///chartbutton.xaml Interactive logic///</summary> public partial class Chartbutton:usercontrol {
 Public Chartbutton () {InitializeComponent (); #region Properties///<summary>///tooltip///</summary> public string ToolTip {get {return (string) getval UE (TOOLTIPPROPERTY);
 } set {SetValue (Tooltipproperty, value);} public static readonly DependencyProperty Tooltipproperty = Dependencyproperty.register ("ToolTip", typeof (String), Ty
 Peof (Chartbutton), New PropertyMetadata ()); <summary>///button Content///</summary> public string content {get {return (string) GetValue (contentprope Rty);
 } set {SetValue (Contentproperty, value);} public static readonly DependencyProperty Contentproperty = Dependencyproperty.register ("Content", typeof (String), Ty
 Peof (Chartbutton), New PropertyMetadata ("button")); <summary>///icon///</summary> public imagesource icon {get {return (ImageSource) GetValue (Iconpro Perty);
 } set {SetValue (Iconproperty, value);} public static readonly DependencyProperty Iconproperty = Dependencyproperty.register ("Icon", typeof (ImageSource), Typ
 EOF (Chartbutton), New PropertyMetadata ()); <summary>///icon Height///</summary> public double Iconheight {get {return (double) GetValue (Iconheigh Tproperty);
 } 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 (ICONWIDTHP Roperty);
 } 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), type
 Of (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, I
  Conwidth = Iconwidth}; }} public class Chartbuttonmodel {public IMagesource Icon {get; set;}
 Public double iconheight {get; set;}
 Public double iconwidth {get; set;} }

3, define the Data group title display list

Front desk:

<usercontrol x:class= "wpfapplication2.radarcharttitlelist" 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= "radarcharttitlelist_onloaded" > <UserC Ontrol. resources> <style x:key= "Itemcontainer" targettype= "{x:type ListBoxItem}" > <setter Property= "Template"  > <Setter.Value> <controltemplate targettype= "{x:type ListBoxItem}" > <border x:name= "Iconborder" background= "Transparent" cornerradius= "4" borderthickness= "0" > <contentpresenter/> </Border> &l T  controltemplate.triggers> <trigger property= "isselected" value= "true" > <setter targetname= "IconBorder" property= "BitmapEffect" > <Setter.Value> <outErglowbitmapeffect glowcolor= "Transparent" glowsize= "5"/> </Setter.Value> </Setter> </trig ger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </s tyle> </UserControl.Resources> <Grid> <listbox x:name= "MyListBox" itemssource= "{Binding}" Itemcontainerstyle= ' {StaticResource Itemcontainer} ' focusvisualstyle= ' {x:null} ' > <ListBox.Template> < controltemplate> <stackpanel background= "Transparent" isitemshost= "True" ></StackPanel> </ controltemplate> </ListBox.Template> <ListBox.ItemTemplate> <DataTemplate> <grid Horizont Alalignment= "left" verticalalignment= "Center" background= "Transparent" > <Grid.ColumnDefinitions> <colu Mndefinition width= "Auto" ></ColumnDefinition> <columndefinition width= "*" ></columndefinition > </Grid.ColumnDefinitions> <grid HorizonTalalignment= "Center" margin= "10,0" background= "Transparent" > <ellipse fill= "{Binding Color}" height= "6" width= "6" horizontalalignment= "right" verticalalignment= "Center" ></Ellipse> <canvas verticalalignment= " Center "horizontalalignment=" Center "> <path fill=" {Binding Color} "height=" 5 "strokethickness=" 1 "stroke=" {Bind ing Color} "verticalalignment=" Center "data=" m-10,0 l10,0 "></Path> </Canvas> </Grid> <te Xtblock grid.column= "1" text= "{Binding Name}" foreground= "white" background= "Transparent" ></TextBlock> < /grid> </DataTemplate> </ListBox.ItemTemplate> </ListBox> </Grid> </UserControl>

Background:

<summary>
 ///radarcharttitlelist.xaml Interactive logic
 ///</summary> public
 partial class Radarcharttitlelist:usercontrol
 {public
 radarcharttitlelist ()
 {
  initializecomponent ()
 }
 <summary>
 ///Data
 ///</summary> public
 list<chartitem> itemsoure
 {
  get {return (list<chartitem>) GetValue (Itemsoureproperty);}
  set {SetValue (Itemsoureproperty, value);}
 }
 public static readonly DependencyProperty Itemsoureproperty = Dependencyproperty.register ("Itemsoure", typeof (List <ChartItem>),
 typeof (Radarchartcontrol), New PropertyMetadata (New list<chartitem> ());
 private void Radarcharttitlelist_onloaded (object sender, RoutedEventArgs e)
 {this
  . DataContext = itemsoure;
 }
 

4. Interface Reference Control

<window x:class= "Wpfapplication2.mainwindow" xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation
  "xmlns:x=" Http://schemas.microsoft.com/winfx/2006/xaml "xmlns:wpfapplication2=" Clr-namespace:wpfapplication2 " "MainWindow" height= "title=" width= "525" background= "Lightgray" > <Grid> <wpfapplication2: Radarchartcontrol x:name= "Radarchartcontrol" horizontalalignment= "center" verticalalignment= "Center" > < wpfapplication2:radarchartcontrol.arguments> <wpfapplication2:argumentmodel Name= "C #" IconSource= "Chart_Bar _big.png "></wpfApplication2:ArgumentModel> <wpfapplication2:argumentmodel name=" JAVA "iconsource=" Blueprint_blog.png "></wpfApplication2:ArgumentModel> <wpfapplication2:argumentmodel name=" Python " Iconsource= "Chart_graph_descending.png" ></wpfApplication2:ArgumentModel> <wpfapplication2:
 Argumentmodel name= "VB" iconsource= "Chart_bar_big.png" ></wpfApplication2:ArgumentModel>   <wpfapplication2:argumentmodel name= "Other" iconsource= "Chart_graph_descending.png" ></wpfApplication2: Argumentmodel> </wpfApplication2:RadarChartControl.Arguments> <wpfapplication2: radarchartcontrol.datas> <wpfapplication2:chartitem name= "candidate A" color= "#FF07C507" > <wpfapplication2:c Hartitem.datalist> <wpfapplication2:chartdata data= "1" ></wpfApplication2:ChartData> <wpfappl Ication2:chartdata data= "3" ></wpfApplication2:ChartData> <wpfapplication2:chartdata data= "3" ></ Wpfapplication2:chartdata> <wpfapplication2:chartdata data= "4" ></wpfApplication2:ChartData> ; Wpfapplication2:chartdata data= "4" ></wpfApplication2:ChartData> </wpfapplication2: chartitem.datalist> </wpfApplication2:ChartItem> <wpfapplication2:chartitem name= "candidate B" color= "#FF508B F3 "> <wpfApplication2:ChartItem.DataList> <wpfapplication2:chaRtdata data= "4" ></wpfApplication2:ChartData> <wpfapplication2:chartdata data= "1" ></ Wpfapplication2:chartdata> <wpfapplication2:chartdata data= "2" ></wpfApplication2:ChartData> Wpfapplication2:chartdata data= "1" ></wpfApplication2:ChartData> <wpfapplication2:chartdata data= "1" & Gt;</wpfapplication2:chartdata> </wpfApplication2:ChartItem.DataList> </wpfapplication2:chartitem
      > <wpfapplication2:chartitem name= "candidate C" color= "#FFF73131" > <wpfApplication2:ChartItem.DataList> <wpfapplication2:chartdata data= "2" ></wpfApplication2:ChartData> <wpfapplication2:chartdata Data = "2" ></wpfApplication2:ChartData> <wpfapplication2:chartdata data= "3" ></wpfapplication2: Chartdata> <wpfapplication2:chartdata data= "3" ></wpfApplication2:ChartData> <wpfapplication2 : ChartData data= "3" ></wpfapplication2:chartdata> </wpfApplication2:ChartItem.DataList> </wpfApplication2:ChartItem> </wpfapplication2:radar chartcontrol.datas> </wpfApplication2:RadarChartControl> </Grid> </Window>

The above is a small part of the introduction of the WPF Custom radar Map Development example tutorials, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!