WPF實現Element UI風格的日期時間選擇器

来源:https://www.cnblogs.com/czwy/archive/2023/08/21/17641458.html
-Advertisement-
Play Games

# .NET Evolve資料庫版本管理工具 ## 1.簡介 提到資料庫版本管理,`Java`領域開發首先會想到大名鼎鼎的`flyway`。但是它不適用`.NET`領域,那麼`.NET`領域也需要做資料庫版本管理,該用什麼工具?自行造輪子?`.NET`領域的解決方案就是`Evolve`,這是一個開源 ...


背景

業務開發過程中遇到一個日期範圍選擇的需求,和Element UI的DateTimePicker組件比較類似,由兩個日曆控制項組成,聯動選擇起始時間和結束時間。

問題

WPF中提供了一個DatePicker的控制項,主要由DatePickerTextBoxButton和一個Calendar組成,其中Calendar是後臺代碼動態添加的,因此不能直接通過自定義DatePicker的控制項模板實現需求。這裡通過實現自定義DateTimePicker控制項來滿足需求。

技術要點與實現

由於Calendar結構比較複雜,本文通過控制項組合的方式簡單實現自定義DateTimePicker。先來看下實現效果。

首先創建一個名為DateTimePicker的UserControl,添加依賴屬性HoverStartHoverEnd用於控制日曆中的開始日期和結束日期,添加依賴屬性DateTimeRangeStartDateTimeRangeEnd用於設置外部設置/獲取起始時間和結束時間。

然後在XAML中添加兩個WatermarkTextBox用於輸入起始時間和結束時間(增加校驗規則驗證時間的合法性,這裡不再詳細說明如何寫校驗規則,具體可參考ValidationRule實現參數綁定)。接著添加一個Popup(預設關閉),併在其中添加兩個Calendar用於篩選日期,以及四個ComboBox用於篩選小時和分鐘。當WatermarkTextBox捕獲到滑鼠時觸發Popup打開。

<Grid>
    <Border Height="30" Width="320" BorderBrush="#c4c4c4" BorderThickness="1" CornerRadius="2">
        <StackPanel x:Name="datetimeSelected" Orientation="Horizontal" Height="30">
            <local:WatermarkTextBox x:Name="DateStartWTextBox" Style="{StaticResource DateWatermarkTextBoxStyle}" GotMouseCapture="WatermarkTextBox_GotMouseCapture">
                <local:WatermarkTextBox.Resources>
                    <helper:BindingProxy x:Key="dateRangeCeiling" Data="{Binding Text,ElementName=DateEndWTextBox}"/>
                </local:WatermarkTextBox.Resources>
                <local:WatermarkTextBox.Text>
                    <Binding Path="DateTimeRangeStart" ElementName="self" StringFormat="{}{0:yyyy-MM-dd HH:mm}" UpdateSourceTrigger="PropertyChanged">
                        <Binding.ValidationRules>
                            <helper:DateTimeValidationRule Type="Range">
                                <helper:ValidationParams Param1="{x:Static System:DateTime.Today}" Param2="{Binding Data,Source={StaticResource dateRangeCeiling}}"/>
                            </helper:DateTimeValidationRule>
                        </Binding.ValidationRules>
                    </Binding>
                </local:WatermarkTextBox.Text>
            </local:WatermarkTextBox>
            <TextBlock Text="~"/>
            <local:WatermarkTextBox x:Name="DateEndWTextBox" Style="{StaticResource DateWatermarkTextBoxStyle}" GotMouseCapture="WatermarkTextBox_GotMouseCapture">
                <local:WatermarkTextBox.Resources>
                    <helper:BindingProxy x:Key="dateRangeFloor" Data="{Binding Text,ElementName=DateStartWTextBox}"/>
                </local:WatermarkTextBox.Resources>
                <local:WatermarkTextBox.Text>
                    <Binding Path="DateTimeRangeEnd" ElementName="self" StringFormat="{}{0:yyyy-MM-dd HH:mm}" UpdateSourceTrigger="PropertyChanged">
                        <Binding.ValidationRules>
                            <helper:DateTimeValidationRule Type="Floor">
                                <helper:ValidationParams Param1="{Binding Data,Source={StaticResource dateRangeFloor}}"/>
                            </helper:DateTimeValidationRule>
                        </Binding.ValidationRules>
                    </Binding>
                </local:WatermarkTextBox.Text>
            </local:WatermarkTextBox>
            <local:ImageButton Width="18" Height="18" Click="ImageButton_Click"
                HoverImage="/LBD_CLP_WPFControl;component/Images/calendar_hover.png"
                NormalImage="/LBD_CLP_WPFControl;component/Images/calendar.png" />
        </StackPanel>
    </Border>
    <Popup x:Name="DatetimePopup" AllowsTransparency="True" StaysOpen="False" Placement="Top" VerticalOffset="-10" HorizontalOffset="-300" PlacementTarget="{Binding ElementName=datetimeSelected}" PopupAnimation="Slide">
        <Grid Background="White" Margin="3">
            <Grid.Effect>
                <DropShadowEffect Color="Gray"  BlurRadius="16"  ShadowDepth="3" Opacity="0.2" Direction="0" />
            </Grid.Effect>
            <Grid.RowDefinitions>
                <RowDefinition Height="*"/>
                <RowDefinition Height="42"/>
                <RowDefinition Height="42"/>
            </Grid.RowDefinitions>
            <StackPanel Orientation="Horizontal">
                <Calendar x:Name="startCalendar" DockPanel.Dock="Left"
                            Style="{DynamicResource CalendarStyle}" SelectionMode="SingleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged"/>
                <Line Y1="0" Y2="{Binding ActualHeight ,ElementName=startCalendar}" Stroke="#e4e4e4"/>
                <Calendar x:Name="endCalendar" DockPanel.Dock="Right"
                            Style="{DynamicResource CalendarStyle}" SelectionMode="SingleRange" SelectedDatesChanged="Calendar_SelectedDatesChanged" DisplayDate="{Binding DisplayDate,ElementName=startCalendar,Converter={StaticResource DateTimeAddtionConverter},ConverterParameter=1}"/>
            </StackPanel>
            <Border Grid.Row="1" BorderThickness="0 0 0 1" BorderBrush="#e4e4e4">
                <StackPanel Orientation="Horizontal" TextElement.Foreground="#999999" TextElement.FontSize="14">
                    <TextBlock Text="開始時間:" Margin="15 0 7 0"/>
                    <ComboBox x:Name="startHours" Width="64" ItemStringFormat="{}{0:D2}" SelectionChanged="startHours_SelectionChanged"/>
                    <TextBlock Text=":" Margin="5 0 5 0"/>
                    <ComboBox x:Name="startMins" ItemStringFormat="{}{0:D2}" Width="64"/>
                    <TextBlock Text="截止時間:" Margin="40 0 7 0"/>
                    <ComboBox x:Name="endHours" ItemStringFormat="{}{0:D2}" Width="64"/>
                    <TextBlock Text=":" Margin="5 0 5 0"/>
                    <ComboBox x:Name="endMins" ItemStringFormat="{}{0:D2}" Width="64"/>
                </StackPanel>
            </Border>
            <StackPanel Grid.Row="2" Orientation="Horizontal" HorizontalAlignment="Right" Margin="0 0 11 0">
                <local:ImageButton x:Name="clearBtn" Style="{StaticResource ImageLinkButton}" Content="清空" FontSize="14" Foreground="#0099ff"
                                    Click="clearBtn_Click"
                                    NormalImage="{x:Null}"
                                    HoverImage="{x:Null}"
                                    DownImage="{x:Null}"
                                    />
                <Button x:Name="yesBtn" Content="確定" Width="56" Height="28" Margin="12 0 0 0" Click="yesBtn_Click">
                    <Button.Style>
                        <Style TargetType="{x:Type Button}" BasedOn="{StaticResource BaseButtonStyle}">
                            <Setter Property="BorderThickness" Value="1"/>
                            <Setter Property="BorderBrush" Value="#dcdfe6"/>
                            <Setter Property="Foreground" Value="#333333"/>
                            <Setter Property="OverridesDefaultStyle" Value="True"/>
                            <Setter Property="Template">
                                <Setter.Value>
                                    <ControlTemplate TargetType="{x:Type Button}">
                                        <Border x:Name="border" Background="Transparent" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3" ClipToBounds="True">
                                            <ContentPresenter 
                                            RecognizesAccessKey="True"
                                            Margin="{TemplateBinding Padding}"
                                            SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
                                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                                        </Border>
                                        <ControlTemplate.Triggers>
                                            <MultiTrigger>
                                                <MultiTrigger.Conditions>
                                                    <Condition Property="IsPressed" Value="false"/>
                                                    <Condition Property="IsMouseOver" Value="true"/>
                                                </MultiTrigger.Conditions>
                                                <Setter Property="BorderBrush" Value="#409eff"/>
                                                <Setter Property="Foreground" Value="#409eff"/>
                                            </MultiTrigger>
                                        </ControlTemplate.Triggers>
                                    </ControlTemplate>
                                </Setter.Value>
                            </Setter>
                        </Style>
                    </Button.Style>
                </Button>
            </StackPanel>
        </Grid>
    </Popup>
</Grid>

緊接著就是修改Calendar的樣式了。通常情況下,自定義控制項模板只需要在Visual Studio的設計視窗或者Blend中選中控制項,然後右鍵菜單中編輯模板即可。可能由於Calendar中的部分元素(CalendarButtonCalendarDayButton)是後臺代碼生成,這個方法編輯Calendar模板副本生成的CalendarStyle不包含完整的可視化樹結構,無法對樣式進一步修改。幸運的是微軟官方文檔公開了控制項的預設樣式和模板,在此基礎上進行修改即可。通過官方文檔可以發現Calendar完整的可視化樹中包含了四個類型控制項CalendarCalendarItemCalendarButtonCalendarDayButton。其中CalendarDayButton對應的就是日曆中具體的“天”,管理著具體的“天”的狀態,比如選中狀態、不可選狀態等,這也是我們主要修改的地方,接下來看下CalendarDayButton的樣式。(其他幾個元素的樣式和模板參照官方文檔修改即可)

<Style x:Key="CalendarDayButtonStyle" TargetType="{x:Type CalendarDayButton}">
    <Setter Property="MinWidth" Value="5" />
    <Setter Property="MinHeight" Value="5" />
    <Setter Property="Width" Value="42"/>
    <Setter Property="Height" Value="42"/>
    <Setter Property="FontSize" Value="12" />
    <Setter Property="HorizontalContentAlignment" Value="Center" />
    <Setter Property="VerticalContentAlignment" Value="Center" />
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type CalendarDayButton}">
                <Grid Height="26" MouseUp="Grid_MouseUp">
                    <Border x:Name="SelectedBackground" Background="#f2f6fc" Visibility="Collapsed">
                        <Border.CornerRadius>
                            <MultiBinding Converter="{StaticResource SelectedDatesConverter}">
                                <Binding/>
                                <Binding Path="HoverStart" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
                                <Binding Path="HoverEnd" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
                            </MultiBinding>
                        </Border.CornerRadius>
                    </Border>
                    <Grid Width="22" Height="22">
                        <Rectangle x:Name="StartStopBackground" Fill="#409eff" RadiusX="11" RadiusY="11" >
                            <Rectangle.Visibility>
                                <MultiBinding Converter="{StaticResource SelectedDatesConverter}">
                                    <Binding/>
                                    <Binding Path="HoverStart" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
                                    <Binding Path="HoverEnd" RelativeSource="{RelativeSource AncestorType={x:Type local:DateTimePicker}}"/>
                                    <Binding Path="IsInactive" RelativeSource="{RelativeSource AncestorType={x:Type CalendarDayButton}}"/>
                                </MultiBinding>
                            </Rectangle.Visibility>
                        </Rectangle>
                        <Border
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}" />
                        <Rectangle
                        x:Name="HighlightBackground"
                        Grid.ColumnSpan="2"
                        Fill="#FFBADDE9"
                        Opacity="0"
                        RadiusX="11"
                        RadiusY="11" />
                        <ContentPresenter
                        x:Name="NormalText"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        TextElement.Foreground="#FF333333" />
                        <Path
                        x:Name="Blackout"
                        Grid.ColumnSpan="2"
                        Margin="3"
                        HorizontalAlignment="Stretch"
                        VerticalAlignment="Stretch"
                        Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"
                        Fill="#FF000000"
                        Opacity="0"
                        RenderTransformOrigin="0.5,0.5"
                        Stretch="Fill" />
                        <Rectangle
                        x:Name="DayButtonFocusVisual"
                        Grid.ColumnSpan="2"
                        IsHitTestVisible="false"
                        RadiusX="11"
                        RadiusY="1"
                        Stroke="#FF45D6FA"
                        Visibility="Collapsed" />
                    </Grid>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsInactive" Value="True">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="SelectedBackground"/>
                        <Setter Property="TextElement.Foreground" Value="#c0c4cc" TargetName="NormalText"/>
                    </Trigger>
                    <Trigger Property="IsBlackedOut" Value="true">
                        <Setter Property="Visibility" Value="Collapsed" TargetName="SelectedBackground"/>
                        <Setter Property="TextElement.Foreground" Value="#c0c4cc" TargetName="NormalText"/>
                    </Trigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsInactive" Value="false"/>
                            <Condition Property="IsSelected" Value="true"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter Property="Visibility" Value="Visible" TargetName="SelectedBackground"/>
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsInactive" Value="false"/>
                            <Condition Property="IsBlackedOut" Value="false"/>
                            <Condition Property="IsMouseOver" Value="true"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter Property="Opacity" Value="0.5" TargetName="HighlightBackground"/>
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsInactive" Value="false"/>
                            <Condition Property="IsToday" Value="true"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter Property="TextElement.Foreground" Value="#409eff" TargetName="NormalText"/>
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                    <MultiTrigger>
                        <MultiTrigger.Conditions>
                            <Condition Property="IsInactive" Value="false"/>
                            <Condition Property="Visibility" Value="Visible" SourceName="StartStopBackground"/>
                        </MultiTrigger.Conditions>
                        <MultiTrigger.Setters>
                            <Setter Property="TextElement.Foreground" Value="#ffffff" TargetName="NormalText"/>
                        </MultiTrigger.Setters>
                    </MultiTrigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

樣式中用到一個MultiBinding綁定CalendarDayButton以及前邊提到的兩個依賴屬性:HoverStartHoverEnd,然後通過MultiValueConverter轉換器比較CalendarDayButton是否處於選中的日期範圍,根據不同的狀態設置其背景色和字體顏色。

最後就是在後臺代碼中根據日曆的SelectedDatesChanged事件設置HoverStartHoverEnd的值,以此來控制DateTimePicker中選中日期的樣式。

總結

本文分享了一種簡單實現自定義DateTimePicker控制項的方式,同時也介紹了另外一種查看原生控制項預設樣式和模板的方法:查看微軟官方文檔。這種方法雖然不如在Visual Studio的設計視窗或者Blend中編輯模板副本方便,但提供了完整的結構、每個元素的組成部分以及可視化狀態,方便開發人員清晰的瞭解控制項全貌,可以應對修改複雜的原生控制項樣式和模板的需求。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本教程將演示用Python開發一個簡單的數字猜測游戲的過程。 ### 競猜游戲的機制 我們正試圖開發一個游戲,從用戶那裡獲取上限和下限,在這個範圍內生成一個隨機數,要求用戶猜測這個數字,並計算用戶用了多少條線索才猜對了。這個游戲將只基於CLI。 ### 使用Python中的random 模塊的數字猜 ...
  • 如果物理實體有很多,那每個實體都要判斷和其他實體是否發生碰撞。有沒有比較簡便的方法呢,可以使用二進位與位掩碼,設置實體的類別,然後用位掩碼計算來得到兩者是否發生碰撞的結果。另外LOVE還提供了一個組別的功能,可以直接跳過計算結果,強制兩者發生碰撞和強制不發生碰撞 ...
  • ### 1、% - 運算符 %表示取模運算,也就是取餘數。 例如 6 % 4 = 2 ### 2、% - 引導符/占位符 引導符用於控制輸入輸出的格式。常見於printf("%d",a);scanf("%d",&a);語句。 1) %s - 字元串 (String) 2) %c - 字元 (Char ...
  • 我們希望將這些rpc結果數據緩存起來,併在一定時間後自動刪除,以實現在一定時間後獲取到最新數據。類似Redis的過期時間。本文是我的調研步驟和開發過程。 ...
  • 根節點枚舉的過程要做到高效並非一件容易的事情,現在Java應用越做越龐大,如果你是JVM的開發者,你會怎麼去做? ...
  • `gosec` 是一個用於在 Go 代碼中查找安全問題的開源工具,它可以幫助發現可能的漏洞和潛在的安全風險。以下是關於 `gosec` 的詳細介紹: ## 1. 工具概述: `gosec` 是一個靜態分析工具,用於掃描 Go 代碼以查找潛在的安全問題。它可以識別常見的代碼漏洞、敏感信息泄露和其他安全 ...
  • # What is Polymorphism 這個多態看中文確實有點費解,多態的英文是Polymorphism,它的翻譯含義是: n. 多態性 (可以看出是比較寬泛的) n. 多型現象 從翻譯也看不出啥, 我舉一個生活中的例子來引入多態: 生活中有很多常見的物體具有多態性。例如,一張紙可以用來寫字、 ...
  • # 個人博客-給文章添加上標簽 # 優化計劃 - [x] 置頂3個且可滾動或切換 - [x] 推薦改為4個,然後新增歷史文章,將推薦的載入更多放入歷史文章,按文章發佈時間降序排列。 - [x] 標簽功能,可以為文章貼上標簽 - [ ] 推薦點贊功能 本篇文章實現文章標簽功能 # 思路 > 首先需要新 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...