Xamarin CarouselView 자동 슬라이더

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> 

와 나는 ObservableCollection에 내 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 애니메이션 유형 (왼쪽에서 오른쪽으로 애니메이션, 오른쪽에서 왼쪽으로 애니메이션)을 변경하고 싶습니다. 어떻게하면됩니까? 고마워요

Answer 1

알고있는 한, CarouselView은 제스처 기반 페이지 전환 만 지원합니다. 그러나 the source code을 잡고 약간의 추가 작업만으로 사용자 지정 구현을 만들 수 있습니다. 내부적으로 컨트롤은 페이지를 자동으로 전환하는 데 사용할 수있는 개인 SwitchView 메서드를 사용합니다.

슬라이드를 자동 실행하려면 Animation Extensions을 사용하십시오. 반복적으로 애니메이션을 적용하는 방법에 대한 예제는 this 기사 (끝 부분의 맞춤 애니메이션 섹션)을 참조하십시오.

슬라이드를 모든 방향에서 나타나게하려면 View Extensions을 사용하여 애니메이션을 적용 할 수 있습니다. 앞서 링크 된 기사와 Xamarin 문서를 참조하십시오.

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

그냥 Position 속성을 조정하는 것은 (안드로이드 테스트) 잘 작동하는 것 같다. Xamarin CarouselView는 오픈 소스가 아닙니다 : https://www.nuget.org/packages/Xamarin.Forms.CarouselView/2.3.0-pre1