WPF 自定义 写实风 雷达图控件

控件主要使用Transform实现控件的旋转绘制

先来张图Look Look。。。

XAMl:

<UserControl.Resources><Style TargetType="Line"><Setter Property="Stroke" Value="#AB72D458"/><Setter Property="X1" Value="0"/><Setter Property="Y1" Value="0"/><Setter Property="X2" Value="1"/><Setter Property="Y1" Value="0"/><Setter Property="Stretch" Value="Fill"/><Setter Property="StrokeThickness" Value="1"/><Setter Property="RenderTransformOrigin" Value="0.5,0.05"/></Style></UserControl.Resources><Grid Margin="8" x:Name="RadarGrid" Width="{Binding RelativeSource={RelativeSource Self},Path=ActualHeight}"><Ellipse Margin="-8" StrokeThickness="8"><Ellipse.Stroke><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="#777777"/><GradientStop Color="White" Offset="1"/></LinearGradientBrush></Ellipse.Stroke><Ellipse.Effect><DropShadowEffect ShadowDepth="4" BlurRadius="20" Direction="-90" Color="#B6B4B4"/></Ellipse.Effect></Ellipse><!--#region 底图 --><Ellipse><Ellipse.Fill><RadialGradientBrush><GradientStop Color="#FF02AE03"/><GradientStop Color="#FF034300" Offset="0.904"/></RadialGradientBrush></Ellipse.Fill></Ellipse><!--#endregion--><!--#region 扫描线 --><!--<Grid RenderTransformOrigin="0.5,0.5"><Grid.ColumnDefinitions><ColumnDefinition/><ColumnDefinition/></Grid.ColumnDefinitions><Grid.Triggers><EventTrigger RoutedEvent="Loaded"><BeginStoryboard><Storyboard RepeatBehavior="Forever"><DoubleAnimation Storyboard.TargetName="ScanEllipse" Duration="0:0:2"Storyboard.TargetProperty="Angle" From="0" To="360"/></Storyboard></BeginStoryboard></EventTrigger></Grid.Triggers><Grid.RenderTransform><RotateTransform x:Name="ScanEllipse"/></Grid.RenderTransform><Line X1="0" Y1="0" X2="1" Y2="0" StrokeThickness="4" StrokeDashCap="Round" StrokeDashArray="{x:Null}" Stretch="Fill"><Line.Stroke><LinearGradientBrush EndPoint="1,0" StartPoint="0,0"><GradientStop Color="#FFC5FFB6" Offset="0.008"/><GradientStop Color="Transparent" Offset="1"/></LinearGradientBrush></Line.Stroke><Line.Effect><BlurEffect/></Line.Effect></Line></Grid>--><!--#endregion--><Line/><Line><Line.RenderTransform><RotateTransform Angle="30"/></Line.RenderTransform></Line><Line><Line.RenderTransform><RotateTransform Angle="60"/></Line.RenderTransform></Line><Line><Line.RenderTransform><RotateTransform Angle="90"/></Line.RenderTransform></Line><Line><Line.RenderTransform><RotateTransform Angle="120"/></Line.RenderTransform></Line><Line><Line.RenderTransform><RotateTransform Angle="150"/></Line.RenderTransform></Line><Ellipse Stroke="#FF0C6703" StrokeThickness="2"/><Ellipse Stroke="#E4A0F424" Margin="50"/><Ellipse Stroke="#C3A0F424" Margin="100"/><Ellipse Stroke="#9EA0F424" Margin="150"/><Ellipse Stroke="#AEA0F424" Margin="200"/><Ellipse Fill="#AEA0F424" Width="10" Height="10"/><Grid x:Name="dataGrid"/><!--<TextBlock Text="10" VerticalAlignment="Center" Foreground="{StaticResource MahApps.Brushes.ThemeBackground}" Margin="0" /><TextBlock Text="8" VerticalAlignment="Center" Foreground="{StaticResource MahApps.Brushes.ThemeBackground}" Margin="48" /><TextBlock Text="6" VerticalAlignment="Center" Foreground="{StaticResource MahApps.Brushes.ThemeBackground}" Margin="98" /><TextBlock Text="4" VerticalAlignment="Center" Foreground="{StaticResource MahApps.Brushes.ThemeBackground}" Margin="148"/><TextBlock Text="2" VerticalAlignment="Center" Foreground="{StaticResource MahApps.Brushes.ThemeBackground}" Margin="198"/>--></Grid>

C#:

/// <summary>/// RadarChart.xaml 的交互逻辑/// </summary>public partial class RadarChart : UserControl{public RadarChart(){InitializeComponent();}protected override void OnRenderSizeChanged(SizeChangedInfo sizeInfo){base.OnRenderSizeChanged(sizeInfo);Refresh();}public ObservableCollection<RadarData> RadarDatas{get {return (ObservableCollection<RadarData>)GetValue(RadarDatasProperty); }set {SetValue(RadarDatasProperty, value); }}public static readonly DependencyProperty RadarDatasProperty =DependencyProperty.Register("RadarDatas", typeof(ObservableCollection<RadarData>), typeof(RadarChart), new PropertyMetadata(null, OnDataChanged));private static void OnDataChanged(DependencyObject d, DependencyPropertyChangedEventArgs e){var sen = (d as RadarChart);if (sen.RadarDatas != null){sen.RadarDatas.CollectionChanged += (s, er) => sen.Refresh();}}private const double maxDistance = 10;private void Refresh(){dataGrid.Children.Clear();if (RadarDatas == null){return;}Point center = new Point(RadarGrid.ActualHeight / 2, RadarGrid.ActualWidth / 2);foreach (var item in RadarDatas){if (item.Distance > maxDistance){continue;}ContentControl contentControl = new ContentControl() {Width = 30, Height = 30 };double locat = 0;if (item.Distance != 0){locat = item.Distance / maxDistance * (RadarGrid.ActualHeight + contentControl.Width) / 2 - (contentControl.Width / 2);}// 图形化的显示内容item.Content.HorizontalAlignment = HorizontalAlignment.Center;item.Content.VerticalAlignment = VerticalAlignment.Center;contentControl.Content = item.Content;TranslateTransform translate = new TranslateTransform() {Y = -locat };contentControl.RenderTransform = translate;contentControl.Foreground = Brushes.White;// 显示当前距离的文本TextBlock textBlock = new TextBlock() {Text = item.Distance.ToString("f1")};textBlock.VerticalAlignment = VerticalAlignment.Bottom;textBlock.FontSize = 14d;textBlock.HorizontalAlignment = HorizontalAlignment.Center;TranslateTransform translateText = new TranslateTransform() {Y = -locat / 2 };RotateTransform rotateText = new RotateTransform(-item.Angle);TransformGroup group = new TransformGroup();group.Children.Add(rotateText);group.Children.Add(translateText);textBlock.RenderTransform = group;textBlock.Foreground = Brushes.White;// 划线Line line = new Line() {X1 = 0, Y1 = 0, X2 = 0, Y2 = 1, Width = 0d,Height=0d};var lineHeight = item.Distance / maxDistance * (RadarGrid.ActualHeight + contentControl.Width) / 2 - (contentControl.Width / 2);if (lineHeight > contentControl.Width){line.Height = item.Distance / maxDistance * (RadarGrid.ActualHeight + contentControl.Width) / 2 - (contentControl.Width / 2);line.Width = item.Distance / maxDistance * (RadarGrid.ActualHeight + contentControl.Width) / 2;}line.Stroke = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#9EBE0E19"));line.StrokeThickness = 3;line.VerticalAlignment = VerticalAlignment.Bottom;line.HorizontalAlignment = HorizontalAlignment.Center;Grid lineGrid = new Grid();lineGrid.RowDefinitions.Add(new RowDefinition());lineGrid.RowDefinitions.Add(new RowDefinition());lineGrid.Children.Add(line);lineGrid.Children.Add(textBlock);Grid grid = new Grid();RotateTransform rotate = new RotateTransform() {Angle = item.Angle };grid.RenderTransformOrigin = new Point(0.5, 0.5);grid.RenderTransform = rotate;grid.Children.Add(contentControl);grid.Children.Add(lineGrid);dataGrid.Children.Add(grid);}}}public class RadarData{public double Angle {get; set; }public double Distance {get; set; }public FrameworkElement Content {get; set; }}

测试使用数据：

double testdis = 10;double testdis1 = 0;double testdis2 = 5;/// <summary>/// 测试雷达图/// </summary>void TestRadar(){testdis = testdis <= 1 ? 10 : testdis;testdis1 = testdis1 >= 9 ? 0 : testdis1;testdis2 = testdis2 >= 9 ? 0 : testdis2;RadarTestData.Clear();testdis -= 0.02;RadarData data = new RadarData(){Angle = -30,Distance = testdis,Content = new PackIconMaterial() {Width = 30, Foreground = Brushes.Red, Height = 30, Kind = PackIconMaterialKind.Run },};RadarTestData.Add(data);testdis1 += 0.02;RadarData data1 = new RadarData(){Angle = 120,Distance = testdis1,Content = new PackIconMaterial() {Width = 20, Foreground = Brushes.Red, Height = 20, Kind = PackIconMaterialKind.Archive },};RadarTestData.Add(data1);testdis2 += 0.02;RadarData data2 = new RadarData(){Angle = 45,Distance = testdis2,Content = new PackIconMaterial() {Width = 20, Foreground = Brushes.Red, Height = 20, Kind = PackIconMaterialKind.AlarmLight },};RadarTestData.Add(data2);}