feat: drawer flyout

docs/controls/DrawerFlyoutPresenter.md

@@ -0,0 +1,61 @@
+# DrawerFlyoutPresenter
+## Summary
+`DrawerFlyoutPresenter` is a special `ContentPresenter` to be used in the template of a `FlyoutPresenter` to enable gesture support.
+
+## Properties
+### Remarks
+All of the properties below can be used both as a dependency property or as an attached property, much like the `ScrollView` properties:
+```xml
+<Style x:Key="CustomDrawerFlyoutPresenterStyle"
+       BasedOn="{StaticResource DrawerFlyoutPresenterStyle}"
+       TargetType="FlyoutPresenter"
+       xmlns:utu="using:Uno.Toolkit.UI.Controls">
+    <Setter Property="utu:DrawerFlyoutPresenter.OpenDirection" Value="Top" />
+    <Setter Property="utu:DrawerFlyoutPresenter.LightDismissOverlayBackground" Value="#80808080" />
+    <Setter Property="utu:DrawerFlyoutPresenter.IsGestureEnabled" Value="True" />
+</Style>
+<!-- ... -->
+<utu:DrawerFlyoutPresenter xmlns:utu="using:Uno.Toolkit.UI.Controls"
+                           OpenDirection="Top"
+                           LightDismissOverlayBackground="#80808080"
+                           IsGestureEnabled="True" />
+```
+
+### `OpenDirection`
+
+Gets or sets a value that indicates the open direction of the drawer flyout. The default value is `Bottom`. Possible values are: `DrawerOpenDirection.Right`, `Left`, `Down`, `Top`.
+
+### `LightDismissOverlayBackground`
+
+Gets or sets a brush that describes the background color of the light-dismiss overlay. The default value is `#80808080` (from the default style).
+
+### `IsGestureEnabled`
+
+Gets or sets a value that indicates whether the flyout will respond to gesture (manipulation-related events). The default value is `true`.
+
+## Usage
+
+To use this, simply use a `Flyout` with `Placement="Full"` and one of the followings as the `FlyoutPresenterStyle`:
+- `LeftDrawerFlyoutPresenterStyle`
+- `TopDrawerFlyoutPresenterStyle`
+- `RightDrawerFlyoutPresenterStyle`
+- `BottomDrawerFlyoutPresenterStyle`
+
+Example:
+```xml
+<Button Content="Bottom Drawer"
+        xmlns:toolkit="using:Uno.UI.Toolkit">
+    <Button.Flyout>
+        <Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource BottomDrawerFlyoutPresenterStyle}">
+            <StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
+                        Background="SkyBlue"
+                        MinHeight="200">
+                <TextBlock Text="text" />
+                <Button Content="button" />
+                <Button Content="button" />
+            </StackPanel>
+        </Flyout>
+    </Button.Flyout>
+</Button>
+```
+> note: Here `VisibleBoundsPadding.PaddingMask` is used to prevent the content from being placed outside of the user-interactable area on mobile devices.

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutPresenterSamplePage.xaml

@@ -0,0 +1,93 @@
+<Page x:Class="Uno.Toolkit.Samples.Content.Controls.DrawerFlyoutPresenterSamplePage"
+	  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+	  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+	  xmlns:local="using:Uno.Toolkit.Samples.Content.Controls"
+	  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+	  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+	  xmlns:toolkit="using:Uno.UI.Toolkit"
+	  xmlns:sample="using:Uno.Toolkit.Samples"
+	  xmlns:utu="using:Uno.Toolkit.UI"
+	  mc:Ignorable="d"
+	  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+
+	<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
+		<sample:SamplePageLayout x:Name="SamplePageLayout">
+			<sample:SamplePageLayout.MaterialTemplate>
+				<DataTemplate>
+					<ScrollViewer HorizontalScrollMode="Disabled">
+						<StackPanel>
+							<TextBlock Text="Use a DrawerFlyoutPresenter to display flyout with gesture support." Style="{StaticResource BodyTextBlockStyle}" />
+
+							<!-- basic usage -->
+							<TextBlock Text="DrawerFlyoutPresenter"
+									   Margin="0,24,0,0"
+									   Style="{StaticResource TitleTextBlockStyle}" />
+							<TextBlock Text="note: To use this, simply use a Placement=Full flyout with one of the followings as FlyoutPresenterStyle:"
+									   Style="{StaticResource BodyTextBlockStyle}"/>
+							<TextBlock Text="- LeftDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}"/>
+							<TextBlock Text="- TopDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}"/>
+							<TextBlock Text="- RightDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}"/>
+							<TextBlock Text="- BottomDrawerFlyoutPresenterStyle" Style="{StaticResource BodyTextBlockStyle}"/>
+
+							<StackPanel Spacing="8"
+										Margin="0,24,0,0">
+								<Button Content="Left Drawer">
+									<Button.Flyout>
+										<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource LeftDrawerFlyoutPresenterStyle}">
+											<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
+														Background="SkyBlue"
+														MinWidth="200">
+												<TextBlock Text="text" />
+												<Button Content="button" />
+												<Button Content="button" />
+											</StackPanel>
+										</Flyout>
+									</Button.Flyout>
+								</Button>
+								<Button Content="Top Drawer">
+									<Button.Flyout>
+										<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource TopDrawerFlyoutPresenterStyle}">
+											<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
+														Background="SkyBlue"
+														MinHeight="200">
+												<TextBlock Text="text" />
+												<Button Content="button" />
+												<Button Content="button" />
+											</StackPanel>
+										</Flyout>
+									</Button.Flyout>
+								</Button>
+								<Button Content="Right Drawer">
+									<Button.Flyout>
+										<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource RightDrawerFlyoutPresenterStyle}">
+											<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
+														Background="SkyBlue"
+														MinWidth="200">
+												<TextBlock Text="text" />
+												<Button Content="button" />
+												<Button Content="button" />
+											</StackPanel>
+										</Flyout>
+									</Button.Flyout>
+								</Button>
+								<Button Content="Bottom Drawer">
+									<Button.Flyout>
+										<Flyout Placement="Full" FlyoutPresenterStyle="{StaticResource BottomDrawerFlyoutPresenterStyle}">
+											<StackPanel toolkit:VisibleBoundsPadding.PaddingMask="All"
+														Background="SkyBlue"
+														MinHeight="200">
+												<TextBlock Text="text" />
+												<Button Content="button" />
+												<Button Content="button" />
+											</StackPanel>
+										</Flyout>
+									</Button.Flyout>
+								</Button>
+							</StackPanel>
+						</StackPanel>
+					</ScrollViewer>
+				</DataTemplate>
+			</sample:SamplePageLayout.MaterialTemplate>
+		</sample:SamplePageLayout>
+	</Grid>
+</Page>

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutPresenterSamplePage.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.IO;
+using System.Linq;
+using System.Runtime.InteropServices.WindowsRuntime;
+using Uno.Toolkit.Samples.Entities;
+using Uno.Toolkit.UI.Controls;
+using Windows.Foundation;
+using Windows.Foundation.Collections;
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Controls;
+using Windows.UI.Xaml.Controls.Primitives;
+using Windows.UI.Xaml.Data;
+using Windows.UI.Xaml.Input;
+using Windows.UI.Xaml.Media;
+using Windows.UI.Xaml.Navigation;
+
+namespace Uno.Toolkit.Samples.Content.Controls
+{
+	[SamplePage(SampleCategory.Controls, nameof(DrawerFlyoutPresenter))]
+	public sealed partial class DrawerFlyoutPresenterSamplePage : Page
+	{
+		public DrawerFlyoutPresenterSamplePage()
+		{
+			this.InitializeComponent();
+		}
+	}
+}

samples/Uno.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Uno.Toolkit.Samples.Shared.projitems

@@ -25,6 +25,9 @@
     <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\ChipSamplePage.xaml.cs">
       <DependentUpon>ChipSamplePage.xaml</DependentUpon>
     </Compile>
+    <Compile Include="$(MSBuildThisFileDirectory)Content\Controls\DrawerFlyoutPresenterSamplePage.xaml.cs">
+      <DependentUpon>DrawerFlyoutPresenterSamplePage.xaml</DependentUpon>
+    </Compile>
     <Compile Include="$(MSBuildThisFileDirectory)Content\NestedSamples\NavigationBarSample_DataContext_NestedPage1.xaml.cs">
       <DependentUpon>NavigationBarSample_DataContext_NestedPage1.xaml</DependentUpon>
     </Compile>
@@ -122,6 +125,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="$(MSBuildThisFileDirectory)Content\Controls\DrawerFlyoutPresenterSamplePage.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="$(MSBuildThisFileDirectory)Content\NestedSamples\NavigationBarSample_DataContext_NestedPage1.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/Uno.Toolkit.UI/Controls/DrawerFlyoutPresenter/DrawerFlyoutPresenter.Properties.cs

@@ -0,0 +1,117 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+#if IS_WINUI
+using Microsoft.UI.Xaml;
+using Microsoft.UI.Xaml.Media;
+#else
+using Windows.UI.Xaml;
+using Windows.UI.Xaml.Media;
+#endif
+
+namespace Uno.Toolkit.UI.Controls
+{
+	public partial class DrawerFlyoutPresenter
+	{
+		internal static class DefaultValues
+		{
+			public const DrawerOpenDirection OpenDirection = DrawerOpenDirection.Up;
+			public const bool IsGestureEnabled = true;
+		}
+
+		#region DependencyProperty: [Private] IsOpen
+
+		private static DependencyProperty IsOpenProperty { get; } = DependencyProperty.Register(
+			nameof(IsOpen),
+			typeof(bool),
+			typeof(DrawerFlyoutPresenter),
+			new PropertyMetadata(default(bool), OnIsOpenChanged));
+
+		/// <summary>
+		/// Gets or sets a value that specifies whether the drawer is open.
+		/// </summary>
+		private bool IsOpen
+		{
+			get => (bool)GetValue(IsOpenProperty);
+			set => SetValue(IsOpenProperty, value);
+		}
+
+		#endregion
+
+		// note: These properties below can function both as a direct DP (from the owner) and as an attached DP (from any dependency object),
+		// just like the ScrollViewer properties.
+
+		#region AttachedProperty: OpenDirection = Top
+
+		public static DependencyProperty OpenDirectionProperty { get; } = DependencyProperty.RegisterAttached(
+			nameof(OpenDirection),
+			typeof(DrawerOpenDirection),
+			typeof(DrawerFlyoutPresenter),
+			new PropertyMetadata(DefaultValues.OpenDirection, OnOpenDirectionChanged));
+
+		/// <summary>
+		/// Gets or sets the direction in which the drawer opens toward.
+		/// </summary>
+		/// <remarks>
+		/// The position of drawer when opened is the opposite of this value.
+		/// </remarks>
+		public DrawerOpenDirection OpenDirection
+		{
+			get => (DrawerOpenDirection)GetValue(OpenDirectionProperty);
+			set => SetValue(OpenDirectionProperty, value);
+		}
+
+		public static DrawerOpenDirection GetOpenDirection(DependencyObject obj) => (DrawerOpenDirection)obj.GetValue(OpenDirectionProperty);
+		public static void SetOpenDirection(DependencyObject obj, DrawerOpenDirection value) => obj.SetValue(OpenDirectionProperty, value);
+
+		#endregion
+		#region AttachedProperty: LightDismissOverlayBackground
+
+		public static DependencyProperty LightDismissOverlayBackgroundProperty { get; } = DependencyProperty.RegisterAttached(
+			nameof(LightDismissOverlayBackground),
+			typeof(Brush),
+			typeof(DrawerFlyoutPresenter),
+			new PropertyMetadata(default(Brush)));
+
+		/// <summary>
+		/// Gets or sets the brush used to paint the light dismiss overlay.
+		/// </summary>
+		public Brush LightDismissOverlayBackground
+		{
+			get => (Brush)GetValue(LightDismissOverlayBackgroundProperty);
+			set => SetValue(LightDismissOverlayBackgroundProperty, value);
+		}
+
+		public static Brush GetLightDismissOverlayBackground(DependencyObject obj) => (Brush)obj.GetValue(LightDismissOverlayBackgroundProperty);
+		public static void SetLightDismissOverlayBackground(DependencyObject obj, Brush value) => obj.SetValue(LightDismissOverlayBackgroundProperty, value);
+
+		#endregion
+		#region AttachedProperty: IsGestureEnabled = true
+
+		public static DependencyProperty IsGestureEnabledProperty { get; } = DependencyProperty.RegisterAttached(
+			nameof(IsGestureEnabled),
+			typeof(bool),
+			typeof(DrawerFlyoutPresenter),
+			new PropertyMetadata(DefaultValues.IsGestureEnabled));
+
+		/// <summary>
+		/// Get or sets a value that indicates whether the user can interact with the control using gesture.
+		/// </summary>
+		public bool IsGestureEnabled
+		{
+			get => (bool)GetValue(IsGestureEnabledProperty);
+			set => SetValue(IsGestureEnabledProperty, value);
+		}
+
+		public static bool GetIsGestureEnabled(DependencyObject obj) => (bool)obj.GetValue(IsGestureEnabledProperty);
+		public static void SetIsGestureEnabled(DependencyObject obj, bool value) => obj.SetValue(IsGestureEnabledProperty, value);
+
+		#endregion
+
+		private static void OnOpenDirectionChanged(DependencyObject control, DependencyPropertyChangedEventArgs e) => (control as DrawerFlyoutPresenter)?.OnOpenDirectionChanged(e);
+		private static void OnIsOpenChanged(DependencyObject control, DependencyPropertyChangedEventArgs e) => (control as DrawerFlyoutPresenter)?.OnIsOpenChanged(e);
+	}
+}