草庐IT

WPF日历控件

小熊吉米 2023-04-11 原文

 

从网上找到一个WPF日历控件，这个日历是按天展现的，有0点至23点时间刻度，目前只实现了日历的增加计划。

未实现的功能鼠标单击选择（可以选择多个），选择后可以进行修改，选择后可以进行删除，刷新日历后重新加载日历计划。

日历控件包含6个自定义控件，分别是CalendarTimeslotItem，CalendarLedgerItem，CalendarLedger，CalendarDay，Calendar，CalendarAppointmentItem

CalendarTimeslotItem前台代码

 1 <Style TargetType="{x:Type local:CalendarTimeslotItem}">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="{x:Type local:CalendarTimeslotItem}">
 5                     <Border Background="{TemplateBinding Background}"
 6                             BorderBrush="#A5BFE1"
 7                             BorderThickness="0,0.5,0,0.5"
 8                             x:Name="bd"
 9                             Height="22">
10                         <Border CornerRadius="4,4,4,4" BorderThickness="1,1,1,1" BorderBrush="#5D8CC9" x:Name="hover" Opacity="0" Background="#10000000">
11                             <!--<TextBlock Text="Click to add appointment" HorizontalAlignment="Center" VerticalAlignment="Center" Foreground="#A39DD8" />-->
12                         </Border>
13                     </Border>
14                     <ControlTemplate.Triggers>
15                         <Trigger Property="IsMouseOver" Value="True">
16                             <Setter Property="Opacity" Value="1" TargetName="hover" />
17                         </Trigger>
18                     </ControlTemplate.Triggers>
19                 </ControlTemplate>
20             </Setter.Value>
21         </Setter>
22     </Style>
View Code

CalendarLedgerItem前台代码

 1 <Style TargetType="{x:Type local:CalendarLedgerItem}">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="{x:Type local:CalendarLedgerItem}">
 5                     <Border Background="#E3EFFF"
 6                             BorderBrush="#6593CF"
 7                             BorderThickness="0,0,1,1"
 8                             Height="44" Width="50">
 9                         <StackPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
10                             <TextBlock Text="{TemplateBinding TimeslotA}" Foreground="#9493CF" FontSize="16" Margin="0,3,0,0"/>
11                             <TextBlock Text="{TemplateBinding TimeslotB}" Foreground="#9493CF"  Margin="1.5,0,0,0"/>
12                         </StackPanel>
13                     </Border>
14                 </ControlTemplate>
15             </Setter.Value>
16         </Setter>
17     </Style>
View Code

CalendarLedger前台代码

 1     <Style TargetType="{x:Type local:CalendarLedger}">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="{x:Type local:CalendarLedger}">
 5                     <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
 6                         <StackPanel>
 7                             <local:CalendarLedgerItem TimeslotA="0" TimeslotB="00" />
 8                             <local:CalendarLedgerItem TimeslotA="1" TimeslotB="00" />
 9                             <local:CalendarLedgerItem TimeslotA="2" TimeslotB="00" />
10                             <local:CalendarLedgerItem TimeslotA="3" TimeslotB="00" />
11                             <local:CalendarLedgerItem TimeslotA="4" TimeslotB="00" />
12                             <local:CalendarLedgerItem TimeslotA="5" TimeslotB="00" />
13                             <local:CalendarLedgerItem TimeslotA="6" TimeslotB="00" />
14                             <local:CalendarLedgerItem TimeslotA="7" TimeslotB="00" />
15                             <local:CalendarLedgerItem TimeslotA="8" TimeslotB="00" />
16                             <local:CalendarLedgerItem TimeslotA="9" TimeslotB="00" />
17                             <local:CalendarLedgerItem TimeslotA="10" TimeslotB="00" />
18                             <local:CalendarLedgerItem TimeslotA="11" TimeslotB="00" />
19                             <local:CalendarLedgerItem TimeslotA="12" TimeslotB="00" />
20                             <local:CalendarLedgerItem TimeslotA="13" TimeslotB="00" />
21                             <local:CalendarLedgerItem TimeslotA="14" TimeslotB="00" />
22                             <local:CalendarLedgerItem TimeslotA="15" TimeslotB="00" />
23                             <local:CalendarLedgerItem TimeslotA="16" TimeslotB="00" />
24                             <local:CalendarLedgerItem TimeslotA="17" TimeslotB="00" />
25                             <local:CalendarLedgerItem TimeslotA="18" TimeslotB="00" />
26                             <local:CalendarLedgerItem TimeslotA="19" TimeslotB="00" />
27                             <local:CalendarLedgerItem TimeslotA="20" TimeslotB="00" />
28                             <local:CalendarLedgerItem TimeslotA="21" TimeslotB="00" />
29                             <local:CalendarLedgerItem TimeslotA="22" TimeslotB="00" />
30                             <local:CalendarLedgerItem TimeslotA="23" TimeslotB="00" />
31                         </StackPanel>
32                     </Border>
33                 </ControlTemplate>
34             </Setter.Value>
35         </Setter>
36     </Style>
View Code

CalendarDay前台代码

 1 <Style TargetType="{x:Type local:CalendarDay}">
 2         <Setter Property="ItemsPanel">
 3             <Setter.Value>
 4                 <ItemsPanelTemplate>
 5                     <local:TimeslotPanel />
 6                 </ItemsPanelTemplate>
 7             </Setter.Value>
 8         </Setter>
 9         <Setter Property="Template">
10             <Setter.Value>
11                 <ControlTemplate TargetType="{x:Type local:CalendarDay}">
12                     <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
13                         <Grid>
14                             <StackPanel>
15                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
16                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
17                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
18                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
19                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
20                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
21                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
22                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
23                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
24                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
25                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
26                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
27                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
28                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
29                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
30                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
31                                 <local:CalendarTimeslotItem Background="White" />
32                                 <local:CalendarTimeslotItem Background="White" />
33                                 <local:CalendarTimeslotItem Background="White" />
34                                 <local:CalendarTimeslotItem Background="White" />
35                                 <local:CalendarTimeslotItem Background="White" />
36                                 <local:CalendarTimeslotItem Background="White" />
37                                 <local:CalendarTimeslotItem Background="White" />
38                                 <local:CalendarTimeslotItem Background="White" />
39                                 <local:CalendarTimeslotItem Background="White" />
40                                 <local:CalendarTimeslotItem Background="White" />
41                                 <local:CalendarTimeslotItem Background="White" />
42                                 <local:CalendarTimeslotItem Background="White" />
43                                 <local:CalendarTimeslotItem Background="White" />
44                                 <local:CalendarTimeslotItem Background="White" />
45                                 <local:CalendarTimeslotItem Background="White" />
46                                 <local:CalendarTimeslotItem Background="White" />
47                                 <local:CalendarTimeslotItem Background="White" />
48                                 <local:CalendarTimeslotItem Background="White" />
49                                 <local:CalendarTimeslotItem Background="White" />
50                                 <local:CalendarTimeslotItem Background="White" />
51                                 <local:CalendarTimeslotItem Background="White" />
52                                 <local:CalendarTimeslotItem Background="White" />
53                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
54                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
55                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
56                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
57                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
58                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
59                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
60                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
61                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
62                                 <local:CalendarTimeslotItem Background="#E6EDF7" />
63                             </StackPanel>
64                             <ItemsPresenter />
65                         </Grid>
66                     </Border>
67                 </ControlTemplate>
68             </Setter.Value>
69         </Setter>
70     </Style>
View Code

Calendar前台代码

 1 <Style TargetType="{x:Type local:Calendar}">
 2         <Setter Property="Template">
 3             <Setter.Value>
 4                 <ControlTemplate TargetType="{x:Type local:Calendar}">
 5                     <Border Background="#E3EFFF" BorderBrush="#6593CF" BorderThickness="2,2,2,2">
 6                         <Grid>
 7                             <Grid.ColumnDefinitions>
 8                                 <ColumnDefinition Width="50" />
 9                                 <ColumnDefinition Width="*" />
10                             </Grid.ColumnDefinitions>
11                             <Grid.RowDefinitions>
12                                 <RowDefinition Height="38" />
13                                 <RowDefinition Height="22" />
14                                 <RowDefinition Height="*" />
15                             </Grid.RowDefinitions>
16 
17                             <StackPanel Orientation="Horizontal" Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2" Margin="5,0,0,0">
18                                 <Button Height="25" Command="{x:Static local:Calendar.PreviousDay}" Background="{x:Null}" BorderBrush="{x:Null}">
19                                     <Image Source="/Images/Previous.png" />
20                                 </Button>
21                                 <Button Height="25" Command="{x:Static local:Calendar.NextDay}" Background="{x:Null}" BorderBrush="{x:Null}">
22                                     <Image Source="/Images/Next.png" />
23                                 </Button>
24                             </StackPanel>
25                             <Border BorderBrush="#6593CF" BorderThickness="0,0,1,1" Grid.Column="0" Grid.Row="1" />
26                             <Border BorderBrush="#6593CF" BorderThickness="0,1,0,1" Background="#30000000" Grid.Column="1" Grid.Row="1">
27                                 <TextBlock Text="{TemplateBinding CurrentDate}" HorizontalAlignment="Center" VerticalAlignment="Center" x:Name="dayHeader" />
28                             </Border>
29                             <ScrollViewer Grid.Row="2" Grid.Column="0" Grid.ColumnSpan="2">
30                                 <Grid>
31                                     <Grid.ColumnDefinitions>
32                                         <ColumnDefinition Width="50" />
33                                         <ColumnDefinition Width="*" />
34                                     </Grid.ColumnDefinitions>
35 
36                                     <local:CalendarLedger Grid.Column="0" />
37                                     <local:CalendarDay Grid.Column="1" x:Name="day" />
38                                 </Grid>
39                             </ScrollViewer>
40                         </Grid>
41                     </Border>
42                 </ControlTemplate>
43             </Setter.Value>
44         </Setter>
45     </Style>
View Code

CalendarAppointmentItem前台代码

 1 <Style TargetType="{x:Type local:CalendarAppointmentItem}">
 2         <Setter Property="AppointmentItem" Value="{Binding AppointmentItem}"/>
 3         <Setter Property="StartTime" Value="{Binding StartTime}"/>
 4         <Setter Property="EndTime" Value="{Binding EndTime}"/>
 5         <Setter Property="Template">
 6             <Setter.Value>
 7                 <ControlTemplate TargetType="{x:Type local:CalendarAppointmentItem}">
 8                     <Border CornerRadius="1,1,1,1" BorderThickness="1,1,1,1" BorderBrush="#5D8CC9" Background="#F1F5E3" Margin="1,1,1,1" Padding="3,1,0,1">
 9                         <ContentPresenter ToolTip="{Binding}" />
10                     </Border>
11                 </ControlTemplate>
12             </Setter.Value>
13         </Setter>
14     </Style>
View Code

日历控件是用WPF自定义控件做的，里面有些复杂，实在不知道如何实现上述功能，有人愿意研究可以看一下，提供源码。

链接：https://pan.baidu.com/s/15G9scu-l_uelMbTUyagilg
提取码：6666

 

WPF日历quotspancolor

有关WPF日历控件的更多相关文章

  1. Ruby 添加一个日历月 - 2

    我是ruby​​新手，对某些日期函数有疑问。我正在尝试将日历月添加到提供的日期，以便“2002年4月30日”输出“2002年5月31日”。这是我的代码date='30thApr2002'parseDate=Date.parse(date)(parseDate>>1)#Thisreturns2002-05-30也许这不是该函数应有的工作方式，在这种情况下，如果提供的日期是该月的最后一天，我将需要编写一些代码来返回下个月的最后一天？如有任何帮助，我们将不胜感激。 最佳答案 >>只是增加月份并在月份内保持同一天，正如Skeet在评论中指出

  2. ruby-on-rails - 创建日历/计划程序应用程序 - Ruby on Rails - 2

    我正在考虑使用RubyonRails开发一个应用程序，它是一种规划器。我想让用户能够查看日期列表，单击特定日期，然后添加诸如:膳食、费用、事件、待办事项和练习之类的内容。真的，我这样做是为了我和我成长中的家庭。我很好奇如何最好地实现它。我当然可以看到Meals、Expenses等需要belong_to:user但我很好奇如何实现belongs_to:day或类似的东西。使用created_at或updated_at不一定能让我提供future日期的View。我可以看到如果我创建一个天数表，然后通过时间和日期字段添加天数，这将如何工作，但要求人们创建实际天数似乎有点奇怪。或者也许我可以创

  3. ruby-on-rails - 在时间表中对无限期重复的任务进行建模(类似日历的 Rails 应用程序) - 2

    这是一个很大的绊脚石。警告:以下不是问题，而是对我的想法的解释。我的问题是——你有更好的方法吗？是否有一些我不熟悉的常用技术？看起来这是一个微不足道的问题。所以你有任务模型。您可以创建任务、完成任务、销毁任务。然后你有经常性的任务。它就像常规任务一样，但它附加了一个重复规则。但是，任务可以无限期地重复——您可以在计划中提前一年，您应该会看到任务出现。因此，当用户创建一个循环任务时，您不会想在未来百年内构建数千个任务，并将它们保存到数据库中，对吧？所以我开始思考—如何创建它们？一种方法是在您查看日程安排时创建它们。因此，当用户提前一个月移动时，将创建任何重复性任务。当然，这意味着您不能再

  4. ruby-on-rails - Ruby:使用 Gems 处理重复性日历事件的经验？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想改善这个问题吗？更新问题，以便可以通过editingthispost用事实和引文回答问题.11个月前关闭。Improvethisquestion我想为我的项目找到一个ruby​​gem，以处理符合以下要求的重复事件:可以处理“每周星期二和星期三”或“每月最后一个星期二”这样的模式可以计算下一次出现可以将模式序列化/反序列化为字符串以存储在数据库中序列化格式稳定(即升级后仍能加载)至少使用以下模式组件:时间、星期几、月份日期、月份中的第n天；可以每天、每周、每月或间隔n天、周或月重复可以用自然的英语语言表示模式可以解析英语模

  5. 可以加载mpusbapi.dll c＃.net WPF项目 - 2

    我需要构建一个GUI，以通过WindowsPC通过批量USB通信到PIC微控制器。我正在尝试使用mpusbapi.dll正如我在Internet上看到的不同教程时，我无法成功地引用项目中的DLL。vs2015向我展示了这个错误：无法添加“mpusbapi.dll”。确保该文件可访问，并且是valis组件或com组件。我进行了研究，我发现问题是未管理的DLL，所以我试图通过Dllimport参考。但是目前，这也没有起作用。我在下面分享我的代码，期望某人可以帮助我或给我一些更好的方法来实现我的目标。usingSystem.Runtime.InteropServices;namespaceGUI_R

  6. ruby - 在日历应用程序中模拟重复事件的最佳方式是什么？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭1年前。社区在1年前审查了是否重新打开这个问题，然后将其关闭:原始关闭原因未解决Improvethisquestion我正在构建一个需要支持重复事件的群组日历应用程序，但我为处理这些事件而提出的所有解决方案似乎都是一个hack。我可以限制一个人可以看多远，然后一次生成所有事件。或者我可以将事件存储为重复事件并在日历上向前看时动态显示它们，但如果有人想更改事件的特定实例的详细信息，我必须将它们转换为正常事件。我确信有更好的方法来做到这一

  7. javascript - Angular2 表单控件 valueChanges 可观察完成从未调用 - 2

    我目前正在尝试在搜索进行时在我的搜索栏上显示一个简单的加载程序。我计划在从我的表单控件观察到的valueChanges的订阅回调中将一个变量设置为值“loading”，并在完整的回调中将其设置为一个空字符串。但是，永远不会调用完整的回调。我也尝试在finally上添加一个回调，但它也从未被调用过。我的代码:searchBox:Control=newControl();loadingClass:string="";constructor(){this.searchBox.valueChanges.debounceTime(400).distinctUntilChanged().subsc

  8. javascript - __doPostBack 只有在页面上有 LinkBut​​ton、Calendar 或 WizardStep 控件时才有效 - 2

    我发现了__doPostBack的问题并找到了解决方法。我正在寻求原因的解释和/或比我的工作更好的解决方案。场景:我有一个下拉菜单，其中填充了这些值；“-选择-”、“一”和“二”。如果用户选择“一个”，则执行客户端脚本。如果用户选择“两个”，则执行服务器端脚本。问题:客户端脚本通过调用__doPostBack启动回发。但是，除非页面上还有LinkBut​​ton、Calendar或WizardStep控件，否则实际上不会发生回发。我实际上浏览了VisualStudio工具箱中的所有标准工具并测试了它们。它必须是这三个之一。解决方法:添加一个由显示设置为无的跨度包围的链接按钮。LinkB

  9. javascript - 推荐一个同时处理日期和时间的 JS 日历小部件？ - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于StackOverflow来说是偏离主题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，describetheproblem以及迄今为止为解决该问题所做的工作。关闭8年前。Improvethisquestion我正在开发一个网络应用程序，用户需要在其中输入日期和时间。我以前用过这个日历小部件，它运行良好:http://www.dynarch.com/projects/calendar/但是，自2005年以来就没有更新过。我想知道是否有人知道更

  10. c# - 我怎样才能让一个禁用的控件重新启用使用 Javascript - 2

    我已经编写了一个代码来在用户单击控件时禁用控件。在我的表单上，我有一个TextBox和一个DropDown。当用户单击TextBox时，我将禁用DropDown就像单击DropDown时一样，我将禁用TextBox效果很好。但是当用户点击Disabled控件时，我想启用该控件。意味着如果我点击被禁用的TextBox我想像dropdown一样Enable..我的示例脚本如下functiontoggleDropDownList1(){vard=document.getElementById("");if(d.disabled){d.disabled=false;}else{document

随机推荐