Question

我想使用CarouselView创建一个自动播放的幻灯片。这是我的代码：这是我的xaml页面：

    <ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:controls="clr-namespace:DrLink.Controls;assembly=DrLink"
             xmlns:forms="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"
             x:Class="DrLink.Login.Login">
  <ContentPage.Resources>
    <ResourceDictionary>
      <!--Female template-->
      <DataTemplate x:Key="Template">
        <StackLayout BackgroundColor="Pink"
                         Orientation="Horizontal">
          <Image Source="{Binding ImageUrl}"
                   VerticalOptions="Center"
                   Margin="50,0,0,0" WidthRequest="100"
                   HeightRequest="200" />
          <Label VerticalOptions="Center"
                   Margin="60,0,0,0"
                   Text="{Binding Name}"
                   TextColor="Black"
                   FontSize="30" />
        </StackLayout>
      </DataTemplate>


    </ResourceDictionary>
  </ContentPage.Resources>
  <!--Carousel View-->

  <ContentPage.Content>

    <StackLayout Spacing="20">
      <StackLayout.Padding>
        <OnPlatform x:TypeArguments="Thickness">
          <OnPlatform.iOS>
            20, 20, 20, 5
          </OnPlatform.iOS>
          <OnPlatform.Android>
            20, 0, 20, 5
          </OnPlatform.Android>
          <OnPlatform.WinPhone>
            20, 0, 20, 5
          </OnPlatform.WinPhone>
        </OnPlatform>
      </StackLayout.Padding>

      <StackLayout.Children>
        <AbsoluteLayout>
          <AbsoluteLayout.Children>
            <!--<controls:CarouselView  />-->

          </AbsoluteLayout.Children>

        </AbsoluteLayout>
        <RelativeLayout>
          <RelativeLayout.Children>
            <ContentView RelativeLayout.XConstraint="0" RelativeLayout.YConstraint="0" RelativeLayout.WidthConstraint="{ConstraintExpression Type=RelativeToParent, Property=Width, Factor=1}" RelativeLayout.HeightConstraint="{ConstraintExpression Type=RelativeToParent, Property=Height, Factor=1}">
              <ContentView.Content>
                <forms:CarouselView x:Name="CarouselZoos" ItemSelected="CarouselZoos_OnItemSelected" >
                  <forms:CarouselView.ItemTemplate>
                    <DataTemplate>
                      <Grid>
                        <Grid.RowDefinitions>
                          <RowDefinition Height="*"/>
                          <RowDefinition Height="Auto"/>
                        </Grid.RowDefinitions>
                        <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl}"/>
                      </Grid>
                    </DataTemplate>
                  </forms:CarouselView.ItemTemplate>
                </forms:CarouselView>
              </ContentView.Content>
            </ContentView>

          </RelativeLayout.Children>

        </RelativeLayout>
      </StackLayout.Children>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

我将CarouselView绑定到一个observablecollection：

    CarouselZoos.ItemsSource = new sliderCarousel().Slides;

    namespace DrLink.Controls
{
    public class slide
    {
        public string ImageUrl { get; set; }
        public string Name { get; set; }
    }

    public class sliderCarousel
    {
        public ObservableCollection<slide> Slides { get; set; }
        //public ObservableCollection<Grouping<string, slide>> MonkeysGrouped { get; set; }

        //public ObservableCollection<Zoo> Zoos { get; set; }

        public sliderCarousel()
        {

            //Monkeys = MonkeyHelper.Monkeys;
            //MonkeysGrouped = MonkeyHelper.MonkeysGrouped;
            Slides = new ObservableCollection<slide>
        {
            new slide
            {
                ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/23c1dd13-333a-459e-9e23-c3784e7cb434/2016-06-02_1049.png",
                Name = "Woodland Park Zoo"
            },
                new slide
            {
                ImageUrl =    "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/6b60d27e-c1ec-4fe6-bebe-7386d545bb62/2016-06-02_1051.png",
                Name = "Cleveland Zoo"
                },
            new slide
            {
                ImageUrl = "http://content.screencast.com/users/JamesMontemagno/folders/Jing/media/e8179889-8189-4acb-bac5-812611199a03/2016-06-02_1053.png",
                Name = "Phoenix Zoo"
            }
        };


        }
    }
}

现在我的问题是：我想在没有用户点击的情况下自动播放幻灯片。 2-我想改变动画类型（从左到右动画，从右到左动画，......）我该怎么做？非常感谢

Answer 1

调整Position属性似乎工作正常（在Android上测试）：

FileImageSource[] imageSources = new[] {
      FileImageSource.FromFile("GSP1.png"),
      FileImageSource.FromFile("GSP2.png")
    };

ObservableCollection<FileImageSource> imageCollection = new ObservableCollection<FileImageSource>(imageSources);

CarouselViewer.ItemsSource = imageSources;
Device.StartTimer(TimeSpan.FromSeconds(2), (Func<bool>)(() =>
    {
        CarouselViewer.Position = (CarouselViewer.Position + 1) % imageSources.Length;

         return true;
     }));

Answer 2

据我所知，CarouselView仅支持基于手势的页面切换。但是，你可以抓住the source code并通过一些额外的工作创建自己的自定义实现。在内部，控件使用私有SwitchView方法，您可以使用该方法自动切换页面。

使用Animation Extensions可以实现自动播放幻灯片。请查看this文章（结尾附近的自定义动画部分），了解有关如何重复制作动画的示例。

可以使用View Extensions设置从任何方向显示幻灯片的动画。再次参考上面链接的文章和Xamarin文档。

Xamarin CarouselView自动滑块

2 个答案: