WPF 控件 (十五、时间选择器)

最新推荐文章于 2024-05-23 13:34:30 发布
最新推荐文章于 2024-05-23 13:34:30 发布
阅读量3.2k 收藏 5
点赞数 3
文章标签： wpf c# java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lyrics1996/article/details/130176833
版权

一、TimePicker

WPF 没有自带的时间选择器

1.1 xaml

由三个Combox（时、分、秒）和两个TextBlock（：：）组成

<UserControl x:Class="lyrics.ui.Controls.TimePickerCustom.TimePicker"
             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:local="clr-namespace:lyrics.ui.Controls.TimePickerCustom"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="250" Background="White">
    <Grid>
        <StackPanel Orientation="Horizontal">
            <ComboBox Name="hoursCb" MinWidth="80" ItemsSource="{Binding hours}" SelectedIndex="0" VerticalContentAlignment="Center" MinHeight="50" SelectionChanged="hoursChanged"/>
            <TextBlock Text=":" VerticalAlignment="Center"/>
            <ComboBox Name="minutesCb" MinWidth="80" ItemsSource="{Binding minutes}" SelectedIndex="0" VerticalContentAlignment="Center" MinHeight="50" SelectionChanged="minutesChanged"/>
            <TextBlock Text=":" VerticalAlignment="Center"/>
            <ComboBox Name="secondsCb" MinWidth="80" ItemsSource="{Binding seconds}" SelectedIndex="0" VerticalContentAlignment="Center" MinHeight="50"  SelectionChanged="secondsChanged"/>
        </StackPanel>
    </Grid>
</UserControl>

1.2 后台

提供时间改变的事件

using System;
using System.Collections.Generic;
using System.ComponentModel;
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 lyrics.ui.Controls.TimePickerCustom
{
    /// <summary>
    /// TimePicker.xaml 的交互逻辑
    /// </summary>
    public partial class TimePicker : UserControl
    {
        public List<int> hours { get; set; } = new List<int>();
        public List<int> minutes { get; set; } = new List<int>();
        public List<int> seconds { get; set; } = new List<int>();

        public int hour { get; set; } = 0;

        public int minute { get; set; } = 0;

        public int second { get; set; } = 0;

        public TimeSpan time { get; set; }

        public static readonly RoutedEvent TimeChangedEvent = EventManager.RegisterRoutedEvent("TimeChanged", RoutingStrategy.Direct, typeof(RoutedEventHandler), typeof(TimePicker));

        public event RoutedEventHandler TimeChanged
        {
            add
            {
                AddHandler(TimeChangedEvent, value);
            }
            remove
            {
                RemoveHandler(TimeChangedEvent, value);
            }
        }
        public TimePicker()
        {
            for (int i = 0; i < 24; i++) { 
                hours.Add(i);
            }
            for (int i = 0; i < 60; i++)
            {
                minutes.Add(i);
                seconds.Add(i);
            }
            
            InitializeComponent();
            this.DataContext = this;
        }


        private void hoursChanged(object sender, SelectionChangedEventArgs e)
        {
            hour = hoursCb.SelectedIndex;
            time = new TimeSpan(hour,minute,second);
            NotifyEvent();
        }

        private void minutesChanged(object sender, SelectionChangedEventArgs e)
        {
            minute = minutesCb.SelectedIndex;
            time = new TimeSpan(hour, minute, second);
            NotifyEvent();
        }

        private void secondsChanged(object sender, SelectionChangedEventArgs e)
        {
            second = secondsCb.SelectedIndex;
            time = new TimeSpan(hour, minute, second);
            NotifyEvent();
        }

        private void NotifyEvent() {
            if (!IsLoaded) {
                return;
            }
            RoutedEventArgs routedEvent = new RoutedEventArgs();
            routedEvent.RoutedEvent = TimeChangedEvent;
            RaiseEvent(routedEvent);
        }
    }
}

二、使用

2.1 Demo

xaml只需要这一行

 <tp:TimePicker x:Name="tp" Height="50" TimeChanged="tp_TimeChanged"/>

后台事件

private void tp_TimeChanged(object sender, RoutedEventArgs e)
{
    MessageBox.Show("已经设置时间为："+tp.time.ToString());
}

2.2 效果

控件刷新被弹窗阻，需要点击弹窗才会刷新
在这里插入图片描述
在这里插入图片描述

三、修改样式

3.1 Combox样式修改

 <Style x:Key="ComboBoxReadonlyToggleButton2" TargetType="ToggleButton">
        <Setter Property="IsTabStop" Value="false" />
        <Setter Property="ClickMode" Value="Press" />
        <Setter Property="MinHeight" Value="22"></Setter>
        <Setter Property="MinWidth" Value="80"></Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Border x:Name="Background" BorderBrush="#787878"
                                BorderThickness="1"  Background="Black">
                        </Border>
                        <!--倒三角的颜色#0099ff-->
                    </Grid>

                    <ControlTemplate.Triggers>
                        <Trigger Property="IsMouseOver" Value="True">
                            <!--移入时按钮颜色 图案颜色 背景颜色 锯齿颜色-->
                            <Setter TargetName="Background" Property="Opacity" Value="0.4"></Setter>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="ComboBoxStyle3" TargetType="ComboBox">
        <Setter Property="Foreground" Value="#FFFFFFFF" />
        <Setter Property="Width" Value="50"></Setter>
        <Setter Property="Height" Value="30"></Setter>
        <Setter Property="VerticalAlignment" Value="Center"></Setter>
        <Setter Property="HorizontalContentAlignment" Value="Left"></Setter>
        <Setter Property="BorderBrush" Value="#FFFFFFFF" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="VerticalContentAlignment" Value="Center" />
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto" />
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
        <Setter Property="Padding" Value="4,3" />
        <Setter Property="FontSize" Value="18" />
        <Setter Property="ItemContainerStyle">
            <Setter.Value>
                <!--这个是下拉框的属性设置-->
                <Style TargetType="ComboBoxItem">
                    <Setter Property="Template">
                        <Setter.Value>
                            <ControlTemplate TargetType="ComboBoxItem">
                                <Border Name="Back"  Background="#525252"  BorderThickness="0,0,0,0" BorderBrush="#525252" >
                                    <ContentPresenter ContentSource="{Binding Source}"  VerticalAlignment="Center" HorizontalAlignment="Left" Margin="10,0,0,0" ></ContentPresenter>
                                </Border>
                                <ControlTemplate.Triggers>
                                    <Trigger Property="IsMouseOver" Value="True">
                                        <Setter TargetName="Back" Property="Background" Value="#484848"></Setter>
                                    </Trigger>
                                    <!--下拉框背景色-->
                                    <Trigger Property="IsHighlighted" Value="True">
                                        <Setter TargetName="Back" Property="Background" Value="Gray"></Setter>
                                    </Trigger>
                                </ControlTemplate.Triggers>
                            </ControlTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ComboBox">
                    <Grid x:Name="MainGrid">
                        <Popup x:Name="PART_Popup" Margin="1" Grid.Row="1" 
                                IsOpen="{Binding Path=IsDropDownOpen, RelativeSource={RelativeSource TemplatedParent}}">
                            <Grid x:Name="Shdw" MaxHeight="{TemplateBinding MaxDropDownHeight}"
                                    MinWidth="{Binding Path=ActualWidth, ElementName=MainGrid}" >
                                <!--下拉框的属性设置-->
                                <!--Background -->
                                <Border x:Name="Bordertop"   Width="60" CornerRadius="0" BorderThickness="0" Background="#525252">
                                    <Border.Effect>
                                        <DropShadowEffect Color="Black"  BlurRadius="2" ShadowDepth="0" Opacity="1"/>
                                    </Border.Effect>
                                    <ScrollViewer Width="150">
                                        <ItemsPresenter/>
                                    </ScrollViewer>
                                </Border>
                            </Grid>
                        </Popup>
                        <ToggleButton Style="{StaticResource ComboBoxReadonlyToggleButton2}" Opacity="0"
                                BorderThickness="3" BorderBrush="#03ffea"   Background="{TemplateBinding Background}"
                                IsChecked="{Binding Path=IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" />
                        <!--combox字体的间距-->
                        <TextBlock Margin="10 0 0 0"  
                                   FontSize="20"
                                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                IsHitTestVisible="false"
                                   Foreground="White"
                                Text="{TemplateBinding Text}"
                               />
                    </Grid>

                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

3.2 修改Xaml

<UserControl x:Class="lyrics.ui.Controls.TimePickerCustom.TimePicker"
             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:local="clr-namespace:lyrics.ui.Controls.TimePickerCustom"
             mc:Ignorable="d" 
             d:DesignHeight="50" d:DesignWidth="150" Background="Transparent">
    <Grid>
        <Border Background="Black" CornerRadius="25">
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                <ComboBox Name="hoursCb" MinWidth="40" ItemsSource="{Binding hours}" SelectedIndex="0" VerticalContentAlignment="Center" MinHeight="50" SelectionChanged="hoursChanged" Style="{StaticResource  ComboBoxStyle3}" HorizontalContentAlignment="Center"/>
                <TextBlock Text=":" VerticalAlignment="Center" FontSize="50" Foreground="White"/>
                <ComboBox Name="minutesCb" MinWidth="40" ItemsSource="{Binding minutes}" SelectedIndex="0" VerticalContentAlignment="Center" MinHeight="50" SelectionChanged="minutesChanged"
                      Style="{StaticResource  ComboBoxStyle3}" HorizontalContentAlignment="Center"/>
                <TextBlock Text=":" VerticalAlignment="Center" FontSize="50" Foreground="White"/>
                <ComboBox Name="secondsCb" MinWidth="40" ItemsSource="{Binding seconds}" SelectedIndex="0" VerticalContentAlignment="Center" MinHeight="50"  SelectionChanged="secondsChanged"
                      Style="{StaticResource  ComboBoxStyle3}" HorizontalContentAlignment="Center"/>
            </StackPanel>
        </Border>
    </Grid>
</UserControl>

3.3 修改调用

  <tp:TimePicker x:Name="tp" Height="50" Width="200" TimeChanged="tp_TimeChanged" />

3.4 效果

默认：
在这里插入图片描述

修改时间
在这里插入图片描述
选中
在这里插入图片描述

修改事件触发
在这里插入图片描述

LyRics1996
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
WPF控件（四）
m0_50175138的博客
09-26 240
1、DatePicker日期控件 （1）日期控件属性： ①SelectedDate 默认选中日期 ②DisplayDateStart 日期开始 ③DisplayDateEnd 日期结束 ④SelectedDateFormat ：选择数据格式，有 Long 长形或者 Short 短形 ⑤FirstDayOfWeek 一周开始星期定义 （2）默认显示当前日期： 条件：先在窗体头部引入命名空间：xmlns:sys=“clr-namespace:System;assembly=mscorlib”。 （3）两个日
【WPF】数据模板选择器DataTemplateSelector
weixin_56814032的博客
12-22 1840
作用：为数据模型内不同的属性值应用不同的数据模板，多用于容器 以listbox为例： <ListBox x:Name="_list" ItemsSource="{Binding Model}"/> public partial class MainWindow : Window { public List<Student> StuList { get; set; } = new List<Student>(); p
WPF自定义时间控件，可选择日期、时间
04-13
WPF自定义时间控件，可选择日期、时间
WPF DatePicker与Calendar的使用和样式修改
lvxingzhe3的博客
01-03 3185
WPF DatePicker与Calendar的使用和样式修改(可选择日期和时间)
WPF--几种常用定时器Timer汇总
最新发布
Blue
05-23 1867
WPF--几种常用定时器Timer汇总
WPF 控件 (十二、日历)
LyRics1996的博客
04-13 297
【代码】WPF 控件 (十二、日历)
【WPF应用37】WPF基本控件-DatePicker的详解与示例
qq_35320456的博客
04-06 2197
WPF基本控件-DatePicker的详解与示例
WPF学习笔记——18）日期控件
小唐要努力的博客
05-25 1678
WPF中比较常用的日期控件有Calendar和DatePicker控件。 1、Calendar控件 Calendar控件显示的是一个日历，和Windows自带的日历很相似，下面我们介绍一些常用属性。 DisplayMode：日历显示的形式，可以按月、年、十年显示。 DisplayDateStart：日历显示的起点日期，起点之前的日期都不显示。 DisplayDateEnd：日历显示的终点日期，终点之后的日期都不显示。 FirstDayOfWeek：日历显示每周的第一天。西方通常是周日，国内则习惯
浅谈WPF中的Calendar日历控件
liaohaiyin的专栏
03-30 3721
日历控件用于创建可视日历，让用户选择日期并在选择日期时触发事件。本文演示如何使用 XAML 和 C# 在 WPF 中创建和使用日历控件。 创建日历 Calendar 元素表示 XAML 中的 WPF 日历控件。 <Calendar/> Calendar 控件在 System.Windows.Controls 命名空间中定义。当您将日历控件从工具箱拖放到页面时，XAML 代码将类似于以下代码，您可以在其中看到日历 XAML 元素已添加到 Grid 元素中，并且其 Width、Hei
wpf自定义日历（仿qq）
bornonew的博客
06-28 1100
wpf提供了Calendar 控件来进行时间选择，但是有些东西不太好改，就自定义一个自己的控件。 目标是做一个类似于qq 聊天记录里面的那个日期选择控件 需要实现的基本功能 1.日期的显示 2.某些日期可选，某些不可选 3.前一个月 前一年 下一个月 下一年的切换 首先来看界面，上部分比较好些 都是一些死的东西，添加一些button和textblock即可。 下面的部分我们采用 ...
wpf支持时间日期控件
07-31
网上搜索的资源，修复了其他小bug及优化了下控制逻辑 来源：https://www.cnblogs.com/jiangyan219/articles/7284931.html
WPF日期时间控件
09-05
WPF日期时间控件，可选择日期和时间。日期时间格式自定义，用yyyy-MM-dd HH:mm:ss这样的字符串定义格式。有源代码。
WPF 自定义DateTimePicker（带时分秒选择）
07-05
WPF 自定义DateTimePicker（带时分秒选择）
WPF 时间扩展控件 显示时分秒
12-22
WPF时间扩展控件，能够显示时分秒
包含年月日时分秒的wpf 时间控件
10-21
基于Toolkit ui组件进行的style 修改，这是一个比较酷的样式效果，也可以让朋友们知道怎么修改xctk:DateTimePicker 的样式，这个 Toolkit 可以在nuget 上直接安装，我在包了也放置了Toolkit 的源代码，并修复了它的一个很小的一个bug，有需要的可以生成dll 加到项目中
WPF中的DateTimePicker控件
08-31
一个可以实现年月日时分秒的WPF控件，希望对学习WPF的朋友有所帮助！ 一个可以实现年月日时分秒的WPF控件，希望对学习WPF的朋友有所帮助！
WPF带时间的日期选择控件
10-23
2. 使用第三方库：有一些开源库如Telerik、DevExpress等提供了扩展的UI控件，其中包括带有时间选择功能的日期选择器。这些库通常提供了丰富的定制选项和良好的用户体验。 3. XAML与C#结合：开发者可能利用XAML来...
WPF颜色选择器
10-22
在这个例子中，`yourControl`是你要改变颜色的WPF控件，例如`Button`或`TextBox`。 在WPF中，颜色可以通过多种方式表示，如`RGB`、`HSV`、`ARGB`等。`RadColorPicker`控件通常会提供丰富的界面，包括调色板、滑块等...
WPF日期时间选择DateTimePicker
04-12
这个控件结合了DatePicker（日期选择器）和TimePicker（时间选择器）的功能，为用户提供了一站式的日期时间输入体验。在本篇文章中，我们将深入探讨WPF DateTimePicker的使用、功能特性以及如何自定义和优化它。 1....
wpf自定义时间选择器
06-24
### 回答1： WPF是一种强大的UI框架，它提供了许多控件，其中包括时间选择器控件。但是，由于在特定的应用程序中，需要自定义时间选择器以满足一些个性化需求。在这种情况下，可以使用WPF自定义控件来创建自己的时间选择器控件。 首先，在WPF中创建时间选择器控件，需要使用Calendar控件和TimePicker控件。Calendar控件用于显示日期，而TimePicker控件用于选择时间。时间选择器控件的主体是StackPanel控件。在StackPanel控件中添加了两个控件Calendar和TimePicker，以实现时间选择器的基本功能。 然后，需要在时间选择器控件中定义一些附加属性，例如：选定日期、选定时间等等，以实现一些高级功能。 最后，为时间选择器控件添加样式，并实现一些触发器和动画效果，以使其外观和功能与应用程序的主题相匹配。 实现WPF自定义时间选择器可能需要一些时间和经验，但对于需要一个不寻常的时间选择器的应用程序来说，是值得的。 这样的时间选择器是用户友好的，具有很好的设计和功能，并且以C＃编写，可以很容易地与WPF应用程序集成。 ### 回答2： WPF自定义时间选择器是一种功能强大、灵活性高的工具，它可以根据需求自行设计不同的选择器，可以实现小时、分钟、秒数的选择等多种功能。 首先，我们需要使用WPF自带的DatePicker控件和TimePicker控件来实现时间选择器。接下来，我们可以自定义控件的样式和模板，使其更符合我们的设计需求。 在自定义控件的样式时，我们需要设置控件的各个属性，比如控件的边框、背景、字体等。同时，我们可以通过设置样式来调整控件的布局和显示效果。 在时间选择器的实现中，需要涉及到一些比较复杂的计算，比如计算时间的差值、时间的格式转换等。我们可以使用C#中的DateTime类和TimeSpan类来实现这些功能。 最后对于自定义时间选择器的控件事件，需要自定义一些控件事件，使其更加符合我们的设计需求。比如增加或减少系统时钟里的时间。 总而言之，实现WPF自定义时间选择器需要对WPF控件、样式、模板、计算和控件事件等各个方面有深入的了解。只有掌握了这些知识，才能够设计出优秀的时间选择器，满足用户的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值