Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New behavior KeyDownTriggerBehavior #4160

Merged
Original file line number Diff line number Diff line change
Expand Up @@ -626,6 +626,7 @@
<Content Include="SamplePages\Primitives\ConstrainedBox.bind">
<SubType>Designer</SubType>
</Content>
<Content Include="SamplePages\KeyDownTriggerBehavior\KeyDownTriggerBehaviorXaml.bind" />
</ItemGroup>
<ItemGroup>
<Compile Include="App.xaml.cs">
Expand Down Expand Up @@ -1475,6 +1476,7 @@
<Name>Visual C++ 2015 Runtime for Universal Windows Platform Apps</Name>
</SDKReference>
</ItemGroup>
<ItemGroup />
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<ItemGroup />

We can remove this to minimize noise.

<PropertyGroup Condition=" '$(VisualStudioVersion)' == '' or '$(VisualStudioVersion)' &lt; '14.0' ">
<VisualStudioVersion>14.0</VisualStudioVersion>
</PropertyGroup>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<!--<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">

<StackPanel
VerticalAlignment="Center">

<TextBox
PlaceholderText="Set the focus to this TextBox and press enter to trigger the animation"
Width="300">
<interactivity:Interaction.Behaviors>
<behaviors:KeyDownTriggerBehavior
Key="Enter">
<behaviors:StartAnimationAction Animation="{Binding ElementName=MoveAnimation}" />
</behaviors:KeyDownTriggerBehavior>
</interactivity:Interaction.Behaviors>
</TextBox>

<Button Background="Gray" Margin="0,40,0,0" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
<ani:Explicit.Animations>
<ani:AnimationSet x:Name="MoveAnimation" IsSequential="True">
<ani:TranslationAnimation Duration="0:0:3" To="0,32,0" From="0,0,0" />
<ani:StartAnimationActivity Delay="0:0:3" Animation="{Binding ElementName=FadeOutAnimation}"/>
<ani:StartAnimationActivity Delay="0:0:3" Animation="{Binding ElementName=FadeInAnimation}"/>
<ani:TranslationAnimation Duration="0:0:1" To="0,0,0" From="0,32,0" />
</ani:AnimationSet>
</ani:Explicit.Animations>

<Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100">
<ani:Explicit.Animations>
<ani:AnimationSet x:Name="FadeOutAnimation">
<ani:OpacityAnimation From="1"
To="0"
Duration="0:0:1"
Delay="0"
EasingType="Linear"
EasingMode="EaseOut"/>
</ani:AnimationSet>
<ani:AnimationSet x:Name="FadeInAnimation">
<ani:OpacityAnimation From="0"
To="1"
Duration="0:0:1"
Delay="0"
EasingType="Linear"
EasingMode="EaseOut"/>
</ani:AnimationSet>
</ani:Explicit.Animations>
</Image>

</Button>

</StackPanel>

</Page>-->

<Page
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:interactivity="using:Microsoft.Xaml.Interactivity"
xmlns:interactions="using:Microsoft.Xaml.Interactions.Core"
xmlns:ani="using:Microsoft.Toolkit.Uwp.UI.Animations"
xmlns:behaviors="using:Microsoft.Toolkit.Uwp.UI.Behaviors"
xmlns:core="using:Microsoft.Xaml.Interactions.Core"
mc:Ignorable="d">

<Button Background="Gray" Width="200" Height="200" HorizontalAlignment="Center" VerticalAlignment="Center">
<ani:Explicit.Animations>
<ani:AnimationSet x:Name="MoveAnimation" IsSequential="True">
<ani:TranslationAnimation Duration="0:0:3" To="0,32,0" From="0,0,0" />
<ani:StartAnimationActivity Delay="0:0:3" Animation="{Binding ElementName=FadeOutAnimation}"/>
<ani:StartAnimationActivity Delay="0:0:3" Animation="{Binding ElementName=FadeInAnimation}"/>
<ani:TranslationAnimation Duration="0:0:1" To="0,0,0" From="0,32,0" />
</ani:AnimationSet>
</ani:Explicit.Animations>

<Image Source="ms-appx:///Assets/ToolkitLogo.png" Height="100" Width="100">
<ani:Explicit.Animations>
<ani:AnimationSet x:Name="FadeOutAnimation">
<ani:OpacityAnimation From="1"
To="0"
Duration="0:0:1"
Delay="0"
EasingType="Linear"
EasingMode="EaseOut"/>
</ani:AnimationSet>
<ani:AnimationSet x:Name="FadeInAnimation">
<ani:OpacityAnimation From="0"
To="1"
Duration="0:0:1"
Delay="0"
EasingType="Linear"
EasingMode="EaseOut"/>
</ani:AnimationSet>
</ani:Explicit.Animations>
</Image>

<interactivity:Interaction.Behaviors>
<interactions:EventTriggerBehavior EventName="Click">
<behaviors:StartAnimationAction Animation="{Binding ElementName=MoveAnimation}"/>
</interactions:EventTriggerBehavior>
</interactivity:Interaction.Behaviors>
</Button>
</Page>
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
<triggers:UserHandPreferenceStateTrigger x:Key="UserHandPreferenceStateTrigger" />
<triggers:UserInteractionModeStateTrigger x:Key="UserInteractionModeStateTrigger" />
<behaviors:StartAnimationAction x:Key="StartAnimationAction" />
<behaviors:KeyDownTriggerBehavior x:Key="KeyDownTriggerBehavior" />
<behaviors:AutoSelectBehavior x:Key="AutoSelectBehavior" />
<controls:ColorPicker x:Key="ColorPicker" />
<controls:ColorPickerButton x:Key="ColorPickerButton" />
Expand Down
18 changes: 14 additions & 4 deletions Microsoft.Toolkit.Uwp.SampleApp/SamplePages/samples.json
Original file line number Diff line number Diff line change
Expand Up @@ -785,7 +785,7 @@
"Type": "ThemeListenerPage",
"Subcategory": "Systems",
"About": "The ThemeListener allows you to keep track of changes to the System Theme.",
"CodeUrl" : "https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI/Helpers/ThemeListener.cs",
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI/Helpers/ThemeListener.cs",
"Icon": "/Assets/Helpers.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/helpers/ThemeListener.md"
},
Expand Down Expand Up @@ -839,12 +839,22 @@
"Icon": "/Assets/Helpers.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/behaviors/AutoSelectBehavior.md"
},
{
"Name": "KeyDownTriggerBehavior",
"Type": "KeyDownTriggerBehaviorPage",
"Subcategory": "Systems",
"About": "Behavior to listen to a key press on a control and executes actions",
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Behaviors/Keyboard/KeyDownTriggerBehavior.cs",
"XamlCodeFile": "KeyDownTriggerBehaviorXaml.bind",
ArchieCoder marked this conversation as resolved.
Show resolved Hide resolved
"Icon": "/Assets/Helpers.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/behaviors/KeyboardBehaviors.md"
Copy link
Contributor

@XAML-Knight XAML-Knight Aug 10, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure this DocumentationUrl property points to the correct markdown file, for the corresponding file in the
WindowsCommunityToolkitDocs repo. A markdown file doesn't exist in the Docs repo for this Keyboard behavior yet, of course, so we'll need to add it, as an additional PR to the Docs repo.

  • @ArchieCoder are you planning on submitting a corresponding PR to the WindowsCommunityToolkitDocs repo, for the markdown file?
    • Feel free to reach out regarding how to submit a PR to the Docs repo
    • More online guidance for submitting a Docs PR guidance here and here

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@XAML-Knight can I just remove the DocumentationUrl? This behavior is so simple that the existing comments in the code is self-explanatory.

So far, it took me like 20 mins to do the behavior, but all the rest is many hours!

},
{
"Name": "Win2d Path Mini Language Parser",
"Type": "CanvasPathGeometryPage",
"Subcategory": "Parser",
"About": "CanvasPathGeometry class allows you to convert Win2d Path Mini Language string to CanvasGeometry, Brushes, CanvasStrokes or CanvasStrokeStyles.",
"CodeUrl" : "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Media/Geometry",
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Uwp.UI.Media/Geometry",
"Icon": "/SamplePages/CanvasPathGeometry/CanvasPathGeometry.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/parsers/CanvasPathGeometry.md"
},
Expand Down Expand Up @@ -882,15 +892,15 @@
"Name": "Guard APIs",
"Subcategory": "Developer",
"About": "The Guard APIs can be used to validate method arguments in a streamlined manner, which is also faster, less verbose, more expressive and less error prone than manually writing checks and throwing exceptions.",
"CodeUrl" : "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Diagnostics",
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.Diagnostics",
"Icon": "/Assets/Helpers.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/developer-tools/Guard.md"
},
{
"Name": "High Performance APIs",
"Subcategory": "Developer",
"About": "The High Performance package contains a set of APIs that are heavily focused on optimization. All the new APIs have been carefully crafted to achieve the best possible performance when using them, either through reduced memory allocation, micro-optimizations at the assembly level, or by structuring the APIs in a way that facilitates writing performance oriented code in general.",
"CodeUrl" : "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.HighPerformance",
"CodeUrl": "https://github.com/CommunityToolkit/WindowsCommunityToolkit/tree/main/Microsoft.Toolkit.HighPerformance",
"Icon": "/Assets/Helpers.png",
"DocumentationUrl": "https://raw.githubusercontent.com/MicrosoftDocs/WindowsCommunityToolkitDocs/master/docs/high-performance/Introduction.md"
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
using Microsoft.Xaml.Interactivity;
using Windows.System;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Input;

namespace Microsoft.Toolkit.Uwp.UI.Behaviors
{
/// <summary>
/// This behavior listens to a key down event on the associated <see cref="UIElement"/> when it is loaded and executes an action.
/// </summary>
[TypeConstraint(typeof(FrameworkElement))]
public class KeyDownTriggerBehavior : Trigger<FrameworkElement>
{

/// <summary>
/// Identifies the <see cref="Key"/> property.
/// </summary>
public static readonly DependencyProperty KeyProperty = DependencyProperty.Register(
nameof(Key),
typeof(VirtualKey),
typeof(KeyDownTriggerBehavior),
new PropertyMetadata(null));

/// <summary>
/// Gets or sets the key to listen when the associated object is loaded.
/// </summary>
public VirtualKey Key
{
get => (VirtualKey)GetValue(KeyProperty);
set => SetValue(KeyProperty, value);
}

/// <inheritdoc/>
protected override void OnAttached()
{
((FrameworkElement)AssociatedObject).KeyDown += OnAssociatedObjectKeyDown;
}

/// <inheritdoc/>
protected override void OnDetaching()
{
((FrameworkElement)AssociatedObject).KeyDown -= OnAssociatedObjectKeyDown;
}

/// <summary>
/// Invokes the current actions when the <see cref="Key"/> is pressed.
/// </summary>
/// <param name="sender">The source <see cref="UIElement"/> instance.</param>
/// <param name="keyRoutedEventArgs">The arguments for the event (unused).</param>
private void OnAssociatedObjectKeyDown(object sender, KeyRoutedEventArgs keyRoutedEventArgs)
{
if (keyRoutedEventArgs.Key == Key)
ArchieCoder marked this conversation as resolved.
Show resolved Hide resolved
{
keyRoutedEventArgs.Handled = true;
Interaction.ExecuteActions(sender, Actions, keyRoutedEventArgs);
}
}
}
}