【Chart控制元件】餅狀圖
阿新 • • 發佈:2022-12-10
WPF沒有系統的Chart控制元件,因此要使用第三方的chart控制元件庫
1、在Nuget中新增DotNetProjects.DataVisualization.Toolkit。
Chart控制元件結構
餅狀圖
效果
xaml
<Window x:Class="testControl.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:local="clr-namespace:testControl" xmlns:chart="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=DotNetProjects.DataVisualization.Toolkit"xmlns:visualizationToolkit="clr-namespace:System.Windows.Controls.DataVisualization;assembly=DotNetProjects.DataVisualization.Toolkit" mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"> <Window.Resources> <Style x:Key="PieChartLegendItemStyle" TargetType="{x:Type chart:LegendItem}"> <Setter Property="IsTabStop" Value="False" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type chart:LegendItem}"> <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"> <StackPanel Orientation="Horizontal"> <Rectangle Width="8" Height="8" Fill="{Binding Background}" Stroke="{Binding BorderBrush}" StrokeThickness="0" Margin="0,0,3,0" /> <visualizationToolkit:Title Content="{TemplateBinding Content}" /> </StackPanel> </Border> </ControlTemplate> </Setter.Value> </Setter> </Style> <Style x:Key="PieSeriesStyle1" TargetType="{x:Type chart:PieSeries}"> <Setter Property="IsTabStop" Value="False"/> <Setter Property="Margin" Value="0"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type chart:PieSeries}"> <Canvas x:Name="PlotArea" Margin="0" /> </ControlTemplate> </Setter.Value> </Setter> </Style> </Window.Resources> <Grid> <!--表格--> <chart:Chart Height="271" Name="chart1" Width="379" BorderThickness="0" > <!--表格的LegEnd--> <chart:Chart.LegendStyle> <Style TargetType="visualizationToolkit:Legend"> <Setter Property="Visibility" Value="Collapsed"/> <Setter Property="Width" Value="0"/> <Setter Property="Height" Value="0"/> </Style> </chart:Chart.LegendStyle> <!--表格的繪圖區域 --> <chart:Chart.PlotAreaStyle> <Style TargetType="Grid"> <Setter Property="Panel.Background" Value="Transparent"/> </Style> </chart:Chart.PlotAreaStyle> <!--表格的序列--> <chart:Chart.Series > <!--餅狀圖--> <chart:PieSeries ItemsSource="{Binding}" DependentValuePath="Value" IndependentValuePath="Key" Title="Pet Preference" IsSelectionEnabled="True" /> </chart:Chart.Series> </chart:Chart> </Grid> </Window>
C# 程式碼
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows; using System.Windows.Controls; using System.Windows.Controls.DataVisualization.Charting; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; namespace testControl { /// <summary> /// Interaction logic for MainWindow.xaml /// </summary> public partial class MainWindow : Window { public MainWindow() { InitializeComponent(); chart1.DataContext = new KeyValuePair<string, int>[] { new KeyValuePair<string, int>("Dog", 30), new KeyValuePair<string, int>("Cat", 25), new KeyValuePair<string, int>("Rat", 5), new KeyValuePair<string, int>("Hampster", 8), new KeyValuePair<string, int>("Rabbit", 12) }; } } }