WPF 自定义控件完成库容表盘显示效果

这篇具有很好参考价值的文章主要介绍了WPF 自定义控件完成库容表盘显示效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先看一下显示效果:

WPF 自定义控件完成库容表盘显示效果,wpf

       需要注意的地方有以下几点:

  1. 表盘的刻度分部,长刻度和短刻度显示。
  2. 在数值80W时,需要更改刻度盘的颜色渐变。
  3. 在数值80W时,更改库容总数背景的显示,也是颜色渐变。刻度盘控件属性定义:

刻度盘的定义:

using Microsoft.Expression.Shapes;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Dashboard_Demo
{
    /// <summary>
    /// 刻度盘控件
    /// </summary>
    /// <remarks>add by zhidanfeng 2017.2.19</remarks>
    [TemplatePart(Name = "PART_IncreaseCircle", Type = typeof(Arc))]
    public class Dashboard : Control
    {
        private Arc PART_IncreaseCircle;
        /// <summary>
        /// 保存角度变化前的角度值(用于动画)
        /// </summary>
        private double OldAngle;

        #region Constructors
        static Dashboard()
        {
            DefaultStyleKeyProperty.OverrideMetadata(typeof(Dashboard), new FrameworkPropertyMetadata(typeof(Dashboard)));
        }
        #endregion

        #region 依赖属性

        #region Angle 刻度盘起始角度
        /// <summary>
        /// 刻度盘起始角度依赖属性
        /// </summary>
        public static readonly DependencyProperty StartAngleProperty =
            DependencyProperty.Register(
                "StartAngle",
                typeof(double),
                typeof(Dashboard),
                new PropertyMetadata(0d));

        /// <summary>
        /// 刻度盘起始角度
        /// </summary>
        public double StartAngle
        {
            get { return (double)GetValue(StartAngleProperty); }
            set { SetValue(StartAngleProperty, value); }
        }
        #endregion

        #region Angle 刻度盘结束角度依赖属性
        /// <summary>
        /// 刻度盘结束角度依赖属性
        /// </summary>
        public static readonly DependencyProperty EndAngleProperty =
            DependencyProperty.Register(
                "EndAngle",
                typeof(double),
                typeof(Dashboard),
                new PropertyMetadata(0d));

        /// <summary>
        /// 刻度盘结束角度依赖属性
        /// </summary>
        public double EndAngle
        {
            get { return (double)GetValue(EndAngleProperty); }
            set
            {
                SetValue(EndAngleProperty, value);
            }
        }
        #endregion

        #region Minimum 最小值
        /// <summary>
        /// 最小值依赖属性,用于Binding
        /// </summary>
        public static readonly DependencyProperty MinimumProperty =
            DependencyProperty.Register(
                "Minimum",
                typeof(double),
                typeof(Dashboard),
                new PropertyMetadata(0.0));

        /// <summary>
        /// 获取或设置最小值.
        /// </summary>
        /// <value>最小值.</value>
        public double Minimum
        {
            get { return (double)GetValue(MinimumProperty); }
            set { SetValue(MinimumProperty, value); }
        }
        #endregion

        #region Maximum 最大值
        /// <summary>
        /// 最大值依赖属性,用于Binding
        /// </summary>
        public static readonly DependencyProperty MaximumProperty =
            DependencyProperty.Register(
                "Maximum",
                typeof(double),
                typeof(Dashboard),
                new PropertyMetadata(100.0));

        /// <summary>
        /// 获取或设置最大值.
        /// </summary>
        /// <value>最大值.</value>
        public double Maximum
        {
            get { return (double)GetValue(MaximumProperty); }
            set { SetValue(MaximumProperty, value); }
        }
        #endregion

        #region Value 当前值
        /// <summary>
        /// 最大值依赖属性,用于Binding
        /// </summary>
        public static readonly DependencyProperty ValueProperty =
            DependencyProperty.Register(
                "Value",
                typeof(double),
                typeof(Dashboard),
                new PropertyMetadata(0.0, new PropertyChangedCallback(OnValuePropertyChanged)));

        /// <summary>
        /// 获取或设置当前值
        /// </summary>
        public double Value
        {
            get
            {
                if (PART_IncreaseCircle == null)
                    return (double)GetValue(ValueProperty);

                if ((double)GetValue(ValueProperty) > 800000d)
                {
                    LinearGradientBrush brush = new LinearGradientBrush();
                    brush.StartPoint = new Point(0, 0);
                    brush.EndPoint = new Point(1, 0);
                    brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#f0b046"), 0));
                    brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#e83a2d"), 1));
                    PART_IncreaseCircle.Stroke = brush;
                }
                else
                {
                    LinearGradientBrush brush = new LinearGradientBrush();
                    brush.StartPoint = new Point(0, 0);
                    brush.EndPoint = new Point(1, 0);
                    brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#1ccabd"), 0));
                    brush.GradientStops.Add(new GradientStop((Color)ColorConverter.ConvertFromString("#458ffc"), 1));
                    PART_IncreaseCircle.Stroke = brush;
                }
                return (double)GetValue(ValueProperty);

            }
            set { SetValue(ValueProperty, value); }
        }

        private static void OnValuePropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
        {
            Dashboard dashboard = d as Dashboard;
            dashboard.OldAngle = dashboard.Angle;
            dashboard.SetAngle();
            dashboard.TransformAngle();
        }
        #endregion

        #region LongTickCount 长刻度个数
        public static readonly DependencyProperty LongTickCountProperty =
            DependencyProperty.Register(
                "LongTickCount",
                typeof(int),
                typeof(Dashboard),
                new PropertyMetadata(5));

        /// <summary>
        /// 获取或设置长刻度个数,用于设置刻度盘显示几个长刻度
        /// </summary>
        public int LongTickCount
        {
            get { return (int)GetValue(LongTickCountProperty); }
            set { SetValue(LongTickCountProperty, value); }
        }
        #endregion

        #region ShortTickCount 短刻度个数
        public static readonly DependencyProperty ShortTickCountProperty =
            DependencyProperty.Register(
                "ShortTickCount",
                typeof(int),
                typeof(Dashboard),
                new PropertyMetadata(3));

        /// <summary>
        /// 获取或设置两个长刻度之间的短刻度的个数
        /// </summary>
        public int ShortTickCount
        {
            get { return (int)GetValue(ShortTickCountProperty); }
            set { SetValue(ShortTickCountProperty, value); }
        }
        #endregion

        #region TickDurtion 刻度改变时的动画显示时长
        public static readonly DependencyProperty TickDurtionProperty = DependencyProperty.Register("TickDurtion"
            , typeof(Duration)
            , typeof(Dashboard),
            new PropertyMetadata(new Duration(TimeSpan.FromMilliseconds(400))));

        /// <summary>
        /// 刻度改变时的动画显示时长
        /// </summary>
        public Duration TickDurtion
        {
            get { return (Duration)GetValue(TickDurtionProperty); }
            set { SetValue(TickDurtionProperty, value); }
        }
        #endregion

        #region ShortTicksBrush 短刻度颜色
        public static readonly DependencyProperty ShortTicksBrushProperty = DependencyProperty.Register("ShortTicksBrush"
            , typeof(Brush)
            , typeof(Dashboard));

        /// <summary>
        /// 短刻度颜色
        /// </summary>
        public Brush ShortTicksBrush
        {
            get { return (Brush)GetValue(ShortTicksBrushProperty); }
            set { SetValue(ShortTicksBrushProperty, value); }
        }
        #endregion

        #region LongTicksBrush 长刻度颜色
        public static readonly DependencyProperty LongTicksBrushProperty = DependencyProperty.Register("LongTicksBrush"
            , typeof(Brush)
            , typeof(Dashboard));

        /// <summary>
        /// 长刻度颜色
        /// </summary>
        public Brush LongTicksBrush
        {
            get { return (Brush)GetValue(LongTicksBrushProperty); }
            set { SetValue(LongTicksBrushProperty, value); }
        }
        #endregion

        #region Content
        public object Content
        {
            get { return (object)GetValue(ContentProperty); }
            set { SetValue(ContentProperty, value); }
        }

        public static readonly DependencyProperty ContentProperty =
            DependencyProperty.Register("Content", typeof(object), typeof(Dashboard));
        #endregion

        #region ContentTemplate
        public DataTemplate ContentTemplate
        {
            get { return (DataTemplate)GetValue(ContentTemplateProperty); }
            set { SetValue(ContentTemplateProperty, value); }
        }

        public static readonly DependencyProperty ContentTemplateProperty =
            DependencyProperty.Register("ContentTemplate", typeof(DataTemplate), typeof(Dashboard));
        #endregion

        #endregion

        #region Private依赖属性

        #region Angle 刻度盘当前值所对应的角度
        /// <summary>
        /// 刻度盘当前值所对应的角度依赖属性
        /// </summary>
        public static readonly DependencyProperty AngleProperty =
            DependencyProperty.Register(
                "Angle",
                typeof(double),
                typeof(Dashboard),
                new PropertyMetadata(0d));

        /// <summary>
        /// 刻度盘当前值所对应的角度
        /// </summary>
        public double Angle
        {
            get { return (double)GetValue(AngleProperty); }
            private set { SetValue(AngleProperty, value); }
        }
        #endregion

        #region ShortTicks 短刻度线集合
        /// <summary>
        /// 短刻度线依赖属性,用于Binding
        /// </summary>
        public static readonly DependencyProperty ShortTicksProperty =
            DependencyProperty.Register(
                "ShortTicks",
                typeof(IList<object>),
                typeof(Dashboard),
                new PropertyMetadata(null));

        /// <summary>
        /// 获取或设置短刻度线,用于绑定PathListBox的ItemsSource
        /// </summary>
        /// <value>短刻度线.</value>
        public IList<object> ShortTicks
        {
            get { return (IList<object>)GetValue(ShortTicksProperty); }
            private set { SetValue(ShortTicksProperty, value); }
        }
        #endregion

        #region LongTicks 长刻度线集合
        /// <summary>
        /// 长刻度线依赖属性,用于Binding
        /// </summary>
        public static readonly DependencyProperty LongTicksProperty =
            DependencyProperty.Register(
                "LongTicks",
                typeof(IList<object>),
                typeof(Dashboard),
                new PropertyMetadata(null));

        /// <summary>
        /// 获取或设置长刻度线,用于绑定PathListBox的ItemsSource
        /// </summary>
        /// <value>长刻度线.</value>
        public IList<object> LongTicks
        {
            get { return (IList<object>)GetValue(LongTicksProperty); }
            private set { SetValue(LongTicksProperty, value); }
        }
        #endregion

        #region LongTicks 长刻度线上显示的数字
        /// <summary>
        /// 长刻度线依赖属性,用于Binding
        /// </summary>
        public static readonly DependencyProperty NumberListProperty =
            DependencyProperty.Register(
                "NumberList",
                typeof(IList<object>),
                typeof(Dashboard),
                new PropertyMetadata(null));

        /// <summary>
        /// 获取或设置长刻度线,用于绑定PathListBox的ItemsSource
        /// </summary>
        /// <value>长刻度线.</value>
        public IList<object> NumberList
        {
            get { return (IList<object>)GetValue(NumberListProperty); }
            private set { SetValue(NumberListProperty, value); }
        }
        #endregion

        #endregion

        #region 重载
        public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            this.PART_IncreaseCircle = GetTemplateChild("PART_IncreaseCircle") as Arc;

            this.SetTicks();
            this.SetAngle();
            this.TransformAngle();
        }
        #endregion

        #region Private方法
        /// <summary>
        /// 设置刻度线
        /// </summary>
        private void SetTicks()
        {
            List<object> numbers = new List<object>();
            List<object> shortticks = new List<object>();
            List<object> longticks = new List<object>();

            for (int i = 0; i < this.LongTickCount; i++)
            {
                numbers.Add(Math.Round(this.Minimum + (this.Maximum - this.Minimum) / (this.LongTickCount - 1) * i));
                longticks.Add(new object());
            }

            for (int i = 0; i < (this.LongTickCount - 1) * (this.ShortTickCount + 1) + 1; i++)
            {
                shortticks.Add(new object());
            }

            this.ShortTicks = shortticks;
            this.LongTicks = longticks;
            this.NumberList = numbers;
        }

        /// <summary>
        /// 根据当前值设置圆弧的EndAngle
        /// </summary>
        private void SetAngle()
        {
            if (this.Value < this.Minimum)
            {
                this.Angle = this.StartAngle;
                return;
            }

            if (this.Value > this.Maximum)
            {
                this.Angle = this.EndAngle;
                return;
            }

            var diff = this.Maximum - this.Minimum;
            var valueDiff = this.Value - this.Minimum;
            this.Angle = this.StartAngle + (this.EndAngle - this.StartAngle) / diff * valueDiff;
        }

        /// <summary>
        /// 角度值变化动画
        /// </summary>
        private void TransformAngle()
        {
            if (this.PART_IncreaseCircle != null)
            {
                DoubleAnimation doubleAnimation = new DoubleAnimation(this.OldAngle, this.Angle, this.TickDurtion);
                this.PART_IncreaseCircle.BeginAnimation(Arc.EndAngleProperty, doubleAnimation);
            }
        }
        #endregion
    }
}

设置刻度盘的style:

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                    xmlns:ed="http://schemas.microsoft.com/expression/2010/drawing"
                    xmlns:ec="http://schemas.microsoft.com/expression/2010/controls" 
                    xmlns:local ="clr-namespace:Dashboard_Demo">
    <!--  流量盘  -->
    <ControlTemplate x:Key="Flow" TargetType="{x:Type local:Dashboard}">
        <Grid>
            <!--  刻度盘完整圆弧  -->
            <ed:Arc x:Name="DoubleCircle" Margin="50" ArcThickness="3" ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    SnapsToDevicePixels="True"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" Stroke="#002266" Opacity="0.16" StrokeThickness="3" UseLayoutRounding="True" />

            <!--  刻度盘当前值对应的圆弧  -->
            <ed:Arc x:Name="PART_IncreaseCircle" Margin="50" ArcThickness="3" ArcThicknessUnit="Pixel"
                    RenderTransformOrigin="0.5,0.5"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None"  StrokeThickness="3" />

            <!--  短刻度  -->
            <ec:PathListBox x:Name="ShoartTick" IsHitTestVisible="False"
                            ItemsSource="{TemplateBinding ShortTicks}">
                <ec:PathListBox.ItemTemplate>
                    <DataTemplate>
                        <Border Width="1" Height="8"
                                Background="{Binding ShortTicksBrush,
                                                     RelativeSource={RelativeSource AncestorType={x:Type local:Dashboard}}}"
                                SnapsToDevicePixels="True" UseLayoutRounding="False" />
                    </DataTemplate>
                </ec:PathListBox.ItemTemplate>
                <ec:PathListBox.LayoutPaths>
                    <ec:LayoutPath Distribution="Even" Orientation="OrientToPath"
                                   SourceElement="{Binding ElementName=ShortTickPath}" />
                </ec:PathListBox.LayoutPaths>
            </ec:PathListBox>

            <!--  长刻度  -->
            <ec:PathListBox x:Name="LongTick" IsHitTestVisible="False"
                            ItemsSource="{TemplateBinding LongTicks}">
                <ec:PathListBox.ItemTemplate>
                    <DataTemplate>
                        <Border Width="1" Height="13"
                                Background="{Binding LongTicksBrush,
                                                     RelativeSource={RelativeSource AncestorType={x:Type local:Dashboard}}}"
                                SnapsToDevicePixels="True" UseLayoutRounding="False" />
                    </DataTemplate>
                </ec:PathListBox.ItemTemplate>
                <ec:PathListBox.LayoutPaths>
                    <ec:LayoutPath Distribution="Even" Orientation="OrientToPath"
                                   SourceElement="{Binding ElementName=LongTickPath}" />
                </ec:PathListBox.LayoutPaths>
            </ec:PathListBox>

            <!--  刻度上显示的数字  -->
            <ec:PathListBox x:Name="Number" IsHitTestVisible="False"
                            ItemsSource="{TemplateBinding NumberList}">
                <ec:PathListBox.ItemTemplate>
                    <DataTemplate>
                        <TextBlock RenderTransformOrigin="0.5,0.5" Text="{Binding}">
                        </TextBlock>
                    </DataTemplate>
                </ec:PathListBox.ItemTemplate>
                <ec:PathListBox.LayoutPaths>
                    <ec:LayoutPath Distribution="Even" Orientation="OrientToPath"
                                   SourceElement="{Binding ElementName=NumberPath}" />
                </ec:PathListBox.LayoutPaths>
            </ec:PathListBox>

            <!--#region 路径-->


            <ed:Arc x:Name="ShortTickPath" Margin="30" ArcThickness="0" ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" />
            <ed:Arc x:Name="LongTickPath" Margin="25" ArcThickness="0" ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" />
            <ed:Arc x:Name="NumberPath" Margin="10" ArcThickness="0" ArcThicknessUnit="Pixel"
                    EndAngle="{TemplateBinding EndAngle}"
                    StartAngle="{TemplateBinding StartAngle}"
                    Stretch="None" />

            <!--#endregion-->

            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" />
        </Grid>
    </ControlTemplate>

    <DataTemplate x:Key="DefaultLabelPanel" x:Shared="False">
        <Border Width="70" Margin="0,0,0,20" HorizontalAlignment="Center" VerticalAlignment="Bottom"
                BorderBrush="#00A0FB" BorderThickness="1" CornerRadius="3" Padding="0,2"
                SnapsToDevicePixels="True" UseLayoutRounding="True">
            <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" FontFamily="Agency FB" Foreground="White"
                       Text="{Binding Path=Value,
                                      StringFormat={}{0:N1}KW,
                                      RelativeSource={RelativeSource Mode=FindAncestor,
                                                                     AncestorType={x:Type local:Dashboard}}}" />
        </Border>
    </DataTemplate>

    <Style TargetType="{x:Type local:Dashboard}">
        <Setter Property="StartAngle" Value="-140" />
        <Setter Property="EndAngle" Value="140" />
        <Setter Property="Foreground" Value="#929093" />
        <Setter Property="BorderBrush" Value="#746E7A" />
        <Setter Property="ShortTicksBrush" Value="#746E7A" />
        <Setter Property="LongTicksBrush" Value="#746E7A" />
        <Setter Property="Template" Value="{StaticResource Flow}" />
        <Setter Property="ContentTemplate" Value="{StaticResource DefaultLabelPanel}" />
    </Style>

    <LinearGradientBrush x:Key="LargeArcCenterBackground" StartPoint="0.0,0" EndPoint="0,1">
        <GradientStop Color="#d84a36" Offset="0"/>
        <GradientStop Color="#ec7c6c" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="LargeOutArcBackground" StartPoint="0.0,0" EndPoint="0,1">
        <GradientStop Color="#e2aaa3" Offset="0"/>
        <GradientStop Color="#e4b4ac" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="LargeBorderArcBackground" StartPoint="0.0,0" EndPoint="0,1">
        <GradientStop Color="#e3d5d3" Offset="0"/>
        <GradientStop Color="#e4d8d6" Offset="1"/>
    </LinearGradientBrush>

    <LinearGradientBrush x:Key="SmallArcCenterBackground" StartPoint="0.0,0" EndPoint="0,1">
        <GradientStop Color="#389cfa" Offset="0"/>
        <GradientStop Color="#73b8fd" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="SmallOutArcBackground" StartPoint="0.0,0" EndPoint="0,1" Opacity="0.4">
        <GradientStop Color="#389AfC" Offset="0"/>
        <GradientStop Color="#78AEFC" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="SmallBorderArcBackground" StartPoint="0.0,0" EndPoint="0,1" Opacity="0.1">
        <GradientStop Color="#389AfC" Offset="0"/>
        <GradientStop Color="#78AEFC" Offset="1"/>
    </LinearGradientBrush>
</ResourceDictionary>
  • 库容总数背景渐变实现:
  • <DataTemplate x:Key="Small">
                <Grid Margin="0,110,0,0" HorizontalAlignment="Center">
                    <Ellipse x:Name="ellipse1" Width="166" Height="166" Fill="{StaticResource SmallBorderArcBackground}" Margin="0 -43" VerticalAlignment="Top"/>
                    <Ellipse x:Name="ellipse2" Width="147" Height="147" Fill="{StaticResource SmallOutArcBackground}" Margin="0 -33" VerticalAlignment="Top"/>
                    <Ellipse x:Name="ellipse3" Width="133" Height="133" Fill="{StaticResource SmallArcCenterBackground}" Margin="0 -25" VerticalAlignment="Top"/>
                    <TextBlock Margin="0,30" HorizontalAlignment="Center" FontSize="24" Foreground="White" FontWeight="Bold"
                                               Text="{Binding Path=Value,
                                                              StringFormat={}{0:N0},
                                                              ElementName=dashboard1}" />
                </Grid>
            </DataTemplate>
    
            <DataTemplate x:Key="Large">
                <Grid Margin="0,110,0,0" HorizontalAlignment="Center">
                    <Ellipse x:Name="ellipse1" Width="166" Height="166" Fill="{StaticResource LargeBorderArcBackground}" Margin="0 -43" VerticalAlignment="Top"/>
                    <Ellipse x:Name="ellipse2" Width="147" Height="147" Fill="{StaticResource LargeOutArcBackground}" Margin="0 -33" VerticalAlignment="Top"/>
                    <Ellipse x:Name="ellipse3" Width="133" Height="133" Fill="{StaticResource LargeArcCenterBackground}" Margin="0 -25" VerticalAlignment="Top"/>
                    <TextBlock Margin="0,30" HorizontalAlignment="Center" FontSize="24" Foreground="White" FontWeight="Bold"
                                               Text="{Binding Path=Value,
                                                              StringFormat={}{0:N0},
                                                              ElementName=dashboard1}" />
                </Grid>
            </DataTemplate>

    实现效果(低于80W):

  • WPF 自定义控件完成库容表盘显示效果,wpf

    高于80W时显示:

  • WPF 自定义控件完成库容表盘显示效果,wpf

    csdn下载地址:https://download.csdn.net/download/chulijun3107/88058570

  • github:GitHub - chulijun3107/Dashboard_Demo: WPF userControl文章来源地址https://www.toymoban.com/news/detail-586136.html

到了这里,关于WPF 自定义控件完成库容表盘显示效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • WPF自定义按钮控件

    在平时的WPF应用中,系统提供的按钮控件确实可以实现正常的逻辑,但是从视觉方面看的话,确实不够美观,而且每个项目的UI设计不尽相同。那么自定义按钮控件就是必须的了,网上查找了很多自定义按钮控件的办法,但每次都是写到一半就报错。在参考了多个技术贴之后

    2024年02月08日
    浏览(44)
  • WPF自定义控件

    方式一:基于现有控件进行扩展,如基于button进行扩展,UI可直接用xmal进行编辑设计,逻辑用xaml.cs进行编辑 方法二:直接创建wpf自定义控件 本文用方法二开展自定义控件!!! 1.自定义控件的内容在代码cs文件中,自定义控件继承自Control,ui界面可在Genric.xaml中定义。 2.在

    2024年02月11日
    浏览(36)
  • WPF中用户控件和自定义控件

    无论是在WPF中还是WinForm中,都有用户控件(UserControl)和自定义控件(CustomControl),这两种控件都是对已有控件的封装,实现功能重用。但是两者还是有一些区别,本文对这两种控件进行讲解。 用户控件 注重复合控件的使用,也就是多个现有控件组成一个可复用的控件组

    2024年01月21日
    浏览(40)
  • wpf 自定义combox控件

    关键步骤 1、新建usercontrol使用基本的控件进行设计 2、依赖属性的定义,目的:外部调用时候能够使用属性进行控件样式的控制 例如 Width=\\\"200\\\" DisplayMemberPath=\\\"Name\\\" SelectedItem=\\\"{Binding SelectedItem,Mode=TwoWay}\\\" SelectionChanged=\\\"{Binding ProjectSelectCommand}\\\" CommandParameter=\\\"{Binding ElementName = Projec

    2024年02月09日
    浏览(41)
  • WPF grid控件定义行和列

    在此已经学习了wpf Grid控件, WPF布局控件Grid的基本使用 - 使用kaxaml_bcbobo21cn的博客-CSDN博客 下面继续学习; 定义3行3列的基本代码如下;为了看清效果,设置 ShowGridLines=\\\"True\\\";   减少一列,效果如下;   只有行,没有列;   指定第一列的宽度;   第一列指定宽度,剩下2列

    2024年02月13日
    浏览(48)
  • wpf自定义控件-单/双箭头线

    using System; using System.ComponentModel; using System.Windows; using System.Windows.Controls; using System.Windows.Media; using System.Windows.Shapes; namespace CustomControls { [TypeDescriptionProvider(typeof(CustomTypeDescriptionProvider))] public class CustomArrow : Shape { public CustomArrow () { Stroke= new SolidColorBrush(Color.FromRgb(0, 140, 206));

    2024年02月15日
    浏览(37)
  • wpf 为自定义控件添加滚动条

    在WPF中为自定义控件添加滚动条通常涉及将自定义控件置于 ScrollViewer 控件内,并根据需要配置ScrollViewer的属性。以下是一个基本步骤说明: 创建自定义控件 :首先,你有一个自定义控件(比如名为 RWrapPanel ,继承自 WrapPanel 并实现 IScrollInfo 接口以进行平滑滚动管理)。 嵌

    2024年02月01日
    浏览(39)
  • WPF中StatusBar控件显示状态栏信息

    在 WPF 中,StatusBar 控件是用于显示状态栏信息的控件。它通常位于窗口底部,可以包含多个 StatusBarItem,每个 StatusBarItem 可以显示不同的状态信息。 StatusBar 控件提供了以下功能: 显示多个状态栏项:你可以在 StatusBar 控件中添加多个 StatusBarItem,每个 StatusBarItem 可以显示不同

    2024年01月25日
    浏览(31)
  • WPF自定义控件库之Window窗口

    在WPF开发中,默认控件的样式常常无法满足实际的应用需求,我们通常都会采用引入第三方控件库的方式来美化UI,使得应用软件的设计风格更加统一。常用的WPF的UI控件库主要有以下几种,如: Modern UI for WPF , MaterialDesignInXamlToolkit ,PanuonUI,Newbeecoder.UI,WPF UI , AduSkin ,

    2024年02月08日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包