Button.axaml 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474
  1. <ResourceDictionary
  2. xmlns="https://github.com/avaloniaui"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. xmlns:controls="clr-namespace:SukiUI.Controls"
  5. xmlns:suki="https://github.com/kikipoulet/SukiUI"
  6. xmlns:theme="clr-namespace:SukiUI.Theme">
  7. <ControlTheme x:Key="SukiButtonStyle" TargetType="Button">
  8. <Setter Property="BorderThickness" Value="1.2" />
  9. <Setter Property="BorderBrush" Value="{DynamicResource SukiMediumBorderBrush}" />
  10. <Setter Property="CornerRadius" Value="{DynamicResource SmallCornerRadius}" />
  11. <Setter Property="Background" Value="{DynamicResource SukiBackground}" />
  12. <Setter Property="VerticalContentAlignment" Value="Center" />
  13. <Setter Property="HorizontalContentAlignment" Value="Center" />
  14. <Setter Property="FontSize" Value="15" />
  15. <Setter Property="Padding" Value="20,8" />
  16. <Setter Property="Cursor" Value="Hand" />
  17. <Setter Property="Template">
  18. <ControlTemplate>
  19. <Border
  20. Name="RootBorder"
  21. Padding="{TemplateBinding Padding}"
  22. Background="{TemplateBinding Background}"
  23. BorderBrush="{TemplateBinding BorderBrush}"
  24. BorderThickness="{TemplateBinding BorderThickness}"
  25. CornerRadius="{TemplateBinding CornerRadius}"
  26. TextElement.Foreground="{TemplateBinding Foreground}">
  27. <Border.Transitions>
  28. <Transitions>
  29. <DoubleTransition Property="Opacity" Duration="0:0:0.35" />
  30. </Transitions>
  31. </Border.Transitions>
  32. <Border.Resources>
  33. <theme:BoolToWidthProgressConverter x:Key="WidthConverter" />
  34. </Border.Resources>
  35. <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Orientation="Horizontal">
  36. <Viewbox
  37. Width="{TemplateBinding theme:ButtonExtensions.ShowProgress,
  38. Converter={StaticResource WidthConverter}}"
  39. Height="24"
  40. Margin="0,-5">
  41. <Viewbox.Transitions>
  42. <Transitions>
  43. <DoubleTransition Property="Width" Duration="0:0:0.3" />
  44. </Transitions>
  45. </Viewbox.Transitions>
  46. <ContentPresenter Content="{TemplateBinding theme:ButtonExtensions.ShowProgress, Converter={x:Static suki:ProgressToContentCOnverter.Instance}}" />
  47. </Viewbox>
  48. <ContentPresenter
  49. HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
  50. VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
  51. Content="{TemplateBinding Content}"
  52. FontFamily="{TemplateBinding FontFamily}"
  53. FontSize="{TemplateBinding FontSize}"
  54. FontWeight="{DynamicResource DefaultDemiBold}"
  55. RecognizesAccessKey="True" />
  56. </StackPanel>
  57. </Border>
  58. </ControlTemplate>
  59. </Setter>
  60. <Setter Property="Transitions">
  61. <Transitions>
  62. <BrushTransition Property="Background" Duration="0:0:0.35" />
  63. <DoubleTransition Property="Opacity" Duration="0:0:0.35" />
  64. </Transitions>
  65. </Setter>
  66. <!-- Nested Selectors For Basic Button -->
  67. <Style Selector="^ /template/ TextBlock">
  68. <Setter Property="FontSize" Value="15" />
  69. <Setter Property="FontWeight" Value="{DynamicResource DefaultDemiBold}" />
  70. <Setter Property="Transitions">
  71. <Transitions>
  72. <BrushTransition Property="Foreground" Duration="0:0:0.3" />
  73. </Transitions>
  74. </Setter>
  75. </Style>
  76. <Style Selector="^ /template/ controls|Loading">
  77. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  78. </Style>
  79. <Style Selector="^ /template/ Border">
  80. <Setter Property="Transitions">
  81. <Transitions>
  82. <BrushTransition Property="BorderBrush" Duration="0:0:0.3" />
  83. <BrushTransition Property="Background" Duration="0:0:0.3" />
  84. </Transitions>
  85. </Setter>
  86. </Style>
  87. <Style Selector="^ /template/ ContentPresenter">
  88. <Setter Property="Foreground" Value="{DynamicResource SukiText}" />
  89. <Setter Property="FontSize" Value="15" />
  90. <Setter Property="Transitions">
  91. <Transitions>
  92. <BrushTransition Property="Foreground" Duration="0:0:0.3" />
  93. </Transitions>
  94. </Setter>
  95. </Style>
  96. <Style Selector="^:disabled /template/ Border#RootBorder">
  97. <Setter Property="Opacity" Value="0.5" />
  98. </Style>
  99. <!-- Events For Basic Button -->
  100. <Style Selector="^:pointerover">
  101. <Style Selector="^ /template/ TextBlock">
  102. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  103. </Style>
  104. <Style Selector="^ /template/ ContentPresenter">
  105. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  106. </Style>
  107. <Style Selector="^ /template/ Border">
  108. <Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
  109. </Style>
  110. </Style>
  111. <Style Selector="^:pressed">
  112. <Style Selector="^ /template/ TextBlock">
  113. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  114. </Style>
  115. <Style Selector="^ /template/ Border">
  116. <!-- <Setter Property="Background" Value="{DynamicResource SukiCardBackground}" /> -->
  117. <Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
  118. <Setter Property="RenderTransform">
  119. <Setter.Value>
  120. <ScaleTransform ScaleX="0.97" ScaleY="0.97" />
  121. </Setter.Value>
  122. </Setter>
  123. </Style>
  124. <Style Selector="^ /template/ ContentPresenter">
  125. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  126. </Style>
  127. </Style>
  128. <!-- Classes -->
  129. <Style Selector="^.NoPressedAnimation">
  130. <Style Selector="^:pressed">
  131. <Style Selector="^ /template/ TextBlock">
  132. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  133. </Style>
  134. <Style Selector="^ /template/ Border">
  135. <Setter Property="Background" Value="{DynamicResource SukiCardBackground}" />
  136. <Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
  137. <Setter Property="RenderTransform">
  138. <Setter.Value>
  139. <ScaleTransform ScaleX="1" ScaleY="1" />
  140. </Setter.Value>
  141. </Setter>
  142. </Style>
  143. <Style Selector="^ /template/ ContentPresenter">
  144. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  145. </Style>
  146. </Style>
  147. </Style>
  148. <!-- Classes -->
  149. <Style Selector="^.Accent">
  150. <Style Selector="^:pointerover">
  151. <Style Selector="^ /template/ TextBlock">
  152. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor75}" />
  153. </Style>
  154. <Style Selector="^ /template/ ContentPresenter">
  155. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor75}" />
  156. </Style>
  157. <Style Selector="^ /template/ Border">
  158. <Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor}" />
  159. </Style>
  160. </Style>
  161. <Style Selector="^:pressed">
  162. <Style Selector="^ /template/ TextBlock">
  163. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  164. </Style>
  165. <Style Selector="^ /template/ Border">
  166. <Setter Property="Background" Value="{DynamicResource SukiCardBackground}" />
  167. <Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor}" />
  168. <Setter Property="RenderTransform">
  169. <Setter.Value>
  170. <ScaleTransform ScaleX="0.97" ScaleY="0.97" />
  171. </Setter.Value>
  172. </Setter>
  173. </Style>
  174. <Style Selector="^ /template/ ContentPresenter">
  175. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  176. </Style>
  177. </Style>
  178. </Style>
  179. <Style Selector="^.Basic">
  180. <Setter Property="BorderThickness" Value="0" />
  181. <Setter Property="BorderBrush" Value="Transparent" />
  182. <Setter Property="Padding" Value="11,8" />
  183. <Setter Property="CornerRadius" Value="5" />
  184. <Setter Property="Background" Value="Transparent" />
  185. <!-- Nested Selectors -->
  186. <Style Selector="^ /template/ TextBlock">
  187. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  188. </Style>
  189. <Style Selector="^ /template/ controls|Loading">
  190. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  191. </Style>
  192. <Style Selector="^ /template/ Border">
  193. <Setter Property="BoxShadow" Value="0 0 0 0 Transparent" />
  194. </Style>
  195. <Style Selector="^ /template/ ContentPresenter">
  196. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  197. </Style>
  198. <!-- Events -->
  199. <Style Selector="^:pointerover">
  200. <Setter Property="Background" Value="Transparent" />
  201. <Style Selector="^ /template/ Border">
  202. <Setter Property="RenderTransform">
  203. <Setter.Value>
  204. <ScaleTransform ScaleX="1.03" ScaleY="1.03" />
  205. </Setter.Value>
  206. </Setter>
  207. </Style>
  208. </Style>
  209. <Style Selector="^:pressed /template/ Border">
  210. <Setter Property="Background" Value="Transparent" />
  211. </Style>
  212. <!-- Color Variants -->
  213. <Style Selector="^.Accent">
  214. <Style Selector="^ /template/ TextBlock">
  215. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  216. </Style>
  217. <Style Selector="^ /template/ controls|Loading">
  218. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  219. </Style>
  220. <Style Selector="^ /template/ ContentPresenter">
  221. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  222. </Style>
  223. </Style>
  224. </Style>
  225. <Style Selector="^.Void">
  226. <Setter Property="BorderThickness" Value="0" />
  227. <Setter Property="BorderBrush" Value="Transparent" />
  228. <Setter Property="Padding" Value="0" />
  229. <Setter Property="CornerRadius" Value="5" />
  230. <Setter Property="Margin" Value="0" />
  231. <Setter Property="Background" Value="Transparent" />
  232. <!-- Nested Selectors -->
  233. <Style Selector="^ /template/ Border">
  234. <Setter Property="BoxShadow" Value="0 0 0 0 Transparent" />
  235. </Style>
  236. <!-- Events -->
  237. <Style Selector="^:pointerover /template/ Border">
  238. <Setter Property="RenderTransform">
  239. <Setter.Value>
  240. <ScaleTransform ScaleX="1.03" ScaleY="1.03" />
  241. </Setter.Value>
  242. </Setter>
  243. </Style>
  244. </Style>
  245. <Style Selector="^.Flat">
  246. <Setter Property="Padding" Value="20,8,20,8" />
  247. <Setter Property="BorderThickness" Value="0" />
  248. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
  249. <Setter Property="Transitions">
  250. <Transitions>
  251. <BrushTransition Property="Background" Duration="0:0:0.2" />
  252. </Transitions>
  253. </Setter>
  254. <!-- Nested Selectors -->
  255. <Style Selector="^ /template/ TextBlock">
  256. <Setter Property="Foreground" Value="White" />
  257. </Style>
  258. <Style Selector="^ /template/ controls|Loading">
  259. <Setter Property="Foreground" Value="White" />
  260. </Style>
  261. <Style Selector="^ /template/ ContentPresenter">
  262. <Setter Property="Foreground" Value="White" />
  263. </Style>
  264. <Style Selector="^ /template/ Border">
  265. <Setter Property="BoxShadow" Value="{DynamicResource SukiLowShadow}" />
  266. </Style>
  267. <!-- Events -->
  268. <Style Selector="^:pointerover">
  269. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
  270. </Style>
  271. <Style Selector="^:pressed /template/ Border">
  272. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
  273. </Style>
  274. <!-- Color Variants -->
  275. <Style Selector="^.Accent">
  276. <Setter Property="Background" Value="{DynamicResource SukiAccentColor75}" />
  277. <Style Selector="^:pointerover">
  278. <Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
  279. </Style>
  280. <Style Selector="^:pressed /template/ Border">
  281. <Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
  282. </Style>
  283. </Style>
  284. </Style>
  285. <Style Selector="^.Outlined">
  286. <Setter Property="BorderThickness" Value="1" />
  287. <Setter Property="BorderBrush" Value="{DynamicResource SukiPrimaryColor}" />
  288. <Setter Property="Background" Value="Transparent" />
  289. <Setter Property="Transitions">
  290. <Transitions>
  291. <BrushTransition Property="Background" Duration="0:0:0.3" />
  292. <BrushTransition Property="BorderBrush" Duration="0:0:0.3" />
  293. </Transitions>
  294. </Setter>
  295. <!-- Nested Selectors -->
  296. <Style Selector="^ /template/ TextBlock">
  297. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  298. <Setter Property="Transitions">
  299. <Transitions>
  300. <BrushTransition Property="Foreground" Duration="0:0:0.3" />
  301. </Transitions>
  302. </Setter>
  303. </Style>
  304. <Style Selector="^ /template/ controls|Loading">
  305. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  306. </Style>
  307. <Style Selector="^ /template/ ContentPresenter">
  308. <Setter Property="Foreground" Value="{DynamicResource SukiPrimaryColor}" />
  309. <Setter Property="Transitions">
  310. <Transitions>
  311. <BrushTransition Property="Foreground" Duration="0:0:0.3" />
  312. </Transitions>
  313. </Setter>
  314. </Style>
  315. <!-- Events -->
  316. <Style Selector="^:pointerover">
  317. <Setter Property="BorderBrush" Value="Transparent" />
  318. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
  319. <Style Selector="^ /template/ ContentPresenter">
  320. <Setter Property="Foreground" Value="White" />
  321. </Style>
  322. <Style Selector="^ /template/ TextBlock">
  323. <Setter Property="Foreground" Value="White" />
  324. </Style>
  325. </Style>
  326. <Style Selector="^:pressed /template/ Border">
  327. <Setter Property="BorderBrush" Value="Transparent" />
  328. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor}" />
  329. </Style>
  330. <!-- Color Variants -->
  331. <Style Selector="^.Accent">
  332. <Setter Property="BorderBrush" Value="{DynamicResource SukiAccentColor}" />
  333. <Style Selector="^ /template/ TextBlock">
  334. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  335. </Style>
  336. <Style Selector="^ /template/ controls|Loading">
  337. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  338. </Style>
  339. <Style Selector="^ /template/ ContentPresenter">
  340. <Setter Property="Foreground" Value="{DynamicResource SukiAccentColor}" />
  341. </Style>
  342. <Style Selector="^:pointerover">
  343. <Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
  344. <Style Selector="^ /template/ ContentPresenter">
  345. <Setter Property="Foreground" Value="White" />
  346. </Style>
  347. <Style Selector="^ /template/ TextBlock">
  348. <Setter Property="Foreground" Value="White" />
  349. </Style>
  350. </Style>
  351. <Style Selector="^:pressed /template/ Border">
  352. <Setter Property="Background" Value="{DynamicResource SukiAccentColor}" />
  353. </Style>
  354. </Style>
  355. </Style>
  356. <Style Selector="^.Success">
  357. <Setter Property="Background" Value="#cdf2ca" />
  358. <Setter Property="BorderBrush" Value="#b2e1ae" />
  359. <Style Selector="^ /template/ TextBlock">
  360. <Setter Property="Foreground" Value="#13831c" />
  361. </Style>
  362. <Style Selector="^:pointerover /template/ Border">
  363. <Setter Property="Background" Value="#d7f5db" />
  364. </Style>
  365. <Style Selector="^:pressed /template/ Border">
  366. <Setter Property="Background" Value="#d7f5db" />
  367. </Style>
  368. </Style>
  369. <Style Selector="^.Danger">
  370. <Setter Property="Background" Value="#f2caca" />
  371. <Setter Property="BorderBrush" Value="#e4b5b5" />
  372. <Style Selector="^ /template/ TextBlock">
  373. <Setter Property="Foreground" Value="#831313" />
  374. </Style>
  375. <Style Selector="^:pointerover /template/ Border">
  376. <Setter Property="Background" Value="#f5d7d7" />
  377. </Style>
  378. <Style Selector="^:pressed /template/ Border">
  379. <Setter Property="Background" Value="#f5d7d7" />
  380. </Style>
  381. </Style>
  382. <Style Selector="^.Rounded">
  383. <Setter Property="CornerRadius" Value="100" />
  384. </Style>
  385. <Style Selector="^.Card">
  386. <Setter Property="Padding" Value="20" />
  387. <Setter Property="CornerRadius" Value="{DynamicResource MediumCornerRadius}" />
  388. <Setter Property="BorderThickness" Value="1.5" />
  389. <Setter Property="BorderBrush" Value="{DynamicResource SukiLightBorderBrush}" />
  390. <Setter Property="Background" Value="{DynamicResource SukiCardBackground}" />
  391. <Setter Property="Margin" Value="7" />
  392. <Setter Property="Template">
  393. <ControlTemplate>
  394. <ContentPresenter
  395. Name="PART_ContentPresenter"
  396. Margin="7"
  397. Padding="{TemplateBinding Padding}"
  398. HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
  399. VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
  400. Background="{TemplateBinding Background}"
  401. BorderBrush="{TemplateBinding BorderBrush}"
  402. BorderThickness="{TemplateBinding BorderThickness}"
  403. Content="{TemplateBinding Content}"
  404. ContentTemplate="{TemplateBinding ContentTemplate}"
  405. CornerRadius="{TemplateBinding CornerRadius}"
  406. RecognizesAccessKey="True"
  407. TextElement.Foreground="{TemplateBinding Foreground}" />
  408. </ControlTemplate>
  409. </Setter>
  410. </Style>
  411. <Style Selector="^.WindowControlsButton">
  412. <Setter Property="BorderThickness" Value="0" />
  413. <Setter Property="CornerRadius" Value="20" />
  414. <Setter Property="Height" Value="25" />
  415. <Setter Property="Width" Value="25" />
  416. <Setter Property="Cursor" Value="Hand" />
  417. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor0}" />
  418. <Setter Property="Padding" Value="0" />
  419. <Setter Property="Transitions">
  420. <Transitions>
  421. <BrushTransition Property="Background" Duration="0.01" />
  422. </Transitions>
  423. </Setter>
  424. <Style Selector="^:pointerover">
  425. <Setter Property="Background" Value="{DynamicResource SukiPrimaryColor25}" />
  426. </Style>
  427. <Style Selector="^.Close">
  428. <Setter Property="Background" Value="{DynamicResource SukiAccentColor0}" />
  429. <Style Selector="^:pointerover">
  430. <Setter Property="Background" Value="{DynamicResource SukiAccentColor25}" />
  431. </Style>
  432. </Style>
  433. </Style>
  434. <Style Selector="^.Large">
  435. <Setter Property="FontSize" Value="18" />
  436. <Setter Property="Padding" Value="30,12" />
  437. <Setter Property="CornerRadius" Value="9" />
  438. </Style>
  439. </ControlTheme>
  440. <ControlTheme
  441. x:Key="{x:Type Button}"
  442. TargetType="Button"
  443. BasedOn="{StaticResource SukiButtonStyle}" />
  444. </ResourceDictionary>