SplitView.cs 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487
  1. using Avalonia.Controls.Primitives;
  2. using Avalonia.Input;
  3. using Avalonia.Input.Raw;
  4. using Avalonia.Interactivity;
  5. using Avalonia.Media;
  6. using Avalonia.Metadata;
  7. using Avalonia.Platform;
  8. using Avalonia.VisualTree;
  9. using System;
  10. using System.Reactive.Disposables;
  11. namespace Avalonia.Controls
  12. {
  13. /// <summary>
  14. /// Defines constants for how the SplitView Pane should display
  15. /// </summary>
  16. public enum SplitViewDisplayMode
  17. {
  18. /// <summary>
  19. /// Pane is displayed next to content, and does not auto collapse
  20. /// when tapped outside
  21. /// </summary>
  22. Inline,
  23. /// <summary>
  24. /// Pane is displayed next to content. When collapsed, pane is still
  25. /// visible according to CompactPaneLength. Pane does not auto collapse
  26. /// when tapped outside
  27. /// </summary>
  28. CompactInline,
  29. /// <summary>
  30. /// Pane is displayed above content. Pane collapses when tapped outside
  31. /// </summary>
  32. Overlay,
  33. /// <summary>
  34. /// Pane is displayed above content. When collapsed, pane is still
  35. /// visible according to CompactPaneLength. Pane collapses when tapped outside
  36. /// </summary>
  37. CompactOverlay
  38. }
  39. /// <summary>
  40. /// Defines constants for where the Pane should appear
  41. /// </summary>
  42. public enum SplitViewPanePlacement
  43. {
  44. Left,
  45. Right
  46. }
  47. public class SplitViewTemplateSettings : AvaloniaObject
  48. {
  49. internal SplitViewTemplateSettings() { }
  50. public static readonly StyledProperty<double> ClosedPaneWidthProperty =
  51. AvaloniaProperty.Register<SplitViewTemplateSettings, double>(nameof(ClosedPaneWidth), 0d);
  52. public static readonly StyledProperty<GridLength> PaneColumnGridLengthProperty =
  53. AvaloniaProperty.Register<SplitViewTemplateSettings, GridLength>(nameof(PaneColumnGridLength));
  54. public double ClosedPaneWidth
  55. {
  56. get => GetValue(ClosedPaneWidthProperty);
  57. internal set => SetValue(ClosedPaneWidthProperty, value);
  58. }
  59. public GridLength PaneColumnGridLength
  60. {
  61. get => GetValue(PaneColumnGridLengthProperty);
  62. internal set => SetValue(PaneColumnGridLengthProperty, value);
  63. }
  64. }
  65. /// <summary>
  66. /// A control with two views: A collapsible pane and an area for content
  67. /// </summary>
  68. public class SplitView : TemplatedControl
  69. {
  70. /*
  71. Pseudo classes & combos
  72. :open / :closed
  73. :compactoverlay :compactinline :overlay :inline
  74. :left :right
  75. */
  76. /// <summary>
  77. /// Defines the <see cref="Content"/> property
  78. /// </summary>
  79. public static readonly StyledProperty<IControl> ContentProperty =
  80. AvaloniaProperty.Register<SplitView, IControl>(nameof(Content));
  81. /// <summary>
  82. /// Defines the <see cref="CompactPaneLength"/> property
  83. /// </summary>
  84. public static readonly StyledProperty<double> CompactPaneLengthProperty =
  85. AvaloniaProperty.Register<SplitView, double>(nameof(CompactPaneLength), defaultValue: 48);
  86. /// <summary>
  87. /// Defines the <see cref="DisplayMode"/> property
  88. /// </summary>
  89. public static readonly StyledProperty<SplitViewDisplayMode> DisplayModeProperty =
  90. AvaloniaProperty.Register<SplitView, SplitViewDisplayMode>(nameof(DisplayMode), defaultValue: SplitViewDisplayMode.Overlay);
  91. /// <summary>
  92. /// Defines the <see cref="IsPaneOpen"/> property
  93. /// </summary>
  94. public static readonly DirectProperty<SplitView, bool> IsPaneOpenProperty =
  95. AvaloniaProperty.RegisterDirect<SplitView, bool>(nameof(IsPaneOpen),
  96. x => x.IsPaneOpen, (x, v) => x.IsPaneOpen = v);
  97. /// <summary>
  98. /// Defines the <see cref="OpenPaneLength"/> property
  99. /// </summary>
  100. public static readonly StyledProperty<double> OpenPaneLengthProperty =
  101. AvaloniaProperty.Register<SplitView, double>(nameof(OpenPaneLength), defaultValue: 320);
  102. /// <summary>
  103. /// Defines the <see cref="PaneBackground"/> property
  104. /// </summary>
  105. public static readonly StyledProperty<IBrush> PaneBackgroundProperty =
  106. AvaloniaProperty.Register<SplitView, IBrush>(nameof(PaneBackground));
  107. /// <summary>
  108. /// Defines the <see cref="PanePlacement"/> property
  109. /// </summary>
  110. public static readonly StyledProperty<SplitViewPanePlacement> PanePlacementProperty =
  111. AvaloniaProperty.Register<SplitView, SplitViewPanePlacement>(nameof(PanePlacement));
  112. /// <summary>
  113. /// Defines the <see cref="Pane"/> property
  114. /// </summary>
  115. public static readonly StyledProperty<IControl> PaneProperty =
  116. AvaloniaProperty.Register<SplitView, IControl>(nameof(Pane));
  117. /// <summary>
  118. /// Defines the <see cref="UseLightDismissOverlayMode"/> property
  119. /// </summary>
  120. public static readonly StyledProperty<bool> UseLightDismissOverlayModeProperty =
  121. AvaloniaProperty.Register<SplitView, bool>(nameof(UseLightDismissOverlayMode));
  122. /// <summary>
  123. /// Defines the <see cref="TemplateSettings"/> property
  124. /// </summary>
  125. public static readonly StyledProperty<SplitViewTemplateSettings> TemplateSettingsProperty =
  126. AvaloniaProperty.Register<SplitView, SplitViewTemplateSettings>(nameof(TemplateSettings));
  127. private bool _isPaneOpen;
  128. private Panel _pane;
  129. private CompositeDisposable _pointerDisposables;
  130. public SplitView()
  131. {
  132. PseudoClasses.Add(":overlay");
  133. PseudoClasses.Add(":left");
  134. TemplateSettings = new SplitViewTemplateSettings();
  135. }
  136. static SplitView()
  137. {
  138. UseLightDismissOverlayModeProperty.Changed.AddClassHandler<SplitView>((x, v) => x.OnUseLightDismissChanged(v));
  139. CompactPaneLengthProperty.Changed.AddClassHandler<SplitView>((x, v) => x.OnCompactPaneLengthChanged(v));
  140. PanePlacementProperty.Changed.AddClassHandler<SplitView>((x, v) => x.OnPanePlacementChanged(v));
  141. DisplayModeProperty.Changed.AddClassHandler<SplitView>((x, v) => x.OnDisplayModeChanged(v));
  142. }
  143. /// <summary>
  144. /// Gets or sets the content of the SplitView
  145. /// </summary>
  146. [Content]
  147. public IControl Content
  148. {
  149. get => GetValue(ContentProperty);
  150. set => SetValue(ContentProperty, value);
  151. }
  152. /// <summary>
  153. /// Gets or sets the length of the pane when in <see cref="SplitViewDisplayMode.CompactOverlay"/>
  154. /// or <see cref="SplitViewDisplayMode.CompactInline"/> mode
  155. /// </summary>
  156. public double CompactPaneLength
  157. {
  158. get => GetValue(CompactPaneLengthProperty);
  159. set => SetValue(CompactPaneLengthProperty, value);
  160. }
  161. /// <summary>
  162. /// Gets or sets the <see cref="SplitViewDisplayMode"/> for the SplitView
  163. /// </summary>
  164. public SplitViewDisplayMode DisplayMode
  165. {
  166. get => GetValue(DisplayModeProperty);
  167. set => SetValue(DisplayModeProperty, value);
  168. }
  169. /// <summary>
  170. /// Gets or sets whether the pane is open or closed
  171. /// </summary>
  172. public bool IsPaneOpen
  173. {
  174. get => _isPaneOpen;
  175. set
  176. {
  177. if (value == _isPaneOpen)
  178. {
  179. return;
  180. }
  181. if (value)
  182. {
  183. OnPaneOpening(this, null);
  184. SetAndRaise(IsPaneOpenProperty, ref _isPaneOpen, value);
  185. PseudoClasses.Add(":open");
  186. PseudoClasses.Remove(":closed");
  187. OnPaneOpened(this, null);
  188. }
  189. else
  190. {
  191. SplitViewPaneClosingEventArgs args = new SplitViewPaneClosingEventArgs(false);
  192. OnPaneClosing(this, args);
  193. if (!args.Cancel)
  194. {
  195. SetAndRaise(IsPaneOpenProperty, ref _isPaneOpen, value);
  196. PseudoClasses.Add(":closed");
  197. PseudoClasses.Remove(":open");
  198. OnPaneClosed(this, null);
  199. }
  200. }
  201. }
  202. }
  203. /// <summary>
  204. /// Gets or sets the length of the pane when open
  205. /// </summary>
  206. public double OpenPaneLength
  207. {
  208. get => GetValue(OpenPaneLengthProperty);
  209. set => SetValue(OpenPaneLengthProperty, value);
  210. }
  211. /// <summary>
  212. /// Gets or sets the background of the pane
  213. /// </summary>
  214. public IBrush PaneBackground
  215. {
  216. get => GetValue(PaneBackgroundProperty);
  217. set => SetValue(PaneBackgroundProperty, value);
  218. }
  219. /// <summary>
  220. /// Gets or sets the <see cref="SplitViewPanePlacement"/> for the SplitView
  221. /// </summary>
  222. public SplitViewPanePlacement PanePlacement
  223. {
  224. get => GetValue(PanePlacementProperty);
  225. set => SetValue(PanePlacementProperty, value);
  226. }
  227. /// <summary>
  228. /// Gets or sets the Pane for the SplitView
  229. /// </summary>
  230. public IControl Pane
  231. {
  232. get => GetValue(PaneProperty);
  233. set => SetValue(PaneProperty, value);
  234. }
  235. /// <summary>
  236. /// Gets or sets whether WinUI equivalent LightDismissOverlayMode is enabled
  237. /// <para>When enabled, and the pane is open in Overlay or CompactOverlay mode,
  238. /// the contents of the splitview are darkened to visually separate the open pane
  239. /// and the rest of the SplitView</para>
  240. /// </summary>
  241. public bool UseLightDismissOverlayMode
  242. {
  243. get => GetValue(UseLightDismissOverlayModeProperty);
  244. set => SetValue(UseLightDismissOverlayModeProperty, value);
  245. }
  246. /// <summary>
  247. /// Gets or sets the TemplateSettings for the SplitView
  248. /// </summary>
  249. public SplitViewTemplateSettings TemplateSettings
  250. {
  251. get => GetValue(TemplateSettingsProperty);
  252. set => SetValue(TemplateSettingsProperty, value);
  253. }
  254. /// <summary>
  255. /// Fired when the pane is closed
  256. /// </summary>
  257. public event EventHandler<EventArgs> PaneClosed;
  258. /// <summary>
  259. /// Fired when the pane is closing
  260. /// </summary>
  261. public event EventHandler<SplitViewPaneClosingEventArgs> PaneClosing;
  262. /// <summary>
  263. /// Fired when the pane is opened
  264. /// </summary>
  265. public event EventHandler<EventArgs> PaneOpened;
  266. /// <summary>
  267. /// Fired when the pane is opening
  268. /// </summary>
  269. public event EventHandler<EventArgs> PaneOpening;
  270. protected override void OnApplyTemplate(TemplateAppliedEventArgs e)
  271. {
  272. base.OnApplyTemplate(e);
  273. _pane = e.NameScope.Find<Panel>("PART_PaneRoot");
  274. }
  275. protected override void OnAttachedToVisualTree(VisualTreeAttachmentEventArgs e)
  276. {
  277. base.OnAttachedToVisualTree(e);
  278. var topLevel = this.VisualRoot;
  279. if (topLevel is Window window)
  280. {
  281. //Logic adapted from Popup
  282. //Basically if we're using an overlay DisplayMode, close the pane if we don't click on the pane
  283. IDisposable subscribeToEventHandler<T, TEventHandler>(T target, TEventHandler handler,
  284. Action<T, TEventHandler> subscribe, Action<T, TEventHandler> unsubscribe)
  285. {
  286. subscribe(target, handler);
  287. return Disposable.Create((unsubscribe, target, handler), state => state.unsubscribe(state.target, state.handler));
  288. }
  289. _pointerDisposables = new CompositeDisposable(
  290. window.AddDisposableHandler(PointerPressedEvent, PointerPressedOutside, RoutingStrategies.Tunnel),
  291. InputManager.Instance?.Process.Subscribe(OnNonClientClick),
  292. subscribeToEventHandler<Window, EventHandler>(window, Window_Deactivated,
  293. (x, handler) => x.Deactivated += handler, (x, handler) => x.Deactivated -= handler),
  294. subscribeToEventHandler<IWindowImpl, Action>(window.PlatformImpl, OnWindowLostFocus,
  295. (x, handler) => x.LostFocus += handler, (x, handler) => x.LostFocus -= handler));
  296. }
  297. }
  298. protected override void OnDetachedFromVisualTree(VisualTreeAttachmentEventArgs e)
  299. {
  300. base.OnDetachedFromVisualTree(e);
  301. _pointerDisposables?.Dispose();
  302. }
  303. private void OnWindowLostFocus()
  304. {
  305. if (IsPaneOpen && ShouldClosePane())
  306. {
  307. IsPaneOpen = false;
  308. }
  309. }
  310. private void PointerPressedOutside(object sender, PointerPressedEventArgs e)
  311. {
  312. if (!IsPaneOpen)
  313. {
  314. return;
  315. }
  316. //If we click within the Pane, don't do anything
  317. //Otherwise, ClosePane if open & using an overlay display mode
  318. bool closePane = ShouldClosePane();
  319. if (!closePane)
  320. {
  321. return;
  322. }
  323. var src = e.Source as IVisual;
  324. while (src != null)
  325. {
  326. if (src == _pane)
  327. {
  328. closePane = false;
  329. break;
  330. }
  331. src = src.VisualParent;
  332. }
  333. if (closePane)
  334. {
  335. IsPaneOpen = false;
  336. e.Handled = true;
  337. }
  338. }
  339. private void OnNonClientClick(RawInputEventArgs obj)
  340. {
  341. if (!IsPaneOpen)
  342. {
  343. return;
  344. }
  345. var mouse = obj as RawPointerEventArgs;
  346. if (mouse?.Type == RawPointerEventType.NonClientLeftButtonDown)
  347. {
  348. if (ShouldClosePane())
  349. IsPaneOpen = false;
  350. }
  351. }
  352. private void Window_Deactivated(object sender, EventArgs e)
  353. {
  354. if (IsPaneOpen && ShouldClosePane())
  355. {
  356. IsPaneOpen = false;
  357. }
  358. }
  359. private bool ShouldClosePane()
  360. {
  361. return (DisplayMode == SplitViewDisplayMode.CompactOverlay || DisplayMode == SplitViewDisplayMode.Overlay);
  362. }
  363. protected virtual void OnPaneOpening(SplitView sender, EventArgs args)
  364. {
  365. PaneOpening?.Invoke(sender, args);
  366. }
  367. protected virtual void OnPaneOpened(SplitView sender, EventArgs args)
  368. {
  369. PaneOpened?.Invoke(sender, args);
  370. }
  371. protected virtual void OnPaneClosing(SplitView sender, SplitViewPaneClosingEventArgs args)
  372. {
  373. PaneClosing?.Invoke(sender, args);
  374. }
  375. protected virtual void OnPaneClosed(SplitView sender, EventArgs args)
  376. {
  377. PaneClosed?.Invoke(sender, args);
  378. }
  379. private void OnCompactPaneLengthChanged(AvaloniaPropertyChangedEventArgs e)
  380. {
  381. var newLen = (double)e.NewValue;
  382. var displayMode = DisplayMode;
  383. if (displayMode == SplitViewDisplayMode.CompactInline)
  384. {
  385. TemplateSettings.ClosedPaneWidth = newLen;
  386. }
  387. else if (displayMode == SplitViewDisplayMode.CompactOverlay)
  388. {
  389. TemplateSettings.ClosedPaneWidth = newLen;
  390. TemplateSettings.PaneColumnGridLength = new GridLength(newLen, GridUnitType.Pixel);
  391. }
  392. }
  393. private void OnPanePlacementChanged(AvaloniaPropertyChangedEventArgs e)
  394. {
  395. var oldState = e.OldValue.ToString().ToLower();
  396. var newState = e.NewValue.ToString().ToLower();
  397. PseudoClasses.Remove($":{oldState}");
  398. PseudoClasses.Add($":{newState}");
  399. }
  400. private void OnDisplayModeChanged(AvaloniaPropertyChangedEventArgs e)
  401. {
  402. var oldState = e.OldValue.ToString().ToLower();
  403. var newState = e.NewValue.ToString().ToLower();
  404. PseudoClasses.Remove($":{oldState}");
  405. PseudoClasses.Add($":{newState}");
  406. var (closedPaneWidth, paneColumnGridLength) = (SplitViewDisplayMode)e.NewValue switch
  407. {
  408. SplitViewDisplayMode.Overlay => (0, new GridLength(0, GridUnitType.Pixel)),
  409. SplitViewDisplayMode.CompactOverlay => (CompactPaneLength, new GridLength(CompactPaneLength, GridUnitType.Pixel)),
  410. SplitViewDisplayMode.Inline => (0, new GridLength(0, GridUnitType.Auto)),
  411. SplitViewDisplayMode.CompactInline => (CompactPaneLength, new GridLength(0, GridUnitType.Auto)),
  412. _ => throw new NotImplementedException(),
  413. };
  414. TemplateSettings.ClosedPaneWidth = closedPaneWidth;
  415. TemplateSettings.PaneColumnGridLength = paneColumnGridLength;
  416. }
  417. private void OnUseLightDismissChanged(AvaloniaPropertyChangedEventArgs e)
  418. {
  419. var mode = (bool)e.NewValue;
  420. PseudoClasses.Set(":lightdismiss", mode);
  421. }
  422. }
  423. }