如何实现条形图的数据绑定

如何实现条形图的数据绑定

原文出处:http://www.beacosta.com/Archive/2005_10_01_bcosta_archive.html
Avalon的风格和模板特征与绑定数据的ItemsControl结合可以创建一个简单的条形图.ItemsControl是一个用来显示一系列项的控件.这些项可以是你想要的任何东西:人,数字,控件等等.如果一个ItemsControl的每一项的都可以用矩形来表示,且矩形的高度绑定到数字的数据,你就可以得到一个绑定数据的条形图.

这个例子的数据源是一个带ValueCollection属性的类,ValueCollection的类型为ObservableCollection<int>.ObservableCollection<T>继承自 INotifyCollectionChanged,INotifyCollectionChanged表示当从集合增加/移除/覆盖项时, 数据绑定引擎将会通知这些变化,界面将会得到更新.

这里是ItemsControl的表示法:

    <ItemsControl ItemsSource="{Binding Source={StaticResource source}, Path=ValueCollection}"
        ItemTemplate="{StaticResource template}" Height="130">
        <ItemsControl.ItemsPanel>
            <StackPanel Orientation="Horizontal" />
        </ItemsControl.ItemsPanel>
    </ItemsControl>

ItemsControl的默认Panel是垂直方向的,但是我们想要各项按照水平方向显示-每一个条形都在前一个的右边.为了改变Panel,我们修改了ItemsControl的ItemsPanel属性(关于如何改变ItemsControl的Panel的细节请察看我的上一片帖子).< br/>
每项的模板包含一个高度绑定到相应整数数据源的矩形,和一个没有填充的矩形来增加条形之间的间隔:

    <DataTemplate x:Key="template">
        <StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
            <Rectangle Height="{Binding}" Width="20" Fill="Red" />
            <Rectangle Width="5" />
        </StackPanel>
    </DataTemplate>

这是一个很简单的例子,但是它将带给你一些思路,是处理更复杂数据的基础.结果表现如下: