Xamarin CarouselView自動滑塊

我想使用CarouselView創建自動播放幻燈片。這裏是我的代碼：這是我的XAML頁面：Xamarin CarouselView自動滑塊

<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>

，我必將我的[輪播到一個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-我想改變動畫類型（從左到右的動畫，從右到左的動畫......），我該怎麼做？非常感謝

來源

2016-07-27 mina morsali

據我所知，CarouselView只支持基於手勢的頁面切換。但是，您可以抓取the source code並創建您自己的自定義實現，只需一點點額外的工作即可。該控件在內部使用專用SwitchView方法，您可以使用該方法自動切換頁面。

使用Animation Extensions可以實現自動運動幻燈片。看看this文章（自定義動畫部分接近尾聲），瞭解如何重複動畫的例子。

使用View Extensions可以使幻燈片動畫顯示從任何方向。再次參考上面鏈接的文章和Xamarin文檔。

來源

2016-07-27 19:26:56 hankide

我用Xamarin.Forms.CarouselView沒有XLA輪播畫面。 Xamarin CarouselView不是開源的：https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1 –

感謝您的澄清，我不知道這樣的預發佈控制。我必須檢查一下。順便說一句，Xamarin.Forms是開源的，您可以在[GitHub]（https://github.com/xamarin/Xamarin.Forms）上找到源代碼。 – hankide

只需調整位置屬性似乎只是正常工作（在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; 
    }));

來源

2017-09-11 15:18:41

Xamarin CarouselView自動滑塊

回答

相關問題