Uwp CalendarDatePicker 日期控件【透明样式】

最新推荐文章于 2023-07-11 19:42:48 发布
最新推荐文章于 2023-07-11 19:42:48 发布
阅读量780 收藏
点赞数
分类专栏： Uwp 文章标签： uwp CalendarDatePicker
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33538554/article/details/86481095
版权

效果截图：

页面Page：

<CalendarDatePicker  Style="{StaticResource CalendarDatePickerStyle1}"/>

资源字典CalendarDatePickerStyle1：

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

    <Style x:Key="CalendarDatePickerStyle1" TargetType="CalendarDatePicker">
        <Setter Property="Foreground" Value="{ThemeResource CalendarDatePickerForeground}"/>
        <Setter Property="Background" Value="{ThemeResource CalendarDatePickerBackground}"/>
        <Setter Property="BorderBrush" Value="{ThemeResource CalendarDatePickerBorderBrush}"/>
        <Setter Property="BorderThickness" Value="{ThemeResource CalendarDatePickerBorderThemeThickness}"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Center"/>
        <Setter Property="UseSystemFocusVisuals" Value="{ThemeResource IsApplicationFocusVisualKindReveal}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="CalendarDatePicker">
                    <Grid x:Name="Root">
                        <FlyoutBase.AttachedFlyout>
                            <Flyout Placement="Bottom">
                                <Flyout.FlyoutPresenterStyle>
                                    <Style TargetType="FlyoutPresenter">
                                        <Setter Property="Padding" Value="0"/>
                                        <Setter Property="BorderThickness" Value="0"/>
                                        <Setter Property="Template">
                                            <Setter.Value>
                                                <ControlTemplate TargetType="FlyoutPresenter">
                                                    <ContentPresenter BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                                        <ContentPresenter.Background>
                                                            <SolidColorBrush Opacity="0.2" Color="Black"></SolidColorBrush>
                                                        </ContentPresenter.Background>
                                                    </ContentPresenter>
                                                </ControlTemplate>
                                            </Setter.Value>
                                        </Setter>
                                    </Style>
                                </Flyout.FlyoutPresenterStyle>

                                <CalendarView Foreground="#2775B6"  BlackoutForeground="#2775B6" CalendarItemForeground="#2775B6" PressedBorderBrush="#2177B8"
                                              x:Name="CalendarView"  CalendarIdentifier="{TemplateBinding CalendarIdentifier}" DisplayMode="{TemplateBinding DisplayMode}" DayOfWeekFormat="{TemplateBinding DayOfWeekFormat}" FirstDayOfWeek="{TemplateBinding FirstDayOfWeek}" IsTodayHighlighted="{TemplateBinding IsTodayHighlighted}" IsOutOfScopeEnabled="{TemplateBinding IsOutOfScopeEnabled}" IsGroupLabelVisible="{TemplateBinding IsGroupLabelVisible}" MinDate="{TemplateBinding MinDate}" MaxDate="{TemplateBinding MaxDate}" Style="{TemplateBinding CalendarViewStyle}">
                                    <CalendarView.Background>
                                        <SolidColorBrush Opacity="0.2" Color="Black"></SolidColorBrush>
                                    </CalendarView.Background>
                                    <CalendarView.BorderBrush>
                                        <SolidColorBrush Opacity="0.2" Color="Black"></SolidColorBrush>
                                    </CalendarView.BorderBrush>
                                    <CalendarView.TodayForeground>
                                        <AcrylicBrush  TintColor="#D8E3E7"/>
                                    </CalendarView.TodayForeground>
                                    <CalendarView.OutOfScopeBackground>
                                        <SolidColorBrush Opacity="0.4" Color="#144A74"></SolidColorBrush>
                                    </CalendarView.OutOfScopeBackground>
                                    <CalendarView.OutOfScopeForeground>
                                        <SolidColorBrush Color="#93B5CF"></SolidColorBrush>
                                    </CalendarView.OutOfScopeForeground>
                                </CalendarView>
                                
                            </Flyout>
                        </FlyoutBase.AttachedFlyout>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="32"/>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="32"/>
                        </Grid.RowDefinitions>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#1661AB"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#1661AB"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="BorderBrush">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#1661AB"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentPresenter" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerHeaderForegroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#4E7CA1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CalendarGlyph" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CalendarDatePickerCalendarGlyphForegroundDisabled}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="PointerFocused"/>
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Background" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="black"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="DateText" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="#4E7CA1"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Margin="{ThemeResource ComboBoxHeaderThemeMargin}" TextWrapping="Wrap" Visibility="Collapsed" x:DeferLoadStrategy="Lazy"/>
                        <Border x:Name="Background"  BorderThickness="1" BorderBrush="#1661AB" Grid.ColumnSpan="2" Control.IsTemplateFocusTarget="True" Grid.Row="1">
                            <Border.Background>
                                <SolidColorBrush Color="Black" Opacity="0.4"></SolidColorBrush>
                            </Border.Background>
                        </Border>
                        <TextBlock x:Name="DateText" Foreground="#66A9C9" FontSize="15" HorizontalAlignment="Left" Padding="12, 0, 0, 2" Grid.Row="1" Text="{TemplateBinding PlaceholderText}" VerticalAlignment="Center"/>
                        <FontIcon x:Name="CalendarGlyph" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="#1661AB" FontSize="16" Glyph="&#xE787;" HorizontalAlignment="Center" Grid.Row="1" VerticalAlignment="Center"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ResourceDictionary>
 

段旭文
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
DatePicker calendar 日历时间控件
07-11
完整的demo，可以下拉选择日期，时间
使用日历选择器DatepicKer和时间选择器TimepicKer
kyoulijian的博客
12-30 892
一：两组监听器 两组实现日期的方式 监听器OnDateChangedListener和OnTimeChangedListener()对应的事件OnDateChanged和OnTimeChanged 监听器OnDateSetListener和OnTimeSetListener()对应的事件OnDateSet和OnTimeSet 二：使用DatePicker实现日历选择器 D
UWP CalendarDatePicker日期选择控件样式修改（控件大小，字体，图案）
zhh95的博客
01-03 853
由于屏幕显示分辨率比较低，不得不更改CalendarDatePicker控件下拉日期选择框的大小，总结下相关的调整。 选中CalendarDatePicker控件，右键选择编辑模板 --&gt;编辑副本生成相应的模板。这个模板可修改选择日期在上面显示的日期的大小。代码如下： &lt;/Flyout.FlyoutPresente...
Flutter之日期选择器 calendar_date_picker2
最新发布
weixin_43244083的博客
07-11 3085
此小部件仅包含日历 UI，并且每当用户点击不同的日期时就会发出事件。(用户可以选择的最早允许的 DateTime)(提供对日历中可以选择的日期的完全控制的功能)(用于在控件中集中年份和月份文本标签的标志)(一周的第一天，0表示周日，6表示周六)(提供对日历日文本样式的完全控制的功能)(所选范围内包含的日期的突出显示颜色)(日历模式切换控件的自定义文本样式)(日历模式切换控件的自定义文本样式。(选定日历日文本的自定义文本样式）(选定范围日历日的自定义文本样式)(模式选择器按钮图标的自定义图标)
安卓日历Calendar和DatePicker日期选择器的使用
weixin_51022898的博客
10-11 1017
一、Calendar的使用 Calendar 该控件可以获得日期和时间，可以获取当前的，也可以根据当前日期加减年月日时分秒。 比如想做一个类似这样的东西，只使用Calendar 就够了。 1:获取年、月、日、周、时、分、秒 private Calendar calendar; //定义一个全局的 private int year; //年 private int month; //月 private int day; //日
UWP-master:UWP自定义控件
04-27
5. **样式和资源**：通过使用样式和资源，可以实现控件样式的复用和集中管理。自定义控件时，可以创建专用的样式，以便在整个应用中保持一致的设计。 6. **布局系统**：理解UWP的布局系统对于创建自定义控件至关...
UWP:一些控件和通用代码
03-27
lindexi.uwp.Framework lindexi.MVVM.Framework lindexi.wpf.Framework Lindexi.Src.GitCommand Lindexi.Src.GitCommand.Source 简体中文 常用代码和控件 控件 软件 参见： 安装 最重要的博客RSS订阅服务 代码...
TabbedPivot:UWP自定义Pivot控件，带有类似标签的标头
05-02
#TabbedPivot TabbedPivot基于XAML的原始枢轴控件。 它为PivotItem.Header对象提供了可自定义的视图，可以编辑两个String属性以显示文本或字形图标。 < PivotItem>< PivotHeader xss=removed xss=removed>...
android 中win10 使用uwp控件实现进度条Marquez效果
08-30
Android 中使用 UWP 控件实现进度条 Marquez 效果 本文主要介绍了在 Android 中使用 UWP 控件实现进度条 Marquez 效果的方法。进度条控件是游戏开发中常用的控件之一，能够显示游戏的进度，提高用户的游戏体验。 ...
UwpProjects:一组UWP控件和实用程序
05-04
Uwp项目 我已经构建并用作Windows开发人员的一组UWP控件和实用程序。 我将继续从我的爸爸妈妈和傻瓜学院中补充这一点，并以此为基础来建立新的老师。 ＃＃内容UwpHelpers.Controls.ListControls中的在按列宽缩放时...
DateControl.zip日期控件——Calendar、DatePicker日历控件案例
11-29
DateControl.zip日期控件——Calendar、DatePicker日历控件案例
时钟插件（透明显示支持微秒）
10-11
自己制作的一个时钟插件，可显示到微秒，如果需要定制外表可滴滴联系
[UWP开发]UWP CalendarDatePicker控件介绍————(2020.3.3学习笔记）
qq_37704442的博客
03-03 371
CalendarDatePicker控件是一个能让用户从显示的日历里中选择日期的控件。基础的效果如下图 要实现这个基础效果很简单，往页面xaml里声明一个CalendarDatePicker就可以了（代码如下） <CalendarDatePicker Width="200" Height="50"></CalendarDatePicker> 实现完基础效果之后，再来看...
UWP--简单日程制作
liuyh73的博客
03-31 1038
工具：Visual Studio 2017、Blend语言：XAML，C#日程应用的要求如下：实现自适应UI，即应用样式跟随屏幕宽度改变而改变；实现日程创建，删除与查看功能。说明：在这个日程的制作中，具体的xaml和c#语法不再赘述，不了解的地方可以自行百度。如图，先来看看最终样式：(说明：左侧页面标题为MyLists，右侧页面为Details；日程名称为ListItem)1. 完整视图：（wid...
android md日期选择器,DateTimePicker02
weixin_29503445的博客
05-31 367
本节引言今天主要是DatePicker(日期选择器)、TimePicker(时间选择器) CalendarView(日历) DatePickerDilaog(日期选择Dialog) TimePickerDialog(时间选择Dialog),在4.x和5.x是显示不同的，4.x:Mode默认是spinner,5.x:Mode默认是Calendar。DatePicker效果图4.x5.x 代码priv...
win10 uwp 修改CalendarDatePicker图标颜色
lindexi
01-05 2445
CalendarDatePicker 是一个好用的东西，但是我发现想要修改他右边的那个图标，显示日历的图标颜色，没有这个选项。
【转】WPF自定义控件与样式(5)-Calendar/DatePicker日期控件自定义样式及扩展
weixin_34315665的博客
12-19 810
一．前言 　　申明：WPF自定义控件与样式是一个系列文章，前后是有些关联的，但大多是按照由简到繁的顺序逐步发布的等。 本文主要内容： 日历控件Calendar自定义样式； 日期控件DatePicker自定义样式，及Label标签、水印、清除日期功能扩展； 二．Calendar自定义样式 先看看效果： 从上面图可以看出，日历的显示其实有三种状态，如下面的分解图： "日"部分的显示； "月"部...
dateCalendar/WdatePicker 选择多个日期
m0_38003198的博客
01-06 4388
页面代码： {$attendance_day['attendance_day']} js: $(document).ready(function(){ var date_string = $("#yyTime").val(); var array_date = date_string.split(';'); selectDays = []; $.each(array_
潘鹏整理WPF(10)日历控件Calendar&&DatePicker
Eden's space
09-22 7757
Calendar DisplayMode=”Month”，然后选择某个月份后就依然如上图 如第一张图中是9月但是显示了8月的30和31号，DisplayDateStart=”2015-9”可以去掉 如第一张图中是9月但是显示了10月1-10号，DisplayDateEnd=”2015-9-30”可以去掉 西方人日历显示的第一列不是周日，FirstDayOfWeek=”Monday
如何通过文件区分WinUI控件，UWP控件，WPF控件和Silverlight控件
06-13
WinUI 控件、UWP 控件、WPF 控件和 Silverlight 控件在语法和结构上有所不同，因此可以通过检查 XAML 代码的命名空间来区分它们。以下是一些常见的命名空间和控件： - WinUI 控件：命名空间为 `http://schemas.microsoft.com/winui/2021/xaml/behaviors` 或 `http://schemas.microsoft.com/winui/2021/xaml/presentation`，控件名称以 `Microsoft.UI` 开头。 - UWP 控件：命名空间为 `http://schemas.microsoft.com/winfx/2006/xaml/presentation` 或 `http://schemas.microsoft.com/winfx/2008/xaml/presentation`，控件名称以 `Windows.UI` 开头。 - WPF 控件：命名空间为 `http://schemas.microsoft.com/winfx/2006/xaml/presentation` 或 `http://schemas.microsoft.com/netfx/2007/xaml/presentation`，控件名称以 `System.Windows` 或 `Microsoft.Windows` 开头。 - Silverlight 控件：命名空间为 `http://schemas.microsoft.com/winfx/2006/xaml/presentation` 或 `http://schemas.microsoft.com/client/2007`，控件名称以 `System.Windows.Controls` 或 `Microsoft.Windows.Controls` 开头。 可以通过读取 XAML 文件中的命名空间来确定使用的控件类型。例如，以下代码片段演示了如何读取 XAML 文件中的命名空间： ```csharp using System.Xml.Linq; // Load XAML file into an XDocument XDocument xdoc = XDocument.Load("MyXamlFile.xaml"); // Get the root element of the XAML file XElement root = xdoc.Root; // Get the default namespace of the XAML file XNamespace ns = root.GetDefaultNamespace(); // Check the namespace to determine the type of controls used in the XAML file if (ns.NamespaceName.StartsWith("http://schemas.microsoft.com/winui")) { // WinUI controls } else if (ns.NamespaceName.StartsWith("http://schemas.microsoft.com/winfx")) { // UWP or WPF controls } else if (ns.NamespaceName.StartsWith("http://schemas.microsoft.com/client")) { // Silverlight controls } else { // Unknown namespace } ``` 请注意，这只是一种简单的方法来区分不同类型的控件，实际上还需要考虑一些其他因素，例如控件的属性和行为。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值