在ListView中选择ImageCell时的材质设计动画

本文关键字:动画 ListView 选择 ImageCell | 更新日期: 2023-09-27 18:00:04

我是移动开发的新手,尤其是Xamarin,所以如果这有点基本,请原谅我,但我一直在谷歌上搜索,找不到一个好的答案。。。

我设置了一个MasterDetail页面,将我的应用程序的主导航方案作为主导航方案,并通过对绑定到我在主视图中的ListView的对象的TargetType属性的反射加载详细信息页面。基本上直接来自MasterDetail页面的Xamarin样本,如下所示:

    public class MasterPageItem
    {
        public string Title { get; set; }
        public string IconSource { get; set; }
        public Type TargetType { get; set; }
    }
    public MainMenu ()
    {
        InitializeComponent ();
        var masterPageItems = new List<MasterPageItem>();
        masterPageItems.Add(new MasterPageItem
        {
            Title = "Events",
            IconSource = "Icon.png",
            TargetType = typeof(MainPage)
        });
        masterPageItems.Add(new MasterPageItem
        {
            Title = "Categories",
            IconSource = "Icon.png",
            TargetType = typeof(Categories)
        });
        masterPageItems.Add(new MasterPageItem
        {
            Title = "Tags",
            IconSource = "Icon.png",
            TargetType = typeof(Tags)
        });
        listView.ItemsSource = masterPageItems;
    }
    void OnItemSelected(object sender, SelectedItemChangedEventArgs e)
        {
            var item = e.SelectedItem as MasterPageItem;
            if (item != null)
            {
                listView.SelectedItem = null;
                var mdPage = this.Parent as MasterDetail;
                mdPage.IsPresented = false;
                mdPage.Detail = new NavigationPage((ContentPage)Activator.CreateInstance(item.TargetType))
                {
                    BarBackgroundColor = Color.FromHex("1976D2")
                };
            }
        }

Xaml页面:

<ContentPage.Content>
    <StackLayout VerticalOptions="FillAndExpand">
      <ListView x:Name="listView" VerticalOptions="FillAndExpand" SeparatorVisibility="None" ItemSelected="OnItemSelected">
        <ListView.ItemTemplate>
          <DataTemplate>
            <ImageCell ImageSource="{Binding IconSource}" Text="{Binding Title}" TextColor="White" Tapped="OnCellTapped" />
          </DataTemplate>
        </ListView.ItemTemplate>
      </ListView>
    </StackLayout>
  </ContentPage.Content>

我的目标是尝试在ListView项目的按键上添加一个简单的材质设计类型背景色动画(如以下示例:http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design)。

ImageCell类似乎没有实现IAnimable,因此绑定到该元素上的Tapped事件没有帮助,ListView类本身似乎也没有实现任何类型的Item或Row元素,该元素本身是可动画的。我看到的唯一选项是为整个ListView设置动画,我实际上能够做到这一点,但这显然不是我想要实现的。

ListView本身似乎也没有SelectedItemBackgroundColor属性或等效属性?我觉得我错过了一些重要的东西,比如这不能跨平台进行,必须针对特定平台,但这似乎是Xamarin的一个重大疏忽。表格,不是吗?

我还有一些其他的ListView,我想在那里使用类似的用户体验,所以任何帮助都将不胜感激。

在ListView中选择ImageCell时的材质设计动画

我刚刚尝试过,在使用AppCompat时,波纹效果似乎是默认提供的。MasterDetailPage示例还没有更新,这可能是它在那里不起作用的原因。要将AppCompat和Material设计添加到Forms Android项目中,请查看本指南。