点击后如何在StackLayout或Grid中实现背景色平滑变化的效果?如果我们创建一个按钮,它就具有这种开箱即用的效果 - 我在附加的 gif 中展示了这一点。 ListView 中的 ViewCell 也是如此。它还具有单击后更改背景颜色的涟漪效应。但是如何为 StackLayout 或 Grid 实现这一点?
如何实现这一目标
最佳答案
解决方案1:
以为你说ViewCell有点击后改变背景颜色的涟漪效应。你可以把堆栈布局 或 格子在只有一个 ViewCell 的 ListView 中。
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;
}
}
解决方案2:
您可以使用包 TouchView来自 nuget
将 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
}
关于xamarin.forms - 单击后 StackLayout 或 Grid 中的波纹效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55471030/