wpf 柱状图控件
<UserControl x:Class="wpf刻度线.TickBar" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing" xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" xmlns:local="clr-namespace:wpf刻度线" mc:Ignorable="d" d:DesignHeight="450" d:DesignWidth="800" Loaded="UserControl_Loaded"> <Grid> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> <RowDefinition Height="40" /> </Grid.RowDefinitions> <Label HorizontalAlignment="Left" VerticalAlignment="Center" Height="50" Content="{Binding Title, RelativeSource={RelativeSource AncestorType=UserControl}}" Foreground="{Binding LabelColor, RelativeSource={RelativeSource AncestorType=UserControl} }" FontFamily="微软雅黑"></Label> <Label HorizontalAlignment="Left" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="#cc8800" FontFamily="微软雅黑" Content="XXXXXXXXXXXXXXXXXXXXXX" Grid.Row="1" /> <Border Width="80" HorizontalAlignment="Left" Grid.Row="2" Background="#24325f"> <Grid Margin="1,14,0,14" x:Name="mainGrid"> <!--具体的值填充的柱状图形--> <Grid x:Name="graphicGrid" Height="10" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5"> <Grid.RowDefinitions> <RowDefinition Height="Auto" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Path Data="M40,0 L80,40 L0,40 z" Fill="#cc0663c2" Stretch="Fill" x:Name="path" /> <Border Grid.Row="1" Background="#cc0663c2" /> <Grid.RenderTransform> <RotateTransform Angle="0" x:Name="polygonRotateAngel" /> </Grid.RenderTransform> </Grid> <!--短刻度--> <ec:PathListBox Background="Transparent" x:Name="shortTicks" ItemsSource="{Binding ShortTicks,RelativeSource={RelativeSource AncestorType=UserControl}}" Focusable="False" FocusVisualStyle="{x:Null}"> <ec:PathListBox.ItemTemplate> <DataTemplate> <Rectangle Width="1" Height="48" Margin="0,0,0,49" Fill="#b5b5b5" Focusable="False" FocusVisualStyle="{x:Null}" /> <!--<Border Width="1" Height="48" Background="#b5b5b5" UseLayoutRounding="True" Margin="0,0,0,49" />--> </DataTemplate> </ec:PathListBox.ItemTemplate> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=ShortTickPath}" > </ec:LayoutPath> </ec:PathListBox.LayoutPaths> </ec:PathListBox> <!-- 长刻度 --> <ec:PathListBox x:Name="LongTick" IsHitTestVisible="False" ItemsSource="{Binding LongTicks, RelativeSource={RelativeSource AncestorType=UserControl}}" Focusable="False" FocusVisualStyle="{x:Null}" > <ec:PathListBox.ItemTemplate> <DataTemplate> <Rectangle Width="48" Height="3" Margin="48,0,0,0" Fill="White" Focusable="False" FocusVisualStyle="{x:Null}" /> <!--<Border Width="3" Height="48" Background="White" SnapsToDevicePixels="True" UseLayoutRounding="True" Margin="0,0,0,49"> </Border>--> </DataTemplate> </ec:PathListBox.ItemTemplate> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" Orientation="None" SourceElement="{Binding ElementName=LongTickPath}" /> </ec:PathListBox.LayoutPaths> </ec:PathListBox> <!-- 刻度上显示的数字 --> <ec:PathListBox IsHitTestVisible="False" ItemsSource="{Binding TickMarks,RelativeSource={RelativeSource AncestorType=UserControl}}"> <ec:PathListBox.ItemTemplate> <DataTemplate> <TextBlock x:Name="tb" HorizontalAlignment="Left" Foreground="White" Text="{Binding}" RenderTransformOrigin="0,0" Margin="0,50,0,0"> <TextBlock.RenderTransform> <RotateTransform Angle="-90"/> </TextBlock.RenderTransform> </TextBlock> </DataTemplate> </ec:PathListBox.ItemTemplate> <ec:PathListBox.LayoutPaths> <ec:LayoutPath Distribution="Even" Orientation="OrientToPath" SourceElement="{Binding ElementName=NumberPath}" /> </ec:PathListBox.LayoutPaths> </ec:PathListBox> <Path x:Name="LongTickPath" Data="M0,0 v1" VerticalAlignment="Top" HorizontalAlignment="Right" Stretch="Fill" Fill="Red" Stroke="Red" StrokeThickness="2" Grid.RowSpan="2" Margin="0,0" Focusable="False" FocusVisualStyle="{x:Null}" /> <Path x:Name="ShortTickPath" Data="M0,0 V1" VerticalAlignment="Top" HorizontalAlignment="Left" Stretch="Fill" Grid.RowSpan="2" Margin="0,0" Focusable="False" FocusVisualStyle="{x:Null}" /> <Path x:Name="NumberPath" Data="M0,0 V1" Margin="45,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Center" Stretch="Fill" Grid.RowSpan="2" Focusable="False" FocusVisualStyle="{x:Null}" Stroke="Yellow" StrokeThickness="1"/> </Grid> </Border> <StackPanel Grid.Row="3" Orientation="Horizontal"> <TextBox Width="90" Height="35" IsReadOnly="True" Foreground="{Binding TextboxColor,RelativeSource={RelativeSource AncestorType=UserControl}}" VerticalAlignment="Center" Text="{ Binding CurrentValue, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Control}}" /> <Label VerticalAlignment="Center" Content="km" Foreground="{Binding LabelColor, RelativeSource={RelativeSource AncestorType=UserControl}}"></Label> </StackPanel> </Grid> </UserControl>
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.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 wpf刻度线 { /// <summary> /// TickBar.xaml 的交互逻辑 /// </summary> public partial class TickBar : UserControl { public TickBar() { InitializeComponent(); } public List<string> TickMarks { get { return (List<string>)GetValue(TickMarksProperty); } set { SetValue(TickMarksProperty, value); } } // Using a DependencyProperty as the backing store for TickMarks. This enables animation, styling, binding, etc... public static readonly DependencyProperty TickMarksProperty = DependencyProperty.Register("TickMarks", typeof(List<string>), typeof(TickBar), new PropertyMetadata(null)); public List<object> LongTicks { get { return (List<object>)GetValue(LongTicksProperty); } set { SetValue(LongTicksProperty, value); } } // Using a DependencyProperty as the backing store for LongTicks. This enables animation, styling, binding, etc... public static readonly DependencyProperty LongTicksProperty = DependencyProperty.Register("LongTicks", typeof(List<object>), typeof(TickBar), new PropertyMetadata(null)); public List<object> ShortTicks { get { return (List<object>)GetValue(ShortTicksProperty); } set { SetValue(ShortTicksProperty, value); } } // Using a DependencyProperty as the backing store for ShortTicks. This enables animation, styling, binding, etc... public static readonly DependencyProperty ShortTicksProperty = DependencyProperty.Register("ShortTicks", typeof(List<object>), typeof(TickBar), new PropertyMetadata(null)); public double CurrentValue { get { return (double)GetValue(CurrentValueProperty); } set { SetValue(CurrentValueProperty, value); } } // Using a DependencyProperty as the backing store for CurrentValue. This enables animation, styling, binding, etc... public static readonly DependencyProperty CurrentValueProperty = DependencyProperty.Register("CurrentValue", typeof(double), typeof(TickBar), new PropertyMetadata(0.0, CurrentValueChangeCallback)); private static void CurrentValueChangeCallback(DependencyObject d, DependencyPropertyChangedEventArgs e) { TickBar c = d as TickBar; UpdateUICurrentvalue((double)e.NewValue, c); } private static void UpdateUICurrentvalue(double currentValue, TickBar c) { if (c.mainGrid.ActualHeight == 0) { return; } if (currentValue > 0) { c.polygonRotateAngel.Angle = 0; double totalValue = c.MaxValue - c.MinValue; //计算显示图形位置 double top = (c.MaxValue - currentValue) * c.mainGrid.ActualHeight / totalValue; //计算显示图形大小 double height = currentValue * c.mainGrid.ActualHeight / totalValue; c.graphicGrid.Margin = new Thickness(0, top, 0, 0); if (height > 40) { c.graphicGrid.Height = height; } else { c.graphicGrid.Height = c.path.Height = height; } } else { c.polygonRotateAngel.Angle = 180; double totalValue = c.MaxValue - c.MinValue; //计算显示图形位置 double top = (c.MaxValue) * c.mainGrid.ActualHeight / totalValue; //计算显示图形大小 double height = -currentValue * c.mainGrid.ActualHeight / totalValue; c.graphicGrid.Margin = new Thickness(0, top, 0, 0); if (height > 40) { c.graphicGrid.Height = height; } else { c.graphicGrid.Height = c.path.Height = height; } } } public SolidColorBrush LabelColor { get { return (SolidColorBrush)GetValue(LabelColorProperty); } set { SetValue(LabelColorProperty, value); } } // Using a DependencyProperty as the backing store for LabelColor. This enables animation, styling, binding, etc... public static readonly DependencyProperty LabelColorProperty = DependencyProperty.Register("LabelColor", typeof(SolidColorBrush), typeof(TickBar), new PropertyMetadata(Brushes.Black)); public SolidColorBrush TextboxColor { get { return (SolidColorBrush)GetValue(TextboxColorProperty); } set { SetValue(TextboxColorProperty, value); } } // Using a DependencyProperty as the backing store for TextboxColor. This enables animation, styling, binding, etc... public static readonly DependencyProperty TextboxColorProperty = DependencyProperty.Register("TextboxColor", typeof(SolidColorBrush), typeof(TickBar), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(214, 214, 214)))); public string Title { get { return (string)GetValue(TitleProperty); } set { SetValue(TitleProperty, value); } } // Using a DependencyProperty as the backing store for Title. This enables animation, styling, binding, etc... public static readonly DependencyProperty TitleProperty = DependencyProperty.Register("Title", typeof(string), typeof(TickBar), new PropertyMetadata("")); public double MaxValue { get { return (double)GetValue(MaxValueProperty); } set { SetValue(MaxValueProperty, value); } } // Using a DependencyProperty as the backing store for MaxValue. This enables animation, styling, binding, etc... public static readonly DependencyProperty MaxValueProperty = DependencyProperty.Register("MaxValue", typeof(double), typeof(TickBar), new PropertyMetadata(30d)); public double MinValue { get { return (double)GetValue(MinValueProperty); } set { SetValue(MinValueProperty, value); } } // Using a DependencyProperty as the backing store for MinValue. This enables animation, styling, binding, etc... public static readonly DependencyProperty MinValueProperty = DependencyProperty.Register("MinValue", typeof(double), typeof(TickBar), new PropertyMetadata(-10d)); private void UserControl_Loaded(object sender, RoutedEventArgs e) { //短刻度 List<object> shortticks = new List<object>(); for (int i = 0; i < 50; i++) { shortticks.Add(new object()); } ShortTicks = shortticks; //显示刻度文字 List<string> numbers = new List<string>(); //长刻度 List<object> longticks = new List<object>(); for (int i = 0; i < 5; i++) { //计算长度信息，等比例地减去间隔值 string tickInfo = (MaxValue - i * (MaxValue - MinValue) / 4).ToString(); numbers.Add(tickInfo + new string('&', i + 1)); longticks.Add(new object()); } LongTicks = longticks; TickMarks = numbers; UpdateUICurrentvalue(CurrentValue, this); } } }
效果图
