• WPF 常用功能整合

    目录

    WPF入门-1 行和列

    WPF入门-2 选项卡

    WPF入门-3 滚动条

    WPF LiveCharts 绘制图表

    WPF 百分比计算器

    WPF 获取 DataGrid 控件选中当前行某个列的值

    WPF LiveCharts 案例集合

    WPF 绑定数据和数据刷新

    WPF 解决 LiveCharts 中 Labels 显示不全的问题

    WPF入门-1 行和列

    微软官方资料：点击跳转

    划分模块

    有web前端开发经验的都知道，在做界面之前，通常会把界面分为几大的模块，然后再细化模块内部的界面布局，所以，学习WPF之前，也必须先弄懂这个

    前端代码

    1. <Window x:Class="WpfApplication1.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         Title="MainWindow" Height="350" Width="800"  Loaded="Window_Loaded">
    5.     <Grid>
    6.         <Grid.RowDefinitions>
    7.             <RowDefinition Height="50"/>
    8.             <RowDefinition Height="50"/>
    9.             <RowDefinition Height="50"/>
    10.             <RowDefinition Height="50"/>
    11.             <RowDefinition Height="*"/>
    12.         Grid.RowDefinitions>
    13.         
    14.         <Grid Grid.Row="0" Background="AntiqueWhite">  
    15.         Grid>
    16.         
    17.         <Grid Grid.Row="1" Background="Aqua">
    18.             <Grid.ColumnDefinitions>
    19.                 <ColumnDefinition Width="300"/>
    20.                 <ColumnDefinition Width="300"/>
    21.             Grid.ColumnDefinitions>
    22.             
    23.             <Grid Grid.Column="0" Background="BlueViolet">
    24.             Grid>
    25.             
    26.             <Grid Grid.Column="1" Background="CadetBlue">  
    27.             Grid>
    28.         Grid>
    29.         
    30.         <Grid Grid.Row="2" Background="Aquamarine">
    31.             <Grid.ColumnDefinitions>
    32.                 <ColumnDefinition Width="300"/>
    33.                 <ColumnDefinition Width="300"/>
    34.             Grid.ColumnDefinitions>
    35.         Grid>
    36.         
    37.         <Grid Grid.Row="3" Background="Bisque">
    38.             <Grid.ColumnDefinitions>
    39.                 <ColumnDefinition Width="300"/>
    40.                 <ColumnDefinition Width="300"/>
    41.             Grid.ColumnDefinitions>
    42.         Grid>
    43.         
    44.         <Grid Grid.Row="4" Background="Blue">
    45.         Grid>
    46.     Grid>
    47. Window>

    效果：

    这里是添加一行

    下面的 Grid.Row="0" 则表示第一行的布局，以及内部添加什么组件等

     

     在第二行的里面又添加了两列 ColumnDefinition，写法同添加行的一样

    WPF入门-2 选项卡

    1.主页面

    1. <Window x:Class="WpfApp1.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:local="clr-namespace:WpfApp1"
    7.         mc:Ignorable="d"
    8.         Title="MainWindow" Height="450" Width="800">
    9.     <Grid>
    10.         <TabControl>
    11.             <TabItem Header="Page1">
    12.                 <Frame Source="/WpfApp1;component/Pages/Page1.xaml"/>
    13.             TabItem>
    14.             <TabItem Header="Page2">
    15.                 <Frame Source="/WpfApp1;component/Pages/Page2.xaml"/>
    16.             TabItem>
    17.             <TabItem Header="Page3">
    18.                 <Frame Source="/WpfApp1;component/Pages/Page3.xaml"/>
    19.             TabItem>
    20.             <TabItem Header="Page4">
    21.                 <Frame Source="/WpfApp1;component/Test/Page4.xaml"/>
    22.             TabItem>
    23.         TabControl>
    24.     Grid>
    25. Window>

    指的是当前选项所指向的页面

    2.添加页

    在文件夹上点击鼠标右键

    添加完成后，如下

    在本次学习中，可以在页面中添加一些按钮，lable之类的，用来区分。

    其实这里用普通的界面也是可以的，只是要将窗体的最小化，最大化和关闭按钮 去掉，如下

    3.运行 

    WPF入门-3 滚动条

    主界面

    用微软官方的案例，不写任何代码

    1. <Window x:Class="WpfApplication1.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         Title="MainWindow" Height="350" Width="800" Loaded="Window_Loaded">
    5.     <Grid>
    6.         <ScrollViewer HorizontalScrollBarVisibility="Auto">
    7.             <StackPanel VerticalAlignment="Top" HorizontalAlignment="Left">
    8.                 <TextBlock TextWrapping="Wrap" Margin="0,0,0,20">请调整 Rectangle 组件大小，超过了窗体的大小，就会出现滚动条TextBlock>
    9.                 <Rectangle Fill="Green" Width="1500" Height="500">Rectangle>
    10.             StackPanel>
    11.         ScrollViewer>
    12.     Grid>
    13. Window>

    ScrollViewer：滚动条组件

    StackPanel：栈面板，子元素超出部分，被隐藏，可以嵌套

    Rectangle：绘制矩形

    运行

    WPF LiveCharts 绘制图表

    一、新建项目

    新建一个项目 LiveChartBindingDemo，用这个名字，下面的代码你就可以完整的直接复制粘贴就好了，不必再修改。

    引入 LiveCharts 插件，在 NuGet 平台自己装就好了，我的版本是0.9.7，图片使用的编辑器是 Visual Studio 2013

    二、代码

    1.MainWindowViewModel

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System;
    4. using System.Collections.Generic;
    5.  
    6. namespace LiveChartBindingDemo
    7. {
    8.     public class MainWindowViewModel
    9.     {
    10.         SeriesCollection lineSeriesCollection = new SeriesCollection();
    11.         SeriesCollection colunmSeriesCollection = new SeriesCollection();
    12.         SeriesCollection pieSeriesCollection = new SeriesCollection();
    13.         List<string> _lineXLabels = new List<string>();
    14.         List<string> _columnXLabels = new List<string>();
    15.  
    16.         public MainWindowViewModel()
    17.         {
    18.             GetLineSeriesData();
    19.             GetColunmSeriesData();
    20.             GetPieSeriesData();
    21.         }
    22.  
    23.         #region 属性
    24.         /// 
    25.         /// 折线图集合
    26.         /// 
    27.         public SeriesCollection LineSeriesCollection
    28.         {
    29.             get
    30.             {
    31.                 return lineSeriesCollection;
    32.             }
    33.  
    34.             set
    35.             {
    36.                 lineSeriesCollection = value;
    37.             }
    38.         }
    39.  
    40.         /// 
    41.         /// 柱状图集合
    42.         /// 
    43.         public SeriesCollection ColunmSeriesCollection
    44.         {
    45.             get
    46.             {
    47.                 return colunmSeriesCollection;
    48.             }
    49.  
    50.             set
    51.             {
    52.                 colunmSeriesCollection = value;
    53.             }
    54.         }
    55.  
    56.         /// 
    57.         /// 饼图图集合
    58.         /// 
    59.         public SeriesCollection PieSeriesCollection
    60.         {
    61.             get
    62.             {
    63.                 return pieSeriesCollection;
    64.             }
    65.  
    66.             set
    67.             {
    68.                 pieSeriesCollection = value;
    69.             }
    70.         }
    71.  
    72.         /// 
    73.         /// 折线图X坐标
    74.         /// 
    75.         public List<string> LineXLabels
    76.         {
    77.             get
    78.             {
    79.                 return _lineXLabels;
    80.             }
    81.  
    82.             set
    83.             {
    84.                 _lineXLabels = value;
    85.             }
    86.         }
    87.  
    88.         /// 
    89.         /// 柱状图X坐标
    90.         /// 
    91.         public List<string> ColumnXLabels
    92.         {
    93.             get
    94.             {
    95.                 return _columnXLabels;
    96.             }
    97.  
    98.             set
    99.             {
    100.                 _columnXLabels = value;
    101.             }
    102.         }
    103.         #endregion
    104.  
    105.         #region 方法
    106.         void GetLineSeriesData()
    107.         {
    108.             List<string> titles = new List<string> { "苹果", "香蕉", "梨" };
    109.             Listdouble>> values = new Listdouble>>
    110.             {
    111.                 new List<double> { 30, 40, 60 },
    112.                 new List<double> { 20, 10, 50 },
    113.                 new List<double> { 10, 50, 30 }
    114.             };
    115.             List<string> _dates = new List<string>();
    116.             _dates = GetCurrentMonthDates();
    117.             for (int i = 0; i < titles.Count; i++)
    118.             {
    119.                 LineSeries lineseries = new LineSeries();
    120.                 lineseries.DataLabels = true;
    121.                 lineseries.Title = titles[i];
    122.                 lineseries.Values = new ChartValues<double>(values[i]);
    123.                 LineXLabels.Add(_dates[i]);
    124.                 LineSeriesCollection.Add(lineseries);
    125.             }
    126.         }
    127.  
    128.         void GetColunmSeriesData()
    129.         {
    130.             List<string> titles = new List<string> { "Edge", "Chrome", "Firefox", "Other" };
    131.             List<double> columnValues = new List<double> { 10, 70, 15, 5 };
    132.  
    133.             for (int i = 0; i < titles.Count; i++)
    134.             {
    135.                 ColumnXLabels.Add(titles[i]);
    136.             }
    137.             ColumnSeries colunmseries = new ColumnSeries();
    138.             colunmseries.DataLabels = true;
    139.             colunmseries.Title = "占额";
    140.             colunmseries.Values = new ChartValues<double>(columnValues);
    141.             ColunmSeriesCollection.Add(colunmseries);
    142.  
    143.         }
    144.  
    145.         void GetPieSeriesData()
    146.         {
    147.             List<string> titles = new List<string> { "C#", "Java", "Python" };
    148.             List<double> pieValues = new List<double> { 60, 30, 10 };
    149.             ChartValues<double> chartvalue = new ChartValues<double>();
    150.             for (int i = 0; i < titles.Count; i++)
    151.             {
    152.                 chartvalue = new ChartValues<double>();
    153.                 chartvalue.Add(pieValues[i]);
    154.                 PieSeries series = new PieSeries();
    155.                 series.DataLabels = true;
    156.                 series.Title = titles[i];
    157.                 series.Values = chartvalue;
    158.                 PieSeriesCollection.Add(series);
    159.             }
    160.         }
    161.  
    162.         void ThreeColumnData()
    163.         {
    164.             List<string> titles = new List<string> { "苹果", "香蕉", "梨" };
    165.             //三列示例数据
    166.             Listdouble>> threeColunmValues = new Listdouble>>
    167.             {
    168.                 new List<double> { 30, 40, 60 },
    169.                 new List<double> { 20, 10, 50 },
    170.                 new List<double> { 10, 50, 30 }
    171.             };
    172.  
    173.  
    174.             for (int i = 0; i < titles.Count; i++)
    175.             {
    176.                 ColumnSeries colunmseries = new ColumnSeries();
    177.                 colunmseries.DataLabels = true;
    178.                 colunmseries.Title = titles[i];
    179.                 colunmseries.Values = new ChartValues<double>(threeColunmValues[i]);
    180.  
    181.                 ColunmSeriesCollection.Add(colunmseries);
    182.             }
    183.         }
    184.  
    185.         /// 
    186.         /// 获取当前月的每天的日期
    187.         /// 
    188.         /// 日期集合
    189.         List<string> GetCurrentMonthDates()
    190.         {
    191.             List<string> dates = new List<string>();
    192.             DateTime dt = DateTime.Now;
    193.             int year = dt.Year;
    194.             int mouth = dt.Month;
    195.             int days = DateTime.DaysInMonth(year, mouth);
    196.             //本月第一天时间      
    197.             DateTime dt_First = dt.AddDays(1 - (dt.Day));
    198.             dates.Add(String.Format("{0:d}", dt_First.Date));
    199.  
    200.             for (int i = 1; i < days; i++)
    201.             {
    202.                 DateTime temp = dt_First.AddDays(i);
    203.                 dates.Add(String.Format("{0:d}", temp.Date));
    204.             }
    205.             return dates;
    206.         }
    207.         #endregion
    208.     }
    209. }

    2.前端代码 MainWindow.xaml

    1. <Window x:Class="LiveChartBindingDemo.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7.         xmlns:local="clr-namespace:LiveChartBindingDemo"
    8.         mc:Ignorable="d"
    9.         Title="MainWindow"
    10.         Height="720"
    11.         Width="1280">
    12.     <UniformGrid>
    13.         <lvc:CartesianChart Series="{Binding LineSeriesCollection}"
    14.                             LegendLocation="Right">
    15.             <lvc:CartesianChart.AxisY>
    16.                 <lvc:Axis>lvc:Axis>
    17.             lvc:CartesianChart.AxisY>
    18.             <lvc:CartesianChart.AxisX>
    19.                 <lvc:Axis Labels="{Binding LineXLabels}">lvc:Axis>
    20.             lvc:CartesianChart.AxisX>
    21.         lvc:CartesianChart>
    22.         <lvc:CartesianChart Series="{Binding ColunmSeriesCollection}" LegendLocation="Right">
    23.             <lvc:CartesianChart.AxisX>
    24.                 <lvc:Axis Labels="{Binding ColumnXLabels}">lvc:Axis>
    25.             lvc:CartesianChart.AxisX>
    26.             <lvc:CartesianChart.AxisY>
    27.                 <lvc:Axis>lvc:Axis>
    28.             lvc:CartesianChart.AxisY>
    29.         lvc:CartesianChart>
    30.         <lvc:PieChart LegendLocation="Bottom" Series="{Binding PieSeriesCollection}" DataClick="Chart_OnDataClick" Hoverable="False">
    31.             <lvc:PieChart.DataTooltip>
    32.                 <lvc:DefaultTooltip BulletSize="10">lvc:DefaultTooltip>
    33.             lvc:PieChart.DataTooltip>
    34.         lvc:PieChart>
    35.     UniformGrid>
    36. Window>

    3.后端代码 MainWindow.xaml.cs

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System.Windows;
    4.  
    5. namespace LiveChartBindingDemo
    6. {
    7.     /// 
    8.     /// MainWindow.xaml 的交互逻辑
    9.     /// 
    10.     public partial class MainWindow : Window
    11.     {
    12.         MainWindowViewModel mainWindowViewModel = new MainWindowViewModel();
    13.         public MainWindow()
    14.         {
    15.             InitializeComponent();
    16.             this.DataContext = mainWindowViewModel;
    17.         }
    18.  
    19.         private void Chart_OnDataClick(object sender, ChartPoint chartpoint)
    20.         {
    21.             var chart = (LiveCharts.Wpf.PieChart)chartpoint.ChartView;
    22.  
    23.             //clear selected slice.
    24.             foreach (PieSeries series in chart.Series)
    25.                 series.PushOut = 0;
    26.  
    27.             var selectedSeries = (PieSeries)chartpoint.SeriesView;
    28.             selectedSeries.PushOut = 8;
    29.         }
    30.     }
    31. }

    以上就是所有的完整代码了，项目结构如下：

    三、运行

    WPF 百分比计算器

    设计了一个小工具，界面如下：

     

     xaml

    1. <Window x:Class="WpfApplication1.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         ResizeMode ="CanMinimize" WindowStartupLocation="CenterScreen"
    5.         Title="百分比计算器" Height="200" Width="300" Loaded="Window_Loaded">
    6.     <Grid>
    7.         <Label Content="总数量：" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="36,21,0,0" />
    8.         <Label Content="你的数量：" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="36,51,0,0"/>
    9.         <Label Content="结果：" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="36,76,0,0"/>
    10.         <Label Name="Label_Result" Content="" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="110,76,0,0"/>
    11.  
    12.         <TextBox Name="TextBox_AllNum" Width="120" Height="23" Margin="110,25,0,0" TextWrapping="Wrap" Text="" HorizontalAlignment="Left" VerticalAlignment="Top" />
    13.         <TextBox Name="TextBox_YourNum" Width="120" Height="23" Margin="110,53,0,0" TextWrapping="Wrap" Text="" HorizontalAlignment="Left" VerticalAlignment="Top" />
    14.  
    15.         <Button Content="计算" HorizontalAlignment="Left" Margin="110,127,0,0" VerticalAlignment="Top" Width="75" Click="Button_Click"/>
    16.     Grid>
    17. Window>

    后台代码：

    1. using System;
    2. using System.Windows;
    3.  
    4. namespace WpfApplication1
    5. {
    6.     public partial class MainWindow : Window
    7.     {
    8.         public MainWindow()
    9.         {
    10.             InitializeComponent();
    11.         }
    12.  
    13.         private void Window_Loaded(object sender, RoutedEventArgs e)
    14.         {
    15.  
    16.         }
    17.  
    18.         private void Button_Click(object sender, RoutedEventArgs e)
    19.         {
    20.             //总数量
    21.             string s_allNum = this.TextBox_AllNum.Text;
    22.             //你的数量
    23.             string s_yourNum = this.TextBox_YourNum.Text;
    24.  
    25.             if (string.IsNullOrEmpty(s_allNum) || string.IsNullOrEmpty(s_yourNum))
    26.             {
    27.                 MessageBox.Show("输入框不能为空");
    28.                 return;
    29.             }
    30.  
    31.             double allNum = 0;
    32.             double yourNum = 0;
    33.  
    34.             if (!double.TryParse(s_allNum, out allNum))
    35.             {
    36.                 MessageBox.Show("总数量 输入框 输入的不是一个数字");
    37.                 return;
    38.             }
    39.             if (!double.TryParse(s_yourNum, out yourNum))
    40.             {
    41.                 MessageBox.Show("你的数量 输入框 输入的不是一个数字");
    42.                 return;
    43.             }
    44.             if (yourNum > allNum)
    45.             {
    46.                 MessageBox.Show("你的数量 不能大于 总数");
    47.                 return;
    48.             }
    49.  
    50.             double result = (yourNum / allNum) * 100;
    51.             this.Label_Result.Content = string.Format("{0}%", Math.Round(result, 4));
    52.         }
    53.     }
    54. }

    效果：

     

    WPF 获取 DataGrid 控件选中当前行某个列的值

    先新建一个工程，界面如下：

    这个项目按我之前写的例子上加的，链接：点击跳转 

    其实原来的项目也可以不用管，怎么获取DataGrid中的值才是本章的重点，

    在DataGrid 下面添加一个按钮，按钮的点击事件如下：

    1. private void Button_Click(object sender, RoutedEventArgs e)
    2. {
    3.     string value = GetSelectedRow(MyDataGrid, "Name");
    4.     Console.WriteLine(value);
    5. }

    封装获取点击行，某个列的值的方法

    1.         /// 
    2.         /// 获取DataGrid控件选中当前行某个列的值
    3.         /// 
    4.         /// DataGrid控件
    5.         /// 列的名字
    6.         /// 选中行列的值，参数错误则返回null
    7.         public string GetSelectedRow(DataGrid dataGrid, string readName)
    8.         {
    9.             if (dataGrid == null)
    10.             {
    11.                 Console.WriteLine("dataGrid 不能为空");
    12.                 return null;
    13.             }
    14.             if (string.IsNullOrEmpty(readName))
    15.             {
    16.                 Console.WriteLine("readName不能为空");
    17.                 return null;
    18.             }
    19.             if (dataGrid.SelectedItems.Count == 0)
    20.             {
    21.                 Console.WriteLine("dataGrid未选中任何数据");
    22.                 return null;
    23.             }
    24.             if (dataGrid.SelectedItems.Count > 1)
    25.             {
    26.                 Console.WriteLine("不支持选中多行，读取某一个数据");
    27.                 return null;
    28.             }
    29.  
    30.             DataRowView dataRowView = dataGrid.SelectedCells[0].Item as DataRowView;
    31.             if (dataRowView.Row.Table.Columns.Contains(readName))
    32.                 return dataRowView[readName].ToString();
    33.  
    34.             return null;
    35.         }

    运行：

    先选中一行，然后点击测试，成功获取到值

    WPF LiveCharts 案例集合

    学习资料

    LiveCharts官方文档：点击跳转

    一、柱状图

    案例1

    效果：

    前端

    1. <Window x:Class="WpfApplication1.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    6.         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    7.         
    8.         Title="MainWindow" Width="700" Height="400" >
    9.     
    10.     <Grid>
    11.         
    12.         <lvc:CartesianChart Margin="20,75,20,15">
    13.             <lvc:CartesianChart.AxisX>
    14.                 
    15.                 <lvc:Axis FontSize="12" Labels="{Binding Path=StorageLabels}" Title="库位" LabelsRotation="20">
    16.                     <lvc:Axis.Separator>
    17.                         <lvc:Separator Step="1" IsEnabled="False"/>
    18.                     lvc:Axis.Separator>
    19.                 lvc:Axis>
    20.             lvc:CartesianChart.AxisX>
    21.             
    22.             <lvc:CartesianChart.AxisY>
    23.                 <lvc:Axis FontSize="12" Title="百分比" ShowLabels="True" LabelFormatter="{Binding Path=AxisPercentage}">
    24.                     <lvc:Axis.Separator>
    25.                         <lvc:Separator Stroke="#33ffffff" StrokeDashArray="10"/>
    26.                     lvc:Axis.Separator>
    27.                 lvc:Axis>
    28.             lvc:CartesianChart.AxisY>
    29.             
    30.             <lvc:CartesianChart.Series>
    31.                 <lvc:ColumnSeries Values="{Binding Path=StoragePercentages}" DataLabels="True" LabelsPosition="Top"/>
    32.             lvc:CartesianChart.Series>
    33.             
    34.             <lvc:CartesianChart.ChartLegend>
    35.                 
    36.                 <lvc:DefaultLegend BulletSize="12"/>
    37.             lvc:CartesianChart.ChartLegend>
    38.             
    39.         lvc:CartesianChart>
    40.     Grid>
    41. Window>

     后端

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System;
    4. using System.Windows;
    5.  
    6. namespace WpfApplication1
    7. {
    8.     /// 
    9.     /// Interaction logic for MainWindow.xaml
    10.     /// 
    11.     public partial class MainWindow : Window
    12.     {
    13.         private Func<double, string> _axisPercentage;
    14.         private string[] _storageLabels;
    15.         private IChartValues _storagePercentages;
    16.         public Func<double, string> AxisPercentage 
    17.         { 
    18.             get { return _axisPercentage; } 
    19.             set { _axisPercentage = value;  } 
    20.         }
    21.         public string[] StorageLabels 
    22.         { 
    23.             get { return _storageLabels; } 
    24.             set { _storageLabels = value;  } 
    25.         }
    26.         public IChartValues StoragePercentages 
    27.         { 
    28.             get { return _storagePercentages; } 
    29.             set { _storagePercentages = value;  } 
    30.         }
    31.         
    32.         private void ShowStoragePercentageColumnChart()
    33.         {
    34.             StorageLabels = new[]
    35.             {
    36.                 "单元一原料","单元一成品","单元二原料","单元二半成品","单元三原料","单元三半成品","单元四原料","单元四半成品"
    37.             };
    38.             AxisPercentage = val => val.ToString("P");
    39.             StoragePercentages = new ChartValues<double> { 0.2, 0.5, 0.44, 0.88, 0.22, 0.6, 0.14, 0.09 };
    40.             this.DataContext = this;
    41.         }
    42.  
    43.         public MainWindow()
    44.         {
    45.             InitializeComponent();
    46.  
    47.             ShowStoragePercentageColumnChart();
    48.         }
    49.     }
    50. }

    案例2

    效果

     前端

    1. "Test1.MainWindow"
    2.  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7.  
    8.         Title="MainWindow" Width="1280" Height="720"  Loaded="Window_Loaded">
    9.     
    10.         
    11.             
    12.                 "True" Values="{Binding Values2}" Panel.ZIndex="1">
    13.                 "True" Values="{Binding Values1}" Panel.ZIndex="1">
    14.             
    15.         
    16.

    后端

    1. using System.Windows;
    2. using LiveCharts;
    3.  
    4. namespace Test1
    5. {
    6.     /// 
    7.     /// MainWindow.xaml 的交互逻辑
    8.     /// 
    9.     public partial class MainWindow : Window
    10.     {
    11.         public MainWindow()
    12.         {
    13.             InitializeComponent();
    14.         }
    15.  
    16.         public ChartValues<double> Values1 { get; set; }
    17.         public ChartValues<double> Values2 { get; set; }
    18.  
    19.         private void Window_Loaded(object sender, RoutedEventArgs e)
    20.         {
    21.             Values1 = new ChartValues<double> {3, 5, 2, 6, 2, 7, 1};
    22.             Values2 = new ChartValues<double> {6, 2, 6, 3, 2, 7, 2};
    23.             DataContext = this;
    24.         }
    25.     }
    26. }

    二、饼状图

    案例1

    效果

    前端

    1. <Window x:Class="LiveChartBindingDemo.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7.  
    8.         Title="MainWindow" Width="400" Height="300">
    9.     <UniformGrid> 
    10.         <lvc:PieChart LegendLocation="Bottom" Series="{Binding PieSeriesCollection}" DataClick="Chart_OnDataClick" Hoverable="False">
    11.             <lvc:PieChart.DataTooltip>
    12.                 <lvc:DefaultTooltip BulletSize="10">lvc:DefaultTooltip>
    13.             lvc:PieChart.DataTooltip>
    14.         lvc:PieChart>
    15.     UniformGrid>
    16. Window>

    后端

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System;
    4. using System.Windows;
    5.  
    6. namespace LiveChartBindingDemo
    7. {
    8.     /// 
    9.     /// MainWindow.xaml 的交互逻辑
    10.     /// 
    11.     public partial class MainWindow : Window
    12.     {
    13.         MainWindowViewModel mainWindowViewModel = new MainWindowViewModel();
    14.         public MainWindow()
    15.         {
    16.             InitializeComponent();
    17.             this.DataContext = mainWindowViewModel;
    18.         }
    19.  
    20.         private void Chart_OnDataClick(object sender, ChartPoint chartpoint)
    21.         {
    22.             var chart = (LiveCharts.Wpf.PieChart)chartpoint.ChartView;
    23.             foreach (PieSeries series in chart.Series)
    24.                 series.PushOut = 0;
    25.  
    26.             var selectedSeries = (PieSeries)chartpoint.SeriesView;
    27.             selectedSeries.PushOut = 8;
    28.         }
    29.     }
    30. }

    绑定数据

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System;
    4. using System.Collections.Generic;
    5. using System.Windows;
    6.  
    7. namespace LiveChartBindingDemo
    8. {
    9.     public class MainWindowViewModel
    10.     {
    11.         SeriesCollection pieSeriesCollection = new SeriesCollection();
    12.  
    13.         public MainWindowViewModel()
    14.         {
    15.             GetPieSeriesData();
    16.         }
    17.  
    18.         #region 属性
    19.  
    20.         /// 
    21.         /// 饼图图集合
    22.         /// 
    23.         public SeriesCollection PieSeriesCollection
    24.         {
    25.             get { return pieSeriesCollection; }
    26.             set { pieSeriesCollection = value; }
    27.         }
    28.  
    29.         #endregion
    30.  
    31.         #region 方法
    32.  
    33.         void GetPieSeriesData()
    34.         {
    35.             List<string> titles = new List<string> { "C#", "Java", "Python" };
    36.             List<double> pieValues = new List<double> { 60, 30, 10 };
    37.             ChartValues<double> chartvalue = new ChartValues<double>();
    38.             for (int i = 0; i < titles.Count; i++)
    39.             {
    40.                 chartvalue = new ChartValues<double>();
    41.                 chartvalue.Add(pieValues[i]);
    42.                 PieSeries series = new PieSeries();
    43.                 series.DataLabels = true;
    44.                 series.Title = titles[i];
    45.                 series.Values = chartvalue;
    46.                 PieSeriesCollection.Add(series);
    47.             }
    48.         }
    49.  
    50.         #endregion
    51.     }
    52. }

    三、折线图

    案例1

    效果

    前端

    1. <Window x:Class="LiveChartBindingDemo.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    5.         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    6.         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    7.  
    8.         Title="MainWindow" Width="400" Height="300">
    9.     <UniformGrid>
    10.         <lvc:CartesianChart Series="{Binding LineSeriesCollection}" LegendLocation="Right">
    11.             <lvc:CartesianChart.AxisY>
    12.                 <lvc:Axis>lvc:Axis>
    13.             lvc:CartesianChart.AxisY>
    14.             <lvc:CartesianChart.AxisX>
    15.                 <lvc:Axis Labels="{Binding LineXLabels}">lvc:Axis>
    16.             lvc:CartesianChart.AxisX>
    17.         lvc:CartesianChart>
    18.     UniformGrid>
    19. Window>

    后端

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System;
    4. using System.Windows;
    5.  
    6. namespace LiveChartBindingDemo
    7. {
    8.     /// 
    9.     /// MainWindow.xaml 的交互逻辑
    10.     /// 
    11.     public partial class MainWindow : Window
    12.     {
    13.         MainWindowViewModel mainWindowViewModel = new MainWindowViewModel();
    14.         public MainWindow()
    15.         {
    16.             InitializeComponent();
    17.             this.DataContext = mainWindowViewModel;
    18.         }
    19.     }
    20. }

     MainWindowViewModel

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System;
    4. using System.Collections.Generic;
    5. using System.Windows;
    6.  
    7. namespace LiveChartBindingDemo
    8. {
    9.     public class MainWindowViewModel
    10.     {
    11.         private SeriesCollection lineSeriesCollection = new SeriesCollection();
    12.  
    13.         private List<string> _lineXLabels = new List<string>();
    14.  
    15.         public MainWindowViewModel()
    16.         {
    17.             GetLineSeriesData();
    18.         }
    19.  
    20.         #region 属性
    21.         
    22.         /// 
    23.         /// 折线图集合
    24.         /// 
    25.         public SeriesCollection LineSeriesCollection
    26.         {
    27.             get { return lineSeriesCollection; }
    28.             set { lineSeriesCollection = value; }
    29.         }
    30.  
    31.         /// 
    32.         /// 折线图X坐标
    33.         /// 
    34.         public List<string> LineXLabels
    35.         {
    36.             get { return _lineXLabels; }
    37.             set { _lineXLabels = value; }
    38.         }
    39.  
    40.         #endregion
    41.  
    42.         #region 方法
    43.  
    44.         private void GetLineSeriesData()
    45.         {
    46.             List<string> titles = new List<string> { "苹果", "香蕉", "梨" };
    47.             Listdouble>> values = new Listdouble>>
    48.             {
    49.                 new List<double> { 30, 40, 60 },
    50.                 new List<double> { 20, 10, 50 },
    51.                 new List<double> { 10, 50, 30 }
    52.             };
    53.             List<string> _dates = new List<string>();
    54.             _dates = GetCurrentMonthDates();
    55.             for (int i = 0; i < titles.Count; i++)
    56.             {
    57.                 LineSeries lineseries = new LineSeries();
    58.                 lineseries.DataLabels = true;
    59.                 lineseries.Title = titles[i];
    60.                 lineseries.Values = new ChartValues<double>(values[i]);
    61.                 LineXLabels.Add(_dates[i]);
    62.                 LineSeriesCollection.Add(lineseries);
    63.             }
    64.         }
    65.  
    66.         /// 
    67.         /// 获取当前月的每天的日期
    68.         /// 
    69.         /// 日期集合
    70.         private List<string> GetCurrentMonthDates()
    71.         {
    72.             List<string> dates = new List<string>();
    73.             DateTime dt = DateTime.Now;
    74.             int year = dt.Year;
    75.             int mouth = dt.Month;
    76.             int days = DateTime.DaysInMonth(year, mouth);
    77.             //本月第一天时间      
    78.             DateTime dt_First = dt.AddDays(1 - (dt.Day));
    79.             dates.Add(String.Format("{0:d}", dt_First.Date));
    80.  
    81.             for (int i = 1; i < days; i++)
    82.             {
    83.                 DateTime temp = dt_First.AddDays(i);
    84.                 dates.Add(String.Format("{0:d}", temp.Date));
    85.             }
    86.             return dates;
    87.         }
    88.         #endregion
    89.     }
    90. }

    WPF 绑定数据和数据刷新

    1.ViewModelBase

    主要用做前端界面更新数据的通知

    1. using System;
    2. using System.Collections.Generic;
    3. using System.Linq;
    4. using System.Text;
    5. using System.Threading.Tasks;
    6.  
    7. namespace WpfApplication2
    8. {
    9.     /// 
    10.     /// 实现了属性更改通知的基类
    11.     /// 
    12.     public class ViewModelBase : System.ComponentModel.INotifyPropertyChanged
    13.     {
    14.         public virtual event System.ComponentModel.PropertyChangedEventHandler PropertyChanged;
    15.  
    16.         /// 
    17.         /// 属性值变化时发生
    18.         /// 
    19.         /// 
    20.         protected virtual void OnPropertyChanged(string propertyName)
    21.         {
    22.             if (this.PropertyChanged != null)
    23.                 this.PropertyChanged(this, new System.ComponentModel.PropertyChangedEventArgs(propertyName));
    24.         }
    25.  
    26.         /// 
    27.         /// 属性值变化时发生
    28.         /// 
    29.         /// 
    30.         protected virtual void OnPropertyChanged<T>(System.Linq.Expressions.Expression> propertyExpression)
    31.         {
    32.             var propertyName = (propertyExpression.Body as System.Linq.Expressions.MemberExpression).Member.Name;
    33.             this.OnPropertyChanged(propertyName);
    34.         }
    35.     }
    36. }

    2.前端代码

    1. "WpfApplication2.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         Title="MainWindow" Width="300" Height="200"  Loaded="Window_Loaded">
    5.     
    6.         
    7.         
    8.

    3.后端代码

    1. using System;
    2. using System.ComponentModel;
    3. using System.Windows;
    4.  
    5. namespace WpfApplication2
    6. {
    7.     /// 
    8.     /// MainWindow.xaml 的交互逻辑
    9.     /// 
    10.     public partial class MainWindow : Window
    11.     {
    12.         public MainWindow()
    13.         {
    14.             InitializeComponent();
    15.         }
    16.  
    17.         private Test Tests = new Test();
    18.  
    19.         private void Window_Loaded(object sender, RoutedEventArgs e)
    20.         {
    21.             Tests.MyLable = "默认值";
    22.  
    23.             this.DataContext = Tests;
    24.         }
    25.  
    26.         private void Button_Click(object sender, RoutedEventArgs e)
    27.         {
    28.             Random r = new Random();
    29.             int randomNum = r.Next(1, 100);
    30.             string content = string.Format("随机数：{0}", randomNum);
    31.             Tests.MyLable = content;
    32.         }
    33.  
    34.     }
    35.  
    36.     public class Test : ViewModelBase
    37.     {
    38.         private string myLable;
    39.         public string MyLable
    40.         {
    41.             get { return myLable; }
    42.             set { myLable = value; this.OnPropertyChanged("MyLable"); }
    43.         }
    44.     }
    45.  
    46. }

    在这里新建了一个类，并继承了 ViewModeBase，在 MyLable  Set 访问器中，加入了 数据更新通知，另外 this.DataContext = Tests; 这句是给前端数据绑定的类

    测试

    运行后，界面如下：

    点击 Test 按钮，可以看到，数据成功在后台更新了

    WPF 解决 LiveCharts 中 Labels 显示不全的问题

    在显示柱状图时，绑定的 Labels 数组明明是完整的，但是在图表中就是只显示不完整，如下图：

    底下的列名，有的显示，有的不显示。

    网上查了一圈，也没看到什么有用的例子，后面终于在github 上看到了答案

    有兴趣的可以去看看：点击跳转

    当然，下面也会介绍解决的方法。

    二、源代码

    这里是上面的图片原代码

    前端：

    1. <Window x:Class="WpfApplication1.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    5.         
    6.         Title="MainWindow" Height="350" Width="525">
    7.     <Grid>
    8.         <lvc:CartesianChart Name="LineChart" LegendLocation="top" >
    9.             <lvc:CartesianChart.AxisY>
    10.                 <lvc:Axis Title="Sales" >lvc:Axis>
    11.             lvc:CartesianChart.AxisY>
    12.             <lvc:CartesianChart.AxisX>
    13.                 <lvc:AxesCollection>
    14.                     <lvc:Axis Labels="{Binding Labels}"/>
    15.                 lvc:AxesCollection>
    16.             lvc:CartesianChart.AxisX>
    17.         lvc:CartesianChart>
    18.     Grid>
    19. Window>

    后端代码：

    1. using LiveCharts;
    2. using LiveCharts.Wpf;
    3. using System.Windows;
    4.  
    5. namespace WpfApplication1
    6. {
    7.     /// 
    8.     /// MainWindow.xaml 的交互逻辑
    9.     /// 
    10.     public partial class MainWindow : Window
    11.     {
    12.         private SeriesCollection seriesCollection = new SeriesCollection();
    13.         public string[] Labels { get; set; }
    14.  
    15.         public MainWindow()
    16.         {
    17.             InitializeComponent();
    18.  
    19.             Labels = new string[] { "第一列", "第二列", "第三列", "第四列", "第五列", "第六列", "第七列", "第八列", "第九列", "第十列" };
    20.             DataContext = this;
    21.             LoadLineChart();
    22.         }
    23.  
    24.         private void LoadLineChart()
    25.         {
    26.             seriesCollection = new SeriesCollection
    27.             {
    28.                   new ColumnSeries
    29.                   {
    30.                       Title = "1988",
    31.                       Values = new ChartValues<double> { 10, 50, 39, 50, 5, 10, 15, 20, 25, 30 }
    32.                   }
    33.             };
    34.  
    35.             LineChart.Series = seriesCollection;
    36.         }
    37.     }
    38. }

    三、解决问题

    只需要改前端就行了，如下，重点是加入 Separator标签，和 Step=“1” 这句。

    1. <Window x:Class="WpfApplication1.MainWindow"
    2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4.         xmlns:lvc="clr-namespace:LiveCharts.Wpf;assembly=LiveCharts.Wpf"
    5.         
    6.         Title="MainWindow" Height="350" Width="525">
    7.     <Grid>
    8.         <lvc:CartesianChart Name="LineChart" LegendLocation="top" >
    9.             <lvc:CartesianChart.AxisY>
    10.                 <lvc:Axis Title="Sales" >lvc:Axis>
    11.             lvc:CartesianChart.AxisY>
    12.             <lvc:CartesianChart.AxisX>
    13.                 <lvc:AxesCollection>
    14.                     <lvc:Axis Labels="{Binding Labels}">
    15.                         <lvc:Axis.Separator>
    16.                             <lvc:Separator Step="1" />
    17.                         lvc:Axis.Separator>
    18.                     lvc:Axis>
    19.                 lvc:AxesCollection>
    20.             lvc:CartesianChart.AxisX>
    21.         lvc:CartesianChart>
    22.     Grid>
    23. Window>

    运行测试：

    可以看到，完美的解决了问题

    end

  • 相关阅读:
    设计模式——行为型设计模式
    数字IC验证——PSS可移植测试用例
    vue pc商城项目 ----------登录
    华为OD机试真题【最多颜色的车辆】
    在Linux下，转换来自windos文本中的换行符\r\n为\n
    css样式操作、动画操作
    猿创征文｜大数据之离线数据处理总结+思维导图（全面总结）
    css 相关知识点汇总
    365天挑战LeetCode1000题——Day 046 生成每种字符都是奇数个的字符串 + 两数相加 + 有效的括号
    （手撕）数据结构---＞堆
  • 原文地址：https://blog.csdn.net/qq_38693757/article/details/125993367