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.
feat: ControlExtensions and InputExtensions (#287)
- Loading branch information
Showing
11 changed files
with
509 additions
and
1 deletion.
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,28 @@ | ||
| # InputExtensions Attached Properties | ||
| Provides various attached properties for _input controls_, such as `TextBox` and `PasswordBox`. | ||
|
|
||
| ## Properties | ||
| Property|Type|Description | ||
| -|-|- | ||
| AutoDismiss|bool|Whether the soft-keyboard will be dismissed when the enter key is pressed. | ||
| AutoFocusNext|bool|Whether the focus will move to the next focusable element when the enter key is pressed.\* | ||
| AutoFocusNextElement|Control|Sets the next control to focus when the enter key is pressed.\* | ||
|
|
||
| AutoFocusNext and AutoFocusNextElement\*: Having either or both of the two properties set will enable the focus next behavior. AutoFocusNextElement will take precedences over AutoFocusNext when both are set. | ||
|
|
||
| ### Remarks | ||
| - AutoFocusNext and AutoFocusNextElement have different focus target: | ||
| - AutoFocusNext is determined by `FocusManager.FindNextFocusableElement` | ||
| - AutoFocusNextElement is provided by the value. | ||
|
|
||
| ## Usage | ||
| ```xml | ||
| <!-- The focus will move in this order when pressing enter repeatedly: 1-2-4-3 --> | ||
| <TextBox x:Name="Input1" utu:InputExtensions.AutoFocusNext="True" /> | ||
| <TextBox x:Name="Input2" utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input4}" /> | ||
| <TextBox x:Name="Input3" utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input1}" /> | ||
| <TextBox x:Name="Input4" utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input3}" /> | ||
|
|
||
| <!-- Dismiss soft-keyboard on enter --> | ||
| <TextBox utu:InputExtensions.AutoDismiss="True" /> | ||
| ``` |
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,39 @@ | ||
| # ControlExtensions Attached Properties | ||
| Provides various attached properties for common controls. | ||
|
|
||
| ## Properties | ||
| Property|Type|Description | ||
| -|-|- | ||
| Command|ICommand|Sets the command to execute for: <br>- `TextBox`/`PasswordBox` enter key press\*<br>- `ListView` item click\*<br>- `NavigationView` item click | ||
| CommandParameter|ICommand|Sets the parameter to pass to the Command property. | ||
|
|
||
| Command on `TextBox`/`PasswordBox`\*: Having this set will also cause the keyboard dismiss on enter. | ||
| Command on `ListView`\*: [`IsItemClickEnabled`](https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.listviewbase.isitemclickenabled) must also be set to true for this to work. | ||
|
|
||
| ### Remarks | ||
| - For Command, the relevant parameter is also provided for the `CanExecute` and `Execute` call: | ||
| > Unless CommandParameter is set, which replaces the following. | ||
| - `TextBox.Text` | ||
| - `PasswordBox.Password` | ||
| - `ItemClickEventArgs.ClickedItem` from `ListView.ItemClick` | ||
| - `NavigationViewItemInvokedEventArgs.InvokedItem` from `NavigationView.ItemInvoked` | ||
|
|
||
| ## Usage | ||
| ```xml | ||
| <!-- Execute command on enter --> | ||
| <PasswordBox utu:ControlExtensions.Command="{Binding Login}" /> | ||
|
|
||
| <!-- ListView item click--> | ||
| <ListView ItemsSource="123" | ||
| IsItemClickEnabled="True" | ||
| utu:ControlExtensions.Command="{Binding UpdateSelection}" /> | ||
|
|
||
| <!-- NavigationView item invoke --> | ||
| <NavigationView utu:ControlExtensions.Command="{Binding Navigate}"> | ||
| <NavigationView.MenuItems> | ||
| <NavigationViewItem Content="Apple" /> | ||
| <NavigationViewItem Content="Banana" /> | ||
| <NavigationViewItem Content="Cactus" /> | ||
| </NavigationView.MenuItems> | ||
| </NavigationView> | ||
| ``` |
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
60 changes: 60 additions & 0 deletions
60
...lkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ControlExtensionsSamplePage.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,60 @@ | ||
| <Page x:Class="Uno.Toolkit.Samples.Content.Controls.ControlExtensionsSamplePage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| 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> | ||
| <StackPanel DataContext="{Binding Data}" Spacing="20"> | ||
| <TextBlock>The Command attached property allows an ICommand to be associated to:</TextBlock> | ||
|
|
||
| <!-- Text/PasswordBox[Command] example --> | ||
| <StackPanel Spacing="8"> | ||
| <TextBlock Text="- TextBox/PasswordBox enter key press:" /> | ||
| <TextBlock Text="{Binding InputDebugText}" /> | ||
| <TextBox utu:ControlExtensions.Command="{Binding DebugInputCommand}" /> | ||
| </StackPanel> | ||
|
|
||
| <!-- ListView[Command] example --> | ||
| <StackPanel Spacing="8"> | ||
| <TextBlock Text="- ListView item click:" /> | ||
| <TextBlock Text="{Binding SelectionDebugText}" /> | ||
| <ListView ItemsSource="123" | ||
| IsItemClickEnabled="True" | ||
| utu:ControlExtensions.Command="{Binding DebugSelectionCommand}"> | ||
| <ListView.ItemTemplate> | ||
| <DataTemplate> | ||
| <TextBlock>Item #<Run Text="{Binding}" /></TextBlock> | ||
| </DataTemplate> | ||
| </ListView.ItemTemplate> | ||
| </ListView> | ||
| </StackPanel> | ||
|
|
||
| <!-- NavigationView[Command] example --> | ||
| <StackPanel> | ||
| <TextBlock Text="- NavigationView item invoke" /> | ||
| <TextBlock Text="{Binding NavigationDebugText}" /> | ||
| <NavigationView utu:ControlExtensions.Command="{Binding DebugNavigationCommand}"> | ||
| <NavigationView.MenuItems> | ||
| <NavigationViewItem Content="Apple" /> | ||
| <NavigationViewItem Content="Banana" /> | ||
| <NavigationViewItem Content="Cactus" /> | ||
| </NavigationView.MenuItems> | ||
| </NavigationView> | ||
| </StackPanel> | ||
|
|
||
| </StackPanel> | ||
| </DataTemplate> | ||
| </sample:SamplePageLayout.DesignAgnosticTemplate> | ||
| </sample:SamplePageLayout> | ||
| </Grid> | ||
| </Page> |
41 changes: 41 additions & 0 deletions
41
...t.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/ControlExtensionsSamplePage.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.Windows.Input; | ||
| using Uno.Toolkit.Samples.Entities; | ||
| using Uno.Toolkit.Samples.ViewModels; | ||
| using Uno.Toolkit.UI; | ||
| using static System.FormattableString; | ||
|
|
||
| #if IS_WINUI | ||
| using Microsoft.UI.Xaml; | ||
| using Microsoft.UI.Xaml.Controls; | ||
| #else | ||
| using Windows.UI.Xaml; | ||
| using Windows.UI.Xaml.Controls; | ||
| #endif | ||
|
|
||
| namespace Uno.Toolkit.Samples.Content.Controls | ||
| { | ||
| [SamplePage(SampleCategory.Behaviors, nameof(ControlExtensions), SourceSdk.UnoToolkit, DataType = typeof(ControlExtensionsSamplePageVM))] | ||
| public sealed partial class ControlExtensionsSamplePage : Page | ||
| { | ||
| public ControlExtensionsSamplePage() | ||
| { | ||
| this.InitializeComponent(); | ||
| } | ||
|
|
||
| public class ControlExtensionsSamplePageVM : ViewModelBase | ||
| { | ||
| public string InputDebugText { get => GetProperty<string>(); set => SetProperty(value); } | ||
| public string SelectionDebugText { get => GetProperty<string>(); set => SetProperty(value); } | ||
| public string NavigationDebugText { get => GetProperty<string>(); set => SetProperty(value); } | ||
|
|
||
| public ICommand DebugInputCommand => new Command(DebugInput); | ||
| public ICommand DebugSelectionCommand => new Command(DebugSelection); | ||
| public ICommand DebugNavigationCommand => new Command(DebugNavigation); | ||
|
|
||
| private void DebugInput(object parameter) => InputDebugText = Invariant($"{DateTime.Now:HH:mm:ss}: parameter={parameter}"); | ||
| private void DebugSelection(object parameter) => SelectionDebugText = Invariant($"{DateTime.Now:HH:mm:ss}: parameter={parameter}"); | ||
| private void DebugNavigation(object parameter) => NavigationDebugText = Invariant($"{DateTime.Now:HH:mm:ss}: parameter={parameter}"); | ||
| } | ||
| } | ||
| } |
43 changes: 43 additions & 0 deletions
43
...oolkit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/InputExtensionsSamplePage.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,43 @@ | ||
| <Page x:Class="Uno.Toolkit.Samples.Content.Controls.InputExtensionsSamplePage" | ||
| xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" | ||
| xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" | ||
| 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"> | ||
|
|
||
| <Grid Background="{ThemeResource SurfaceBrush}"> | ||
| <sample:SamplePageLayout x:Name="SamplePageLayout" IsDesignAgnostic="True"> | ||
| <sample:SamplePageLayout.DesignAgnosticTemplate> | ||
| <DataTemplate> | ||
| <StackPanel Spacing="40"> | ||
|
|
||
| <StackPanel Spacing="8"> | ||
| <TextBlock Text="AutoFocusNext and AutoFocusNextElement can be used to move focus on enter." /> | ||
| <TextBox x:Name="Input1" | ||
| Text="Input1 (focus next)" | ||
| utu:InputExtensions.AutoFocusNext="True" /> | ||
| <TextBox x:Name="Input2" | ||
| Text="Input2 (focus Input4)" | ||
| utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input4}" /> | ||
| <TextBox x:Name="Input3" | ||
| Text="Input3 (focus Input1)" | ||
| utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input1}" /> | ||
| <TextBox x:Name="Input4" | ||
| Text="Input4 (focus Input3)" | ||
| utu:InputExtensions.AutoFocusNextElement="{Binding ElementName=Input3}" /> | ||
| </StackPanel> | ||
|
|
||
| <StackPanel Spacing="8"> | ||
| <TextBlock Text="Dismiss soft-keyboard on enter" /> | ||
| <TextBox utu:InputExtensions.AutoDismiss="True" /> | ||
| </StackPanel> | ||
|
|
||
| </StackPanel> | ||
| </DataTemplate> | ||
| </sample:SamplePageLayout.DesignAgnosticTemplate> | ||
| </sample:SamplePageLayout> | ||
| </Grid> | ||
| </Page> |
24 changes: 24 additions & 0 deletions
24
...kit.Samples/Uno.Toolkit.Samples.Shared/Content/Controls/InputExtensionsSamplePage.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,24 @@ | ||
| using System; | ||
| using System.Linq; | ||
| using System.Windows.Input; | ||
| using Uno.Toolkit.Samples.Entities; | ||
| using Uno.Toolkit.Samples.ViewModels; | ||
| using Uno.Toolkit.UI; | ||
|
|
||
| #if IS_WINUI | ||
| using Microsoft.UI.Xaml.Controls; | ||
| #else | ||
| using Windows.UI.Xaml.Controls; | ||
| #endif | ||
|
|
||
| namespace Uno.Toolkit.Samples.Content.Controls | ||
| { | ||
| [SamplePage(SampleCategory.Behaviors, nameof(InputExtensions), SourceSdk.UnoToolkit)] | ||
| public sealed partial class InputExtensionsSamplePage : Page | ||
| { | ||
| public InputExtensionsSamplePage() | ||
| { | ||
| 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
Oops, something went wrong.