WPF用ListBox做简单的柱状图

这是今年7、8月份的时候,那个项目中用到的,需要显示柱状图和饼图,我用到的是柱状图,因为是先做Demo所以,所以打算所有东西都是用WPF做而不使用第三方,一个是因为可能涉及到版权问题,也是为了维护和定制方便,是用WPF做这类的应用,界面和可定制性还是不错的,如果有一个好的美工的话就更好了,后来赶时间,就想到了用ListBox自己做一个,做完之后感觉还不错,虽然不是很美观,但是基本功能倒是实现了。

前台放置一个ListBox控件,用来显示柱状图,是用ListBox的自定义模板功能为柱状图设计样式:

<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" DockPanel.Dock="Bottom" HorizontalAlignment="Center" VerticalAlignment="Bottom">
<ListBox ScrollViewer.CanContentScroll="False" ItemsSource="{Binding}" x:Name="LSRept">
<ListBox.Template>
<ControlTemplate TargetType="{x:Type ListBox}">
<StackPanel>
<WrapPanel IsItemsHost="True" Orientation="Horizontal"/>
</StackPanel>
</ControlTemplate>
</ListBox.Template>
<ListBox.ItemContainerStyle>
<Style TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListBoxItem}">
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Bottom" Margin="5,0">
<TextBlock Margin="0,20">
<Run Text="{Binding count}"/><Run Text="次"/>
</TextBlock>
<Rectangle Fill="{Binding color}" RenderTransformOrigin="0.5,1" x:Name="PART_Table" Width="32" Height="{Binding height}" HorizontalAlignment="Center" VerticalAlignment="Bottom">
<Rectangle.RenderTransform>
<ScaleTransform/>
</Rectangle.RenderTransform>
</Rectangle>
<TextBlock Text="{Binding mouth}">
<TextBlock.LayoutTransform>
<RotateTransform Angle="80"/>
</TextBlock.LayoutTransform>
</TextBlock>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger SourceName="PART_Table" Property="IsMouseOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0" Duration="0:0:0.15" From="1" To="1.1" Storyboard.TargetName="PART_Table" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"/>
<DoubleAnimation BeginTime="0" Duration="0:0:0.15" From="1" To="1.1" Storyboard.TargetName="PART_Table" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0" Duration="0:0:0.15" From="1.1" To="1" Storyboard.TargetName="PART_Table" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"/>
<DoubleAnimation BeginTime="0" Duration="0:0:0.15" From="1.1" To="1" Storyboard.TargetName="PART_Table" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleY)"/>
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
</ScrollViewer>

binding的内容根据自己的需求进行更改,ControlTemplate标签下的内容就是需要显示的数据,也就是柱,颜色啊,数据的方式以及调整。

WPF的开发我建议使用MVVM的方式进行数据绑定,我上面的例子中显示的内容很简单,是次数/月份,每个住用不同的颜色区分,高度是次数*3的像素,基本上根据自己的一个公式足够了。

绑定的类这么写:

//数据类
public class ReptClass
{
public int count { set; get; }//数量
public Brush color { set; get; }//颜色
public string mouth { set; get; }//月份
public int height { get { return count * 3; } }//高度
}

这就是基础的类,根据这个类,建立数据源绑定到前台的ListBox,就实现了我的柱状图效果。

数据源:

ObservableCollection<ReptClass> listboxSource = new ObservableCollection<ReptClass>();
public RoadDesision()
{
InitializeComponent();
listboxSource.Add(new ReptClass() { count = 16, mouth = "一月", color = Brushes.Blue });
listboxSource.Add(new ReptClass() { count = 18, mouth = "二月", color = Brushes.Silver });
listboxSource.Add(new ReptClass() { count = 24, mouth = "三月", color = Brushes.SeaGreen });
listboxSource.Add(new ReptClass() { count = 15, mouth = "四月", color = Brushes.SlateBlue });
listboxSource.Add(new ReptClass() { count = 10, mouth = "五月", color = Brushes.SeaShell });
listboxSource.Add(new ReptClass() { count = 30, mouth = "六月", color = Brushes.SandyBrown });
listboxSource.Add(new ReptClass() { count = 28, mouth = "七月", color = Brushes.SteelBlue });
listboxSource.Add(new ReptClass() { count = 29, mouth = "八月", color = Brushes.SlateGray });
}
LSRept.ItemsSource = listboxSource;

这样就好了,前台柱状图就好了,鼠标移动到柱状图中的柱上面会有一个局部的放大效果,有需要的朋友,可以自己定制一个符合自己的。如果有美工好的,可以增加一些更好的效果。

更多内容请访问:http://luacloud.com/2011/wpf-listbox-chart.html



原文地址:https://www.cnblogs.com/luacloud/p/2284405.html