WPF 自定义雷达图控件开发：从创建到数据绑定

第一步：创建主雷达图用户控件

首先，需要创建一个名为 RadarChartControl 的用户控件（UserControl）。该控件是整个雷达图的核心，负责接收参数、绘制背景网格并渲染数据多边形。

1.1 定义前台布局与事件绑定

在前台 XAML 中，使用 Canvas 面板作为绘图容器，并绑定加载事件 RadarChartControl_OnLoaded，确保窗口内容呈现时执行绘图逻辑：

<UserControl x:Class="WpfApplication2.RadarChartControl" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
mc:Ignorable="d" 
d:DesignHeight="300" d:DesignWidth="300" Loaded="RadarChartControl_OnLoaded">
 <Canvas x:Name="CanvasPanel" HorizontalAlignment="Center" VerticalAlignment="Center">
 </Canvas>
</UserControl>

1.2 声明核心依赖属性

为了让控件具备良好的绑定支持，需注册以下 DependencyProperty：

• Size: 用于设置图表内部的圆形区域尺寸（默认 400）。
• Arguments: List<ArgumentModel>，定义每个维度的标题名称及图标。
• Datas: List<ChartItem>，包含所有需要绘制的数据序列集合。
• BorderBrush: 设定背景圆圈的颜色。

1.3 实现加载绘图逻辑

在 RadarChartControl_OnLoaded 事件中，主要完成以下步骤：

1. 数据校验：调用 CheckData() 方法检查所有数据组是否拥有相同的维度数量。
2. 初始化背景：SetCanvasAndBackground(maxData) 根据最大值设置画布尺寸，并通过循环绘制同心圆网格线。
3. 计算比例：获取最大半径长度，以便将实际数据映射为屏幕坐标。
4. 渲染数据区：遍历 Datas 中的每一项，利用三角函数 Cos 和 Sin 计算各顶点坐标，并使用两个重叠的 Polygon（一个填充透明度低的颜色，一个描边）来表现数据覆盖范围。

第二步：制作带图标的标题按钮控件

为了使雷达图的各个维度（如“Java”、“Python”）显示更具辨识度，创建一个自定义的按钮控件 ChartButton，允许其显示图标和文字内容。

2.1 编写控件模板

在前台设计中，自定义 Button 的 Template。内部包含一个圆角矩形背景和水平方向的 StackPanel，左侧绑定图片数据，右侧显示文本内容：

<Grid>
 <Button x:Name="MyButton" ...>
  <Button.Template>
   <ControlTemplate TargetType="{x:Type Button}">
    <Grid ...>
     <Rectangle RadiusX="20" RadiusY="25" Stroke="#FF06FFE8"/>
     <StackPanel Orientation="Horizontal" ...>
      <Rectangle Width="{Binding IconWidth}">
       <Rectangle.Fill><ImageBrush ImageSource="{Binding Icon}"/></Rectangle.Fill>
      </Rectangle>
      <TextBlock Text="{TemplateBinding Content}" />
     </StackPanel>
    </Grid>
   </ControlTemplate>
  </Button.Template>
 </Button>
</Grid>

2.2 处理后台绑定

添加 Content、Icon（图像路径）、IconHeight 等依赖属性。在 ChartButton_OnLoaded 事件中，将这些属性赋值给内部按钮，并在有图标时生成临时的 Model 对象以传递给 DataContext，确保模板绑定正常工作：

public static readonly DependencyProperty IconProperty =
 DependencyProperty.Register("Icon", typeof(ImageSource), typeof(ChartButton));

第三步：创建数据组列表展示控件

为了清晰区分图表中的多条曲线，提供一个列表控件 RadarChartTitleList，通常放置在图表的一侧或下方。

3.1 定义列表样式

该控件继承自 UserControl，包含一个 ListBox 用于展示各个数据系列的标识。

<ListBox x:Name="MyListBox" ItemsSource="{Binding}" ItemContainerStyle="{StaticResource ItemContainer}">

3.2 设置绑定的数据结构

前台采用 DataTemplate 为每项数据绘制一个小圆点（用 Ellipse）和对应的名称文字块 TextBlock。后台代码简单地将控件自身的 DataContext 指向传入的 List<ChartItem>：

this.DataContext = ItemSoure;

第四步：在主界面引用并绑定数据

最后，在 WPF 的主窗口 MainWindow.xaml 中使用已定义的组件。需要注意指定命名空间映射：

xmlns:wpfApplication2="clr-namespace:WpfApplication2"

在页面布局中实例化 RadarChartControl，并通过 XAML 语法直接配置 Arguments 和 Datas：

<wpfApplication2:RadarChartControl.Arguments>
 <wpfApplication2:ArgumentModel Name="C#" IconSource="Chart_Bar_Big.png"/
 <wpfApplication2:ArgumentModel Name="JAVA" IconSource="Blueprint_Blog.png"/
 ...// 其他维度定义
</wpfApplication2:RadarChartControl.Arguments>

<wpfApplication2:RadarChartControl.Datas>
 <wpfApplication2:ChartItem Name="应聘者A" Color="#FF07C507">
  <wpfApplication2:ChartData Data="1"/>
  <wpfApplication2:ChartData Data="3"/>
 ...// 对应维度的数值
 </wpfApplication2:ChartItem>
...// 更多数据系列
</wpfApplication2:RadarChartControl.Datas>