generated from unoplatform/template
-
Notifications
You must be signed in to change notification settings - Fork 26
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
9 changed files
with
959 additions
and
0 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
93 changes: 93 additions & 0 deletions
93
....Samples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutPresenterSamplePage.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,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> |
28 changes: 28 additions & 0 deletions
28
...mples/Uno.Toolkit.Samples.Shared/Content/Controls/DrawerFlyoutPresenterSamplePage.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,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(); | ||
} | ||
} | ||
} |
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/DrawerFlyoutPresenter/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.