单击后 StackLayout 或 Grid 中的波纹效果

Question

如何在StackLayout或Grid中实现点击后背景颜色平滑变化的效果？如果我们创建一个按钮，它就具有开箱即用的效果 - 我在附加的 gif 中展示了这一点。 ListView中的ViewCell也是一样。它还具有单击后更改背景颜色的连锁反应。但是 StackLayout 或 Grid 如何实现呢？

如何实现

Answer 1

解决方案一：

以为你说 ViewCell 有点击后改变背景颜色的波纹效果。你可以把 Stacklayout 或 Grid 放在只有一个 ViewCell 的列表视图。

in xaml

<StackLayout>


    <ListView x:Name="listView">

        <ListView.ItemTemplate>

            <DataTemplate>

                <ViewCell>

                    <StackLayout>

                      <Label TextColor="Black" Text="{Binding Content}"/>

                    </StackLayout>

                </ViewCell>

            </DataTemplate>

        </ListView.ItemTemplate>

    </ListView>

</StackLayout>

in code behind

public class Data
{
    public string Content { get; set; }
}


public partial class MainPage : ContentPage
{

    public ObservableCollection<Data> MySource { get; set; }

    public MainPage()
    {
        InitializeComponent();

        BindingContext = this;



        MySource = new ObservableCollection<Data>()
        {
          new Data() {Content="Click Me" },
        };

        listView.ItemsSource = MySource;

    }

}

方案二：

您可以使用来自 nuget

的包 TouchView

将 nuget 包添加到您的 Xamarin.Forms .netStandard/PCL 项目和特定于平台的项目（iOS 和 Android）

iOS: add TouchViewRenderer.Initialize() line to your AppDelegate (preserve from linker)

using TouchEffect.iOS;
namespace YourApp.iOS
{
    public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate
    {
        public override bool FinishedLaunching(UIApplication app, NSDictionary options)
        {
            global::Xamarin.Forms.Forms.Init();
            TouchViewRenderer.Initialize();
            LoadApplication(new App());
            return base.FinishedLaunching(app, options);
        }
    }
}

in xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourApp"
             xmlns:touch="clr-namespace:TouchEffect;assembly=TouchEffect"
             x:Class="App11.MainPage">

    <StackLayout>
        <touch:TouchView
            RegularBackgroundColor="LightGray"
            PressedBackgroundColor="Gray"
            PressedOpacity="1"       

            PressedAnimationDuration="100"
            RegularAnimationDuration="100"
            Padding="10, 5"
            VerticalOptions="CenterAndExpand"
            HorizontalOptions="CenterAndExpand"
            Completed="Handle_TouchCompleted"
           >

            <Label Text="Click Me" 
                   TextColor="Black" 
                   FontSize="30"/>

        </touch:TouchView>
    </StackLayout>

</ContentPage>

in code behind

private void Handle_TouchCompleted(TouchEffect.TouchView sender, TouchEffect.EventArgs.TouchCompletedEventArgs args)
 {
    // do something you want        
 }

Answer 2

BotonRefrescar.BackgroundColor = Color.FromHex("#32CEF9");
    Device.StartTimer(TimeSpan.FromMilliseconds(200), () =>
    {
        //do something
        BotonRefrescar.BackgroundColor = Color.FromHex("#32BBF9");
        return false;
    }
);

单击后 StackLayout 或 Grid 中的波纹效果

Ripple effect in StackLayout or Grid after click

grid

effect

ripple

xamarin.forms

stacklayout