DatePicker.axaml 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  1. <ResourceDictionary xmlns="https://github.com/avaloniaui"
  2. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  3. xmlns:icons="clr-namespace:SukiUI.Content"
  4. xmlns:sys="using:System"
  5. xmlns:suki="https://github.com/kikipoulet/SukiUI">
  6. <Design.PreviewWith>
  7. <Border Width="1000"
  8. Height="500"
  9. Padding="20">
  10. <StackPanel VerticalAlignment="Center" Spacing="20">
  11. <DatePicker Height="60" />
  12. <DatePicker CornerRadius="10" />
  13. <DatePicker IsEnabled="False" />
  14. <DatePicker>
  15. <DataValidationErrors.Error>
  16. <sys:Exception>
  17. <x:Arguments>
  18. <x:String>Error</x:String>
  19. </x:Arguments>
  20. </sys:Exception>
  21. </DataValidationErrors.Error>
  22. </DatePicker>
  23. </StackPanel>
  24. </Border>
  25. </Design.PreviewWith>
  26. <x:Double x:Key="DatePickerFlyoutPresenterHighlightHeight">40</x:Double>
  27. <x:Double x:Key="DatePickerFlyoutPresenterItemHeight">40</x:Double>
  28. <x:Double x:Key="DatePickerFlyoutPresenterAcceptDismissHostGridHeight">41</x:Double>
  29. <x:Double x:Key="DatePickerThemeMinWidth">296</x:Double>
  30. <x:Double x:Key="DatePickerThemeMaxWidth">456</x:Double>
  31. <Thickness x:Key="DatePickerFlyoutPresenterItemPadding">0,3,0,6</Thickness>
  32. <Thickness x:Key="DatePickerFlyoutPresenterMonthPadding">9,3,0,6</Thickness>
  33. <Thickness x:Key="DatePickerHostPadding">0,3,0,6</Thickness>
  34. <Thickness x:Key="DatePickerHostMonthPadding">9,3,0,6</Thickness>
  35. <x:Double x:Key="DatePickerSpacerThemeWidth">1</x:Double>
  36. <ControlTheme x:Key="{x:Type DatePicker}" TargetType="DatePicker">
  37. <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
  38. <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundBrush}" />
  39. <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
  40. <Setter Property="BorderBrush" Value="{DynamicResource ThemeControlHighlightMidBrush}" />
  41. <Setter Property="BorderThickness" Value="1" />
  42. <Setter Property="Height" Value="38" />
  43. <Setter Property="HorizontalAlignment" Value="Left" />
  44. <Setter Property="VerticalAlignment" Value="Center" />
  45. <Setter Property="Template">
  46. <ControlTemplate>
  47. <DataValidationErrors>
  48. <Grid Name="LayoutRoot" Margin="0,0,0,0">
  49. <Button Name="PART_FlyoutButton" Margin="0"
  50. Height="{TemplateBinding Height}"
  51. Background="Transparent"
  52. BorderThickness="0,0,0,0"
  53. CornerRadius="0" Padding="0"
  54. IsEnabled="{TemplateBinding IsEnabled}"
  55. TemplatedControl.IsTemplateFocusTarget="True">
  56. <suki:GlassCard CornerRadius="{DynamicResource SmallCornerRadius}" Height="{TemplateBinding Height}"
  57. BorderThickness="{TemplateBinding BorderThickness}" Classes="Discrete" >
  58. <Grid Margin="14,0" ColumnDefinitions="Auto,Auto">
  59. <Grid Name="PART_ButtonContentGrid"
  60. Grid.Column="0"
  61. VerticalAlignment="Center"
  62. ColumnDefinitions="78*,Auto,132*,Auto,78*">
  63. <TextBlock Name="PART_DayTextBlock"
  64. Padding="0,0,0,0"
  65. HorizontalAlignment="Center"
  66. VerticalAlignment="Center"
  67. FontFamily="{TemplateBinding FontFamily}"
  68. FontSize="{TemplateBinding FontSize}"
  69. FontWeight="{TemplateBinding FontWeight}"
  70. Foreground="{DynamicResource SukiText}"
  71. Text="day" />
  72. <TextBlock Name="PART_MonthTextBlock"
  73. Padding="5,0,0,0"
  74. FontFamily="{TemplateBinding FontFamily}"
  75. FontSize="{TemplateBinding FontSize}"
  76. FontWeight="{TemplateBinding FontWeight}"
  77. Foreground="{DynamicResource SukiText}"
  78. Text="month"
  79. TextAlignment="Left" />
  80. <TextBlock Name="PART_YearTextBlock"
  81. Margin="8,0,0,0"
  82. Padding="0,0,0,0"
  83. HorizontalAlignment="Center"
  84. FontFamily="{TemplateBinding FontFamily}"
  85. FontSize="{TemplateBinding FontSize}"
  86. FontWeight="{TemplateBinding FontWeight}"
  87. Foreground="{DynamicResource SukiText}"
  88. Text="year" />
  89. <Rectangle x:Name="PART_FirstSpacer"
  90. Grid.Column="1"
  91. Width="0"
  92. HorizontalAlignment="Center"
  93. Fill="{DynamicResource DatePickerSpacerFill}" />
  94. <Rectangle x:Name="PART_SecondSpacer"
  95. Grid.Column="3"
  96. Width="0"
  97. HorizontalAlignment="Center"
  98. Fill="{DynamicResource DatePickerSpacerFill}" />
  99. </Grid>
  100. <PathIcon Grid.Column="1"
  101. Width="16"
  102. Height="16"
  103. Margin="12,0,0,0"
  104. HorizontalAlignment="Right"
  105. Data="{x:Static icons:Icons.Calendar}"
  106. Foreground="{DynamicResource SukiLowText}" />
  107. </Grid>
  108. </suki:GlassCard>
  109. </Button>
  110. <Popup Name="PART_Popup"
  111. IsLightDismissEnabled="True"
  112. PlacementMode="Bottom"
  113. PlacementTarget="{TemplateBinding}"
  114. WindowManagerAddShadowHint="False">
  115. <DatePickerPresenter Name="PART_PickerPresenter" />
  116. </Popup>
  117. </Grid>
  118. </DataValidationErrors>
  119. </ControlTemplate>
  120. </Setter>
  121. <Style Selector="^:disabled /template/ Rectangle">
  122. <Setter Property="Opacity" Value="{DynamicResource ThemeDisabledOpacity}" />
  123. </Style>
  124. <!-- Changes foreground for watermark text when SelectedDate is null -->
  125. <Style Selector="^:hasnodate /template/ Button#PART_FlyoutButton TextBlock">
  126. <Setter Property="Foreground" Value="{DynamicResource ThemeForegroundLowBrush}" />
  127. </Style>
  128. </ControlTheme>
  129. <!-- WinUI: DatePickerFlyoutPresenter -->
  130. <ControlTheme x:Key="{x:Type DatePickerPresenter}" TargetType="DatePickerPresenter">
  131. <Setter Property="Width" Value="396" />
  132. <Setter Property="MinWidth" Value="296" />
  133. <Setter Property="MaxHeight" Value="398" />
  134. <Setter Property="FontWeight" Value="Normal" />
  135. <Setter Property="FontSize" Value="{DynamicResource FontSizeNormal}" />
  136. <Setter Property="Background" Value="{DynamicResource ThemeBackgroundBrush}" />
  137. <Setter Property="Template">
  138. <ControlTemplate>
  139. <Border Name="Background"
  140. MaxWidth="350"
  141. MaxHeight="260"
  142. Margin="0,10"
  143. Padding="{DynamicResource DateTimeFlyoutBorderPadding}"
  144. BorderBrush="{DynamicResource SukiBorderBrush}"
  145. BorderThickness="2"
  146. BoxShadow="{DynamicResource SukiPopupShadow}"
  147. Classes="Card">
  148. <Grid Name="ContentRoot" RowDefinitions="*,Auto">
  149. <Grid Name="PART_PickerContainer" Margin="0,-15,0,15">
  150. <Grid.OpacityMask>
  151. <LinearGradientBrush StartPoint="48%,0%" EndPoint="50%,100%">
  152. <GradientStop Offset="0" />
  153. <GradientStop Offset="0.5" Color="Black" />
  154. <GradientStop Offset="1" />
  155. </LinearGradientBrush>
  156. </Grid.OpacityMask>
  157. <Grid.Styles>
  158. <Style Selector="ListBoxItem:selected TextBlock">
  159. <Setter Property="FontWeight" Value="Bold" />
  160. </Style>
  161. <Style Selector="DateTimePickerPanel &gt; ListBoxItem">
  162. <Setter Property="Background" Value="Transparent" />
  163. <Setter Property="Foreground" Value="{DynamicResource SukiText}" />
  164. <Setter Property="Padding" Value="4,2" />
  165. <Setter Property="Template">
  166. <ControlTemplate>
  167. <Border Margin="0,0,10,0"
  168. Padding="8,4"
  169. CornerRadius="6">
  170. <ContentPresenter Name="PART_ContentPresenter"
  171. Margin="0,0,0,0"
  172. Padding="{TemplateBinding Padding}"
  173. VerticalAlignment="Center"
  174. HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
  175. VerticalContentAlignment="Center"
  176. Background="Transparent"
  177. BorderBrush="Transparent"
  178. BorderThickness="{TemplateBinding BorderThickness}"
  179. Content="{TemplateBinding Content}"
  180. ContentTemplate="{TemplateBinding ContentTemplate}"
  181. CornerRadius="{TemplateBinding CornerRadius}" />
  182. </Border>
  183. </ControlTemplate>
  184. </Setter>
  185. </Style>
  186. </Grid.Styles>
  187. <!-- Column Definitions set in code, ignore here -->
  188. <Panel Name="PART_MonthHost">
  189. <ScrollViewer Margin="5,0"
  190. HorizontalScrollBarVisibility="Disabled"
  191. VerticalScrollBarVisibility="Hidden">
  192. <DateTimePickerPanel Name="PART_MonthSelector"
  193. ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
  194. PanelType="Month"
  195. ShouldLoop="True" />
  196. </ScrollViewer>
  197. </Panel>
  198. <Panel Name="PART_DayHost">
  199. <ScrollViewer Margin="5,0"
  200. HorizontalScrollBarVisibility="Disabled"
  201. VerticalScrollBarVisibility="Hidden">
  202. <DateTimePickerPanel Name="PART_DaySelector"
  203. ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
  204. PanelType="Day"
  205. ShouldLoop="True" />
  206. </ScrollViewer>
  207. </Panel>
  208. <Panel Name="PART_YearHost">
  209. <ScrollViewer Margin="5,0"
  210. HorizontalScrollBarVisibility="Disabled"
  211. VerticalScrollBarVisibility="Hidden">
  212. <DateTimePickerPanel Name="PART_YearSelector"
  213. ItemHeight="{DynamicResource DatePickerFlyoutPresenterItemHeight}"
  214. PanelType="Year"
  215. ShouldLoop="False" />
  216. </ScrollViewer>
  217. </Panel>
  218. <Border Grid.Column="0"
  219. Grid.ColumnSpan="5"
  220. Height="{DynamicResource DatePickerFlyoutPresenterHighlightHeight}"
  221. VerticalAlignment="Center"
  222. Background="{DynamicResource SukiPrimaryColor5}"
  223. CornerRadius="8"
  224. IsHitTestVisible="False"
  225. ZIndex="-1" />
  226. <Rectangle Name="PART_FirstSpacer"
  227. Grid.Column="1"
  228. Width="1"
  229. Margin="0,25"
  230. HorizontalAlignment="Center"
  231. Fill="Transparent" />
  232. <Rectangle Name="PART_SecondSpacer"
  233. Grid.Column="3"
  234. Width="1"
  235. Margin="0,25"
  236. HorizontalAlignment="Center"
  237. Fill="Transparent" />
  238. </Grid>
  239. <StackPanel Name="AcceptDismissGrid"
  240. Grid.Row="1"
  241. Margin="0,0,-10,-10"
  242. HorizontalAlignment="Right"
  243. VerticalAlignment="Bottom"
  244. Orientation="Horizontal">
  245. <Button Name="PART_AcceptButton"
  246. HorizontalAlignment="Right"
  247. VerticalAlignment="Bottom"
  248. Classes="Basic">
  249. <StackPanel Margin="20,0" Orientation="Horizontal">
  250. <PathIcon Width="12"
  251. Height="12"
  252. Data="{x:Static icons:Icons.Check}"
  253. Foreground="{DynamicResource SukiPrimaryColor}" />
  254. <TextBlock Margin="10,0,0,0"
  255. FontSize="16"
  256. FontWeight="{DynamicResource DefaultDemiBold}"
  257. Foreground="{DynamicResource SukiPrimaryColor}"
  258. Text="Apply" />
  259. </StackPanel>
  260. </Button>
  261. </StackPanel>
  262. </Grid>
  263. </Border>
  264. </ControlTemplate>
  265. </Setter>
  266. </ControlTheme>
  267. </ResourceDictionary>