我想使用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绑定到一个可观察的集合：

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-我想改变动画类型（动画从左到右，动画从右到左，...）我怎么能做到这一点？非常感谢

3条答案

按热度按时间

2nbm6dog1#

仅仅调整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;
     }));

赞(0）回复(0）举报 2022-12-07

gcmastyq2#

据我所知，CarouselView只支持基于手势的页面切换。然而，您可以获取the source code并创建自己的自定义实现，只需做一点额外的工作。该控件内部使用一个私有的SwitchView方法，您可以使用该方法自动切换页面。
使用Animation Extensions可以实现自动播放幻灯片。请查看this文章（接近末尾的“自定义动画”部分），了解如何重复制作动画的示例。
使用View Extensions可以使幻灯片从任意方向显示。同样，请参阅上面链接的文章和Xamarin文档。

vq8itlhq3#

我在毛伊岛是怎么做到的。

carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Carousel");
    carouselView.ItemTemplate = new DataTemplate(() =>
    {

        Image image = new Image { Aspect = Aspect.Fill };
        image.SetBinding(Image.SourceProperty, "ImageSource");

        return image;
    });

    carouselView.Dispatcher.StartTimer(TimeSpan.FromSeconds(5), (Func<bool>)(() =>
    {
        carouselView.Position = (carouselView.Position + 1) % viewModel.Carousel.Count;

        return true;
    }));

Xamarin CarouselView自动滑块

3条答案

相关问题

热门标签

最新问答