devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

wpf自定义带刻度的柱状图控件

作者：IT小白 | 2024-03-20 04:41:16

赞

踩

wpf 柱状图

效果图：

主要代码xaml:

  1. <UserControl x:Class="INSControls._01Conning.Steer.ConningSpeedBar"
  2.              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3.              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  5.              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  6.              xmlns:ec="http://schemas.microsoft.com/expression/2010/controls"
  7.              xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
  8.              mc:Ignorable="d"
  9.              d:DesignHeight="300"
  10.              d:DesignWidth="80" Focusable="False" FocusVisualStyle="{x:Null}" Loaded="UserControl_Loaded">
  11.     <Grid>
  12.         <Grid.RowDefinitions>
  13.             <RowDefinition Height="Auto" />
  14.             <RowDefinition Height="Auto" />
  15.             <RowDefinition Height="*" />
  16.             <RowDefinition Height="40" />
  17.         </Grid.RowDefinitions>
  18.         <Label HorizontalAlignment="Left"
  19.                VerticalAlignment="Center"
  20.                Content="{Binding Title, RelativeSource={RelativeSource AncestorType=UserControl}}"
  21.                Foreground="{Binding  LabelColor, RelativeSource={RelativeSource AncestorType=UserControl} }"
  22.                FontFamily="微软雅黑"></Label>
  23.         <Label HorizontalAlignment="Left"
  24.                VerticalAlignment="Center"
  25.                Margin="0,0,0,5"
  26.                Foreground="#cc8800"
  27.                FontFamily="微软雅黑"
  28.                Content="LOG2"
  29.                Grid.Row="1" />
  30.         <Border Width="80"
  31.                 HorizontalAlignment="Left"
  32.                 Grid.Row="2"
  33.                 Background="#24325f">
  34.             <Grid Margin="1,14,0,14"
  35.                   x:Name="mainGrid">
  36.                 <!--具体的值填充的柱状图形-->
  37.                 <Grid x:Name="graphicGrid"
  38.                       Height="10"
  39.                       VerticalAlignment="Top"  RenderTransformOrigin="0.5,0.5">
  40.                     <Grid.RowDefinitions>
  41.                         <RowDefinition Height="Auto" />
  42.                         <RowDefinition Height="*" />
  43.                     </Grid.RowDefinitions> 
  44.                     
  45.                          
  46.                              <Path   Data="M40,0 L80,40 L0,40 z"
  47.                               Fill="#cc0663c2" Stretch="Fill"  x:Name="path"  /> 
  48.  
  49.                     <Border Grid.Row="1"
  50.                             Background="#cc0663c2" />
  51.                     <Grid.RenderTransform>
  52.                         <RotateTransform Angle="0" x:Name="polygonRotateAngel" />
  53.                     </Grid.RenderTransform>
  54.                 </Grid>
  55.                 <!--短刻度-->
  56.                 <ec:PathListBox Background="Transparent"
  57.                                 x:Name="shortTicks"
  58.                                 ItemsSource="{Binding ShortTicks,RelativeSource={RelativeSource AncestorType=UserControl}}"
  59.                                 Focusable="False"
  60.                                 FocusVisualStyle="{x:Null}">
  61.                     <ec:PathListBox.ItemTemplate>
  62.                         <DataTemplate>
  63.                             <Rectangle Width="1"
  64.                                        Height="48"
  65.                                        Margin="0,0,0,49"
  66.                                        Fill="#b5b5b5"
  67.                                        Focusable="False"
  68.                                        FocusVisualStyle="{x:Null}" />
  69.                             <!--<Border Width="1"
  70.                                     Height="48"
  71.                                     Background="#b5b5b5"
  72.                                     UseLayoutRounding="True"
  73.                                     Margin="0,0,0,49" />-->
  74.                         </DataTemplate>
  75.                     </ec:PathListBox.ItemTemplate>
  76.                     <ec:PathListBox.LayoutPaths>
  77.                         <ec:LayoutPath  Distribution="Even"
  78.                                         Orientation="OrientToPath"
  79.                                         SourceElement="{Binding ElementName=ShortTickPath}" >
  80.  
  81.                         </ec:LayoutPath>
  82.                     </ec:PathListBox.LayoutPaths>
  83.                 </ec:PathListBox>
  84.                 <!--  长刻度  -->
  85.                 <ec:PathListBox x:Name="LongTick"  
  86.                                 IsHitTestVisible="False"
  87.                                 ItemsSource="{Binding LongTicks, RelativeSource={RelativeSource AncestorType=UserControl}}"
  88.                                 Focusable="False"
  89.                                 FocusVisualStyle="{x:Null}" >
  90.                     <ec:PathListBox.ItemTemplate>
  91.                         <DataTemplate>
  92.                             <Rectangle Width="48"
  93.                                        Height="3"
  94.                                        Margin="48,0,0,0"
  95.                                        Fill="White"
  96.                                        Focusable="False"
  97.                                        FocusVisualStyle="{x:Null}" />
  98.                             <!--<Border Width="3"
  99.                                     Height="48"
  100.                                     Background="White"
  101.                                     SnapsToDevicePixels="True"
  102.                                     UseLayoutRounding="True"
  103.                                     Margin="0,0,0,49">
  105.                             </Border>-->
  106.                         </DataTemplate>
  107.                     </ec:PathListBox.ItemTemplate>
  108.                     <ec:PathListBox.LayoutPaths>
  109.                         <ec:LayoutPath Distribution="Even"
  110.                                        Orientation="None"
  111.                                        SourceElement="{Binding ElementName=LongTickPath}" />
  112.                     </ec:PathListBox.LayoutPaths>
  113.                 </ec:PathListBox>
  114.  
  115.                 <!--  刻度上显示的数字  -->
  116.                 <ec:PathListBox IsHitTestVisible="False"
  117.                                 ItemsSource="{Binding TickMarks,RelativeSource={RelativeSource AncestorType=UserControl}}">
  118.              
  119.                     
  120.                     <ec:PathListBox.ItemTemplate>
  121.                         <DataTemplate>
  122.                             <TextBlock x:Name="tb" HorizontalAlignment="Left" Foreground="White"
  123.                                        Text="{Binding}"  RenderTransformOrigin="0,0" Margin="0,50,0,0">
  124.                                 <TextBlock.RenderTransform>
  125.                                     <RotateTransform Angle="-90"/>
  126.                                 </TextBlock.RenderTransform>
  127.                             </TextBlock>
  128.                         </DataTemplate>
  129.                     </ec:PathListBox.ItemTemplate>
  130.                     <ec:PathListBox.LayoutPaths>
  131.                         <ec:LayoutPath Distribution="Even"   
  132.                                        Orientation="OrientToPath"   
  133.                                        SourceElement="{Binding ElementName=NumberPath}" />
  134.                     </ec:PathListBox.LayoutPaths>
  135.                 </ec:PathListBox>
  136.  
  137.                 <Path   x:Name="LongTickPath"
  138.                         Data="M0,0 v1"
  139.                         VerticalAlignment="Top"
  140.                         HorizontalAlignment="Right"
  141.                         Stretch="Fill" Fill="Red" Stroke="Red" StrokeThickness="2"
  142.                         Grid.RowSpan="2"
  143.                         Margin="0,0"
  144.                         Focusable="False"
  145.                         FocusVisualStyle="{x:Null}" />
  146.                 <Path x:Name="ShortTickPath"
  147.                       Data="M0,0 V1"
  148.                       VerticalAlignment="Top"
  149.                       HorizontalAlignment="Left"
  150.                       Stretch="Fill"
  151.                       Grid.RowSpan="2"
  152.                       Margin="0,0"
  153.                       Focusable="False"
  154.                       FocusVisualStyle="{x:Null}" />
  155.  
  156.                 <Path x:Name="NumberPath"
  157.                       Data="M0,0 V1"
  158.                       Margin="45,0,0,0"
  159.                       VerticalAlignment="Top"
  160.                       HorizontalAlignment="Center"
  161.                       Stretch="Fill"
  162.                       Grid.RowSpan="2"
  163.                       Focusable="False"
  164.                       FocusVisualStyle="{x:Null}"  Stroke="Yellow" StrokeThickness="1"/>
  165.  
  166.             </Grid>
  167.         </Border>
  168.  
  169.         <StackPanel Grid.Row="3"
  170.                     Orientation="Horizontal">
  171.             <TextBox Width="90"
  172.                      Height="35"
  173.                      IsReadOnly="True"
  174.                      Foreground="{Binding TextboxColor,RelativeSource={RelativeSource AncestorType=UserControl}}"
  175.                      VerticalAlignment="Center"
  176.                      Text="{ Binding CurrentValue, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=Control}}" />
  177.             <Label VerticalAlignment="Center"
  178.                    Content="km"
  179.                    Foreground="{Binding LabelColor, RelativeSource={RelativeSource AncestorType=UserControl}}"></Label>
  180.         </StackPanel>
  181.  
  182.     </Grid>
  183. </UserControl>

　　.cs文件：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Text;
  5. using System.Windows;
  6. using System.Windows.Controls;
  7. using System.Windows.Data;
  8. using System.Windows.Documents;
  9. using System.Windows.Input;
  10. using System.Windows.Media;
  11. using System.Windows.Media.Imaging;
  12. using System.Windows.Navigation;
  13. using System.Windows.Shapes;
  14.  
  15. namespace INSControls._01Conning.Steer
  16. {
  17.     /// <summary>
  18.     /// ConningSpeedBar.xaml 的交互逻辑
  19.     /// </summary>
  20.     public partial class ConningSpeedBar : UserControl
  21.     {
  22.         public ConningSpeedBar()
  23.         {
  24.             InitializeComponent();
  25.         }
  26.  
  27.         public List<string> TickMarks
  28.         {
  29.             get { return (List<string>)GetValue(TickMarksProperty); }
  30.             set { SetValue(TickMarksProperty, value); }
  31.         }
  32.  
  33.         // Using a DependencyProperty as the backing store for TickMarks.  This enables animation, styling, binding, etc...
  34.         public static readonly DependencyProperty TickMarksProperty =
  35.             DependencyProperty.Register("TickMarks", typeof(List<string>), typeof(ConningSpeedBar), new PropertyMetadata(null));
  36.  
  37.  
  38.  
  39.  
  40.         public List<object> LongTicks
  41.         {
  42.             get { return (List<object>)GetValue(LongTicksProperty); }
  43.             set { SetValue(LongTicksProperty, value); }
  44.         }
  45.  
  46.         // Using a DependencyProperty as the backing store for LongTicks.  This enables animation, styling, binding, etc...
  47.         public static readonly DependencyProperty LongTicksProperty =
  48.             DependencyProperty.Register("LongTicks", typeof(List<object>), typeof(ConningSpeedBar), new PropertyMetadata(null));
  49.  
  50.  
  51.  
  52.         public List<object> ShortTicks
  53.         {
  54.             get { return (List<object>)GetValue(ShortTicksProperty); }
  55.             set { SetValue(ShortTicksProperty, value); }
  56.         }
  57.  
  58.         // Using a DependencyProperty as the backing store for ShortTicks.  This enables animation, styling, binding, etc...
  59.         public static readonly DependencyProperty ShortTicksProperty =
  60.             DependencyProperty.Register("ShortTicks", typeof(List<object>), typeof(ConningSpeedBar), new PropertyMetadata(null));
  61.  
  62.  
  63.  
  64.  
  65.         public double CurrentValue
  66.         {
  67.             get { return (double)GetValue(CurrentValueProperty); }
  68.             set { SetValue(CurrentValueProperty, value); }
  69.         }
  70.  
  71.         // Using a DependencyProperty as the backing store for CurrentValue.  This enables animation, styling, binding, etc...
  72.         public static readonly DependencyProperty CurrentValueProperty =
  73.             DependencyProperty.Register("CurrentValue", typeof(double), typeof(ConningSpeedBar), new PropertyMetadata(0.0, CurrentValueChangeCallback));
  74.  
  75.         private static void CurrentValueChangeCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
  76.         {
  77.             ConningSpeedBar c = d as ConningSpeedBar;
  78.             UpdateUICurrentvalue((double)e.NewValue, c);
  79.         }
  80.  
  81.         private static void UpdateUICurrentvalue(double currentValue, ConningSpeedBar c)
  82.         {
  83.             if (c.mainGrid.ActualHeight==0)
  84.             {
  85.                 return;
  86.             }
  87.             if (currentValue > 0)
  88.             {
  89.                 c.polygonRotateAngel.Angle = 0;
  90.                 double totalValue = c.MaxValue - c.MinValue;
  91.                 //计算显示图形位置
  92.                 double top = (c.MaxValue - currentValue) * c.mainGrid.ActualHeight / totalValue;
  93.                 //计算显示图形大小
  94.                 double height = currentValue * c.mainGrid.ActualHeight / totalValue;
  95.                 c.graphicGrid.Margin = new Thickness(0, top, 0, 0);
  96.                 if (height > 40)
  97.                 {
  98.                     c.graphicGrid.Height = height;
  99.                 }
  100.                 else
  101.                 {
  102.                     c.graphicGrid.Height = c.path.Height = height;
  103.                 }
  104.  
  105.             }
  106.             else
  107.             {
  108.                 c.polygonRotateAngel.Angle = 180;
  109.                 double totalValue = c.MaxValue - c.MinValue;
  110.                 //计算显示图形位置
  111.                 double top = (c.MaxValue) * c.mainGrid.ActualHeight / totalValue;
  112.                 //计算显示图形大小
  113.                 double height = -currentValue * c.mainGrid.ActualHeight / totalValue;
  114.                 c.graphicGrid.Margin = new Thickness(0, top, 0, 0);
  115.                 if (height > 40)
  116.                 {
  117.                     c.graphicGrid.Height = height;
  118.                 }
  119.                 else
  120.                 {
  121.                     c.graphicGrid.Height = c.path.Height = height;
  122.                 }
  123.             }
  124.  
  125.         }
  126.  
  127.         public SolidColorBrush LabelColor
  128.         {
  129.             get { return (SolidColorBrush)GetValue(LabelColorProperty); }
  130.             set { SetValue(LabelColorProperty, value); }
  131.         }
  132.  
  133.         // Using a DependencyProperty as the backing store for LabelColor.  This enables animation, styling, binding, etc...
  134.         public static readonly DependencyProperty LabelColorProperty =
  135.             DependencyProperty.Register("LabelColor", typeof(SolidColorBrush), typeof(ConningSpeedBar), new PropertyMetadata(Brushes.Black));
  136.  
  137.  
  138.  
  139.         public SolidColorBrush TextboxColor
  140.         {
  141.             get { return (SolidColorBrush)GetValue(TextboxColorProperty); }
  142.             set { SetValue(TextboxColorProperty, value); }
  143.         }
  144.  
  145.         // Using a DependencyProperty as the backing store for TextboxColor.  This enables animation, styling, binding, etc...
  146.         public static readonly DependencyProperty TextboxColorProperty =
  147.             DependencyProperty.Register("TextboxColor", typeof(SolidColorBrush), typeof(ConningSpeedBar), new PropertyMetadata(new SolidColorBrush(Color.FromRgb(214, 214, 214))));
  148.  
  149.  
  150.  
  151.  
  152.         public string Title
  153.         {
  154.             get { return (string)GetValue(TitleProperty); }
  155.             set { SetValue(TitleProperty, value); }
  156.         }
  157.  
  158.         // Using a DependencyProperty as the backing store for Title.  This enables animation, styling, binding, etc...
  159.         public static readonly DependencyProperty TitleProperty =
  160.             DependencyProperty.Register("Title", typeof(string), typeof(ConningSpeedBar), new PropertyMetadata(""));
  161.  
  162.  
  163.  
  164.  
  165.         public double MaxValue
  166.         {
  167.             get { return (double)GetValue(MaxValueProperty); }
  168.             set { SetValue(MaxValueProperty, value); }
  169.         }
  170.  
  171.         // Using a DependencyProperty as the backing store for MaxValue.  This enables animation, styling, binding, etc...
  172.         public static readonly DependencyProperty MaxValueProperty =
  173.             DependencyProperty.Register("MaxValue", typeof(double), typeof(ConningSpeedBar), new PropertyMetadata(30d));
  174.  
  175.  
  176.  
  177.  
  178.         public double MinValue
  179.         {
  180.             get { return (double)GetValue(MinValueProperty); }
  181.             set { SetValue(MinValueProperty, value); }
  182.         }
  183.  
  184.         // Using a DependencyProperty as the backing store for MinValue.  This enables animation, styling, binding, etc...
  185.         public static readonly DependencyProperty MinValueProperty =
  186.             DependencyProperty.Register("MinValue", typeof(double), typeof(ConningSpeedBar), new PropertyMetadata(-10d));
  187.  
  188.         private void UserControl_Loaded(object sender, RoutedEventArgs e)
  189.         {
  190.             //短刻度
  191.             List<object> shortticks = new List<object>();
  192.             for (int i = 0; i < 50; i++)
  193.             {
  194.                 shortticks.Add(new object());
  195.             }
  196.             ShortTicks = shortticks;
  197.             //显示刻度文字
  198.             List<string> numbers = new List<string>();
  199.             //长刻度
  200.             List<object> longticks = new List<object>();
  201.             for (int i = 0; i < 5; i++)
  202.             {
  203.                 //计算长度信息，等比例地减去间隔值
  204.                 string tickInfo = (MaxValue - i * (MaxValue - MinValue) / 4).ToString();
  205.                 numbers.Add(tickInfo+new string('&',i+1));
  206.                 longticks.Add(new object());
  207.             }
  208.             LongTicks = longticks;
  209.             TickMarks = numbers;
  210.            UpdateUICurrentvalue(CurrentValue, this) ;
  211.         }
  212.          
  213.     }
  214. }

　　源码地址：

https://files.cnblogs.com/files/chlm/%E5%88%BB%E5%BA%A6%E7%BA%BF.rar

 

转载于:https://www.cnblogs.com/chlm/p/9451536.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/270775
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号