[WiP] Touch effect

samples/CommunityToolkit.Maui.Sample/App.xaml.cs

@@ -8,6 +8,6 @@ public App()
 	{
 		InitializeComponent();
 
-		MainPage = new AppShell();
+		MainPage = new TouchPageSample();
 	}
 }

samples/CommunityToolkit.Maui.Sample/TouchPageSample.xaml

@@ -0,0 +1,73 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage
+	x:Class="CommunityToolkit.Maui.Sample.TouchPageSample"
+	xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+	xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+	xmlns:mct="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
+	x:Name="Page"
+	Title="TouchPageSample">
+
+	<ContentPage.Resources>
+		<ResourceDictionary>
+			<Style x:Key="GridRowContentStyle" TargetType="StackLayout">
+				<Setter Property="HorizontalOptions" Value="CenterAndExpand" />
+				<Setter Property="VerticalOptions" Value="CenterAndExpand" />
+				<Setter Property="Spacing" Value="10" />
+			</Style>
+		</ResourceDictionary>
+	</ContentPage.Resources>
+	<VerticalStackLayout>
+
+		<HorizontalStackLayout>
+			<Label
+				FontSize="Title"
+				HorizontalOptions="FillAndExpand"
+				Text="NativeAnimationBorderless"
+				TextColor="Black" />
+			<Switch IsToggled="{Binding NativeAnimationBorderless, Source={x:Reference Page}}" />
+		</HorizontalStackLayout>
+
+		<Label
+			FontSize="Title"
+			HorizontalOptions="CenterAndExpand"
+			Text="{Binding TouchCount, StringFormat='Touches: {0}', Source={x:Reference Page}}"
+			TextColor="Black" />
+
+		<VerticalStackLayout Style="{StaticResource GridRowContentStyle}">
+			<Label Text="Image | Toggle" />
+			<Image
+				x:Name="img"
+				BackgroundColor="Red"
+				HeightRequest="40">
+				<Image.Behaviors>
+					<mct:TouchBehavior
+						Command="{Binding TouchCountCommand, Source={x:Reference Page}}"
+						IsToggled="false"
+						NativeAnimation="True"
+						NormalBackgroundImageSource="shield.png"
+						PressedBackgroundImageSource="avatar_icon.png" />
+				</Image.Behaviors>
+			</Image>
+
+		</VerticalStackLayout>
+
+		<VerticalStackLayout Style="{StaticResource GridRowContentStyle}">
+			<Label Text="Scale | Fade | Animated" />
+
+			<HorizontalStackLayout HorizontalOptions="CenterAndExpand">
+
+				<HorizontalStackLayout.Behaviors>
+					<mct:TouchBehavior
+						AnimationDuration="250"
+						AnimationEasing="{x:Static Easing.CubicInOut}"
+						PressedOpacity="0.6"
+						PressedScale="0.8" />
+				</HorizontalStackLayout.Behaviors>
+
+				<BoxView HeightRequest="100" Color="Gold" />
+				<Label Text="The entire layout receives touches" />
+				<BoxView HeightRequest="100" Color="Gold" />
+			</HorizontalStackLayout>
+		</VerticalStackLayout>
+	</VerticalStackLayout>
+</ContentPage>

samples/CommunityToolkit.Maui.Sample/TouchPageSample.xaml.cs

@@ -0,0 +1,42 @@
+namespace CommunityToolkit.Maui.Sample;
+
+public partial class TouchPageSample : ContentPage
+{
+	bool nativeAnimationBorderless;
+
+	public bool NativeAnimationBorderless
+	{
+		get => nativeAnimationBorderless;
+		set
+		{
+			nativeAnimationBorderless = value;
+			OnPropertyChanged();
+		}
+	}
+
+	public int TouchCount { get; private set; }
+
+	public int LongPressCount { get; private set; }
+
+	public Command TouchCountCommand => new(TouchCountCommandExecute);
+
+	public TouchPageSample()
+	{
+		InitializeComponent();
+		BindingContext = this;
+		img.PropertyChanged += (s, e) =>
+		{
+			if (e.PropertyName == "Source")
+			{
+				var v = img.Source;
+			}
+		};
+	}
+
+
+	void TouchCountCommandExecute()
+	{
+		TouchCount++;
+		OnPropertyChanged("TouchCount");
+	}
+}