generated from unoplatform/template
-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
987 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| # 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 `ScrollViewer` properties: | ||
| ```xml | ||
| xmlns:utu="using:Uno.Toolkit.UI.Controls" | ||
|
|
||
| <Style x:Key="CustomDrawerFlyoutPresenterStyle" | ||
| BasedOn="{StaticResource DrawerFlyoutPresenterStyle}" | ||
| TargetType="FlyoutPresenter"> | ||
| <Setter Property="utu:DrawerFlyoutPresenter.OpenDirection" Value="Top" /> | ||
| <Setter Property="utu:DrawerFlyoutPresenter.LightDismissOverlayBackground" Value="#80808080" /> | ||
| <Setter Property="utu:DrawerFlyoutPresenter.IsGestureEnabled" Value="True" /> | ||
| </Style> | ||
| <!-- and/or --> | ||
| <utu:DrawerFlyoutPresenter OpenDirection="Top" | ||
| LightDismissOverlayBackground="#80808080" | ||
| IsGestureEnabled="True" /> | ||
| ``` | ||
|
|
||
| ### Properties | ||
| Property|Type|Description | ||
| -|-|- | ||
| OpenDirection|DrawerOpenDirection|Gets or sets the direction in which the drawer opens toward.<br/>note: The position of drawer when opened is the opposite of this value. | ||
| LightDismissOverlayBackground|Brush|Gets or sets the brush used to paint the light dismiss overlay. The default value is `#80808080` (from the default style). | ||
| IsGestureEnabled|bool|Get or sets a value that indicates whether the user can interact with the control using gesture. The default value is `true`. | ||
|
|
||
| ## Usage | ||
|
|
||
| To use this, simply use a `Flyout` with `Placement="Full"` and one of the followings as the `FlyoutPresenterStyle`: | ||
| > note: The direction here indicates the initial position of the drawer. The open direction is the opposite. | ||
| - `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" /> | ||
| </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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
98 changes: 98 additions & 0 deletions
98
...o.Toolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutSamplePage.xaml
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| <Page x:Class="Uno.Toolkit.Samples.Content.Controls.DrawerFlyoutSamplePage" | ||
| 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 SurfaceBrush}"> | ||
| <sample:SamplePageLayout x:Name="SamplePageLayout" IsDesignAgnostic="True"> | ||
| <sample:SamplePageLayout.DesignAgnosticTemplate> | ||
| <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="{ThemeResource SurfaceBrush}" | ||
| MinWidth="200"> | ||
| <TextBlock Text="text" /> | ||
| <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="{ThemeResource SurfaceBrush}" | ||
| MinHeight="200"> | ||
| <TextBlock Text="text" /> | ||
| <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="{ThemeResource SurfaceBrush}" | ||
| MinWidth="200"> | ||
| <TextBlock Text="text" /> | ||
| <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="{ThemeResource SurfaceBrush}" | ||
| MinHeight="200"> | ||
| <TextBlock Text="text" /> | ||
| <Button Content="button" /> | ||
| </StackPanel> | ||
| </Flyout> | ||
| </Button.Flyout> | ||
| </Button> | ||
| </StackPanel> | ||
| </StackPanel> | ||
| </ScrollViewer> | ||
| </DataTemplate> | ||
| </sample:SamplePageLayout.DesignAgnosticTemplate> | ||
| </sample:SamplePageLayout> | ||
| </Grid> | ||
| </Page> |
41 changes: 41 additions & 0 deletions
41
...oolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutSamplePage.xaml.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| 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; | ||
|
|
||
| #if IS_WINUI | ||
| using Microsoft.UI; | ||
| using Microsoft.UI.Xaml; | ||
| using Microsoft.UI.Xaml.Controls; | ||
| using Microsoft.UI.Xaml.Controls.Primitives; | ||
| using Microsoft.UI.Xaml.Data; | ||
| using Microsoft.UI.Xaml.Input; | ||
| using Microsoft.UI.Xaml.Media; | ||
| using Microsoft.UI.Xaml.Navigation; | ||
| #else | ||
| using Windows.UI; | ||
| 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; | ||
| #endif | ||
|
|
||
| namespace Uno.Toolkit.Samples.Content.Controls | ||
| { | ||
| [SamplePage(SampleCategory.Controls, "DrawerFlyout")] | ||
| public sealed partial class DrawerFlyoutSamplePage : Page | ||
| { | ||
| public DrawerFlyoutSamplePage() | ||
| { | ||
| this.InitializeComponent(); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
117 changes: 117 additions & 0 deletions
117
src/Uno.Toolkit.UI/Controls/DrawerFlyout/DrawerFlyoutPresenter.Properties.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); | ||
| } | ||
| } |
Oops, something went wrong.