IntervalChart，一个可视化数字范围的 WPF 控件

• 下载示例 
• 下载 HAKGERSoft.IntervalChart.Freeware.zip

介绍  

这篇文章包含了对我的 WPF 控件 IntervalChart 的描述和示例代码。该控件可用于可视化实数范围（区间）。结果如下图所示：

• 处理开/闭区间端点
• 处理无限端点
• 处理不同的区间高度 

使用代码

IntervalChart 控件以编译后的程序集文件形式分发，没有源代码。

入门

下载程序集后

• 将其作为引用添加到您的项目中 
• 在 WPF 窗口的 XAML 文件中，在文件顶部添加命名空间声明

 xmlns:h="clr-namespace:HAKGERSoft.IntervalChart;assembly=HAKGERSoft.IntervalChart"

• 在适当的位置添加控件声明： 

<h:HIntervalChart Width="500" Height="200"></h:HIntervalChart>

这将添加一个空控件，没有指定任何区间

使用区间

区间可以通过 XAML 或代码隐藏添加到图表中。

使用 XAML

通过使用 Items 属性，可以通过 XAML 轻松添加区间

<h:HIntervalChart Width="500" Height="200">
       <h:HIntervalChart.Items>
              <h:Interval>
                    <h:Interval.Left>
                            <h:IntervalEndpoint Value="2"></h:IntervalEndpoint>
                     </h:Interval.Left>
                     <h:Interval.Right>
                            <h:IntervalEndpoint Value="4"></h:IntervalEndpoint>
                    </h:Interval.Right>
              </h:Interval>
              <h:Interval>
                     <h:Interval.Left>
                            <h:IntervalEndpoint Value="6"></h:IntervalEndpoint>
                     </h:Interval.Left>
                    <h:Interval.Right>
                            <h:IntervalEndpoint Value="10"></h:IntervalEndpoint>
                    </h:Interval.Right>
             </h:Interval>
       </h:HIntervalChart.Items>
</h:HIntervalChart>

这种声明会产生两个简单的区间

使用代码隐藏

通过代码隐藏使用 ItemsSource 属性可以实现相同的效果

using System.Windows;
using System.Collections.ObjectModel;
using HAKGERSoft.IntervalChart;
	
namespace TestApp {
	
    public partial class MainWindow : Window {
       public ObservableCollection<Interval> IntervalCollection {
          get;
          set;
       }
       public MainWindow() {
          IntervalCollection = new ObservableCollection<Interval>() {
            new Interval() {
                  Left = new IntervalEndpoint() { Value = 2 },
                  Right = new IntervalEndpoint() { Value = 4 }
            },
            new Interval() {
                  Left = new IntervalEndpoint() { Value = 6 },
                  Right = new IntervalEndpoint() { Value = 10 }
            }
          };
         InitializeComponent();
      }
    }
}

<h:HIntervalChart Width="500" Height="200" 
   ItemsSource="{Binding Path=IntervalCollection, ElementName=MyWindow}"></h:HIntervalChart>

 "MyWindow" 在上面的代码片段中使用，是 IntervalCollection 所在的窗口名称。

我认为上面代码片段中使用的属性非常简单，不言自明，无需解释。

显示规则

区间使用以下规则显示

• 如果只有一个区间，它会填充图表的所有可用空间

• 如果有两个或更多区间，它们会根据各自的大小填充图表的所有可用空间

• 如果存在无限端点，则会对图表进行一些额外的转换以正确显示它

 

Shift 属性

如果两个或更多区间相互重叠，则很难区分它们。Interval Shift 属性可用于更改区间的高度。默认的 shift 值是 1，可以具有以下值：1、2、3、4。

在上图中，有两个区间，其中“外部”区间具有比“内部”区间更大的 shift 值。

终结点

区间端点是区间的边缘，由 IntervalEndpoint 类表示。

端点类型 

端点类型由 EndpointType 属性设置。通过使用不同的端点类型的组合，我们可以声明不同类型的区间

• 从 2（排除）到 4（排除）的开区间



• 从 2（包含）到 4（包含）的闭区间
 
• 从 2（排除）到 4（包含）的左半开区间



• 从 2（包含）到 4（排除）的右半开区间
 

无限端点 

端点可以声明为无限，以指示该方向上没有边界（在这种情况下，IntervalEndpoint Value 应该为 double.PositiveInfinity）。

问答

我如何更改区间的尺寸？

特定区间的实际大小无法直接定义。它取决于整个图表控件的大小以及已定义的其他区间。可以更改的是整个 IntervalChart 控件的大小。您可以显式设置 Width 和 Height 值，或使用 WPF 水平拉伸功能，以便图表填充所有可用空间。不支持垂直拉伸。

我如何更改区间的颜色？

目前无法更改，除非重新模板化。

是否有缩放功能？

没有，IntervalChart 是一个非常简单的控件，没有任何交互（缩放、滚动等）。

限制

附加的控件是免费软件版本，它有一个限制：最多可以显示 4 个区间。需要获得完整版本的控件才能显示任意数量的区间。 

已知问题

显示的端点值与端点边缘没有完全对齐。