Xamarin.Forms.CarouselViewがiOSで動作しない

Question

Visual StudioでXamarin.Formsを使用してiOSとAndroidの両方で使用するためにXamarin.Forms.CarouselViewを実装しようとしました。 Androidでは完全に動作しますが、iOSでは動作しません。 iOSでは最初のスライドが表示されますが、現在のスライドを変更するために左右にスワイプすることはできません。私は、iOSとAndroidプロジェクトの両方にNuGetパッケージをインストールしました。 XAMLは次のようになります。

<cv:CarouselView ItemsSource="{Binding Slider}" x:Name="CarouselSlider"> 
     <cv:CarouselView.ItemTemplate> 
      <DataTemplate> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="*"/> 
         <!--<RowDefinition Height="Auto"/>--> 
        </Grid.RowDefinitions> 
        <Image Grid.RowSpan="1" Aspect="AspectFill" Source="{Binding ImageUrl}" /> 
        <StackLayout BackgroundColor="#7F000000" Padding="12" VerticalOptions="Center" TranslationY="100"> 
         <Label TextColor="White" Text="{Binding Title}" FontSize="26" HorizontalOptions="Center" VerticalOptions="CenterAndExpand"/> 
         <Label TextColor="White" Text="{Binding TextBody}" FontSize="16" HorizontalOptions="Center" HorizontalTextAlignment="Center" VerticalOptions="CenterAndExpand"/> 
        </StackLayout> 
       </Grid> 
      </DataTemplate> 
     </cv:CarouselView.ItemTemplate> 
    </cv:CarouselView> 

そして、バックエンドは、次のようになります。

public partial class MainPage : ContentPage 
{ 
    public System.Collections.ObjectModel.ObservableCollection<SliderContent> Slider { get; set; } 

    public MainPage() 
    { 
     InitializeComponent(); 
     NavigationPage.SetHasNavigationBar(this, false); 

     Slider = new System.Collections.ObjectModel.ObservableCollection<SliderContent> 
     { 
      new SliderContent 
      { 
       Id = 1, 
       ImageUrl = "https://thumb9.shutterstock.com/display_pic_with_logo/1975943/561919966/stock-photo-brutal-strong-athletic-men-pumping-up-muscles-workout-bodybuilding-concept-background-muscular-561919966.jpg", 
       Title = "Aliquam et neque arcu", 
       TextBody = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porttitor erat arcu, vitae accumsan odio iaculis et." 
      }, 
       new SliderContent 
      { 
       Id = 2, 
       ImageUrl = "https://ifitlife.files.wordpress.com/2014/06/20140604-155437-57277345.jpg", 
       Title = "Donec lobortis sodales dui", 
       TextBody = "Morbi congue scelerisque vulputate. Vestibulum sit amet hendrerit justo. Nulla facilisi." 
       }, 
      new SliderContent 
      { 
       Id = 3, 
       ImageUrl = "https://uproxx.files.wordpress.com/2013/05/dmx-black.jpg?quality=100&w=650", 
       Title = "Vestibulum arcu elit", 
       TextBody = "Aliquam in maximus ante. Suspendisse facilisis posuere nulla quis hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas." 
      } 
     }; 

     Grid dotsGrid = DotsIndicator; 
     dotsGrid.HorizontalOptions = LayoutOptions.CenterAndExpand; 

     dotsGrid.ColumnDefinitions = new ColumnDefinitionCollection 
     { 
      new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }, 
      new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) }, 
      new ColumnDefinition { Width = new GridLength(1, GridUnitType.Star) } 
     }; 

     dotsGrid.RowDefinitions = new RowDefinitionCollection 
     { 
      new RowDefinition { Height = new GridLength(6, GridUnitType.Star) }, 
      new RowDefinition { Height = new GridLength(2, GridUnitType.Star) }, 
      new RowDefinition { Height = new GridLength(6, GridUnitType.Star) } 
     }; 

     int counter = 0; 

     foreach (var i in Slider) 
     { 
      Button label = new Button(); 
      if (Slider.First() == i) 
      { 
       label = new Button 
       { 
        BackgroundColor = Color.White, 
        BindingContext = i, 
        VerticalOptions = LayoutOptions.Fill, 
        WidthRequest = 20, 
        HeightRequest = 20, 
        BorderRadius = 30 
       }; 
      } 
      else 
      { 
       label = new Button 
       { 
        BackgroundColor = Color.Gray, 
        BindingContext = i, 
        VerticalOptions = LayoutOptions.Fill, 
        WidthRequest = 20, 
        HeightRequest = 20, 
        BorderRadius = 30 
       }; 
      } 

      dotsGrid.Children.Add(label, counter, 1); 
      counter++; 
     } 

     DotsIndicator = dotsGrid; 
     this.BindingContext = this; 
     CarouselSlider.ItemSelected += CarouselSlider_ItemSelected; 
    } 

    private void CarouselSlider_ItemSelected(object sender, SelectedItemChangedEventArgs e) 
    { 
     var item = e.SelectedItem as SliderContent; 
     foreach (var i in DotsIndicator.Children) 
     { 
      i.BackgroundColor = Color.Gray; 
      if (i.BindingContext == item) 
      { 
       i.BackgroundColor = Color.White; 
      } 
     } 

     return; 
    } 
} 

は、iOS上でXamarin.Forms.CarouselViewを使用して既知の問題はありますか私は何かが足りないのですか？

Answer 1

私はCarouselView周りStackLayoutタグを置くことによって、問題を解決しました。

Answer 2

私はXamarin.Forms CarouselViewをさまざまなiOSプロジェクトに使用していますが、正常に動作します。以下は私のサンプルコードです。詳細はmy blogをご覧ください。それが役に立てば幸い。

あなたのすべてのプロジェクト（PCL、アンドロイド、iOSとWindowsの場合）にCarouselView Nugetパッケージをインストール - CarouselViewは別のアセンブリであるので、あなたのXAMLページのルートにCarouselViewの名前空間を追加し、このようなあなたのページでそれを使用します。

<?xml version="1.0" encoding="UTF-8"?> 
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      x:Class="XYZ.Mobile.App.Controls.ValidationControls.Confirmation" 
      xmlns:valueconverters="clr-namespace:XYZ.Mobile.App.ValueConverters" 
      xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView"> 

    <StackLayout Grid.Row="1" 
       Orientation="Vertical"> 

     <cv:CarouselView x:Name="ConfirmationQuestionsCarousel" 
         ItemsSource="{Binding ConfirmationQuestions}"> 
     <cv:CarouselView.ItemTemplate> 
      <DataTemplate> 
      <!--You can now add other Xamarin controls in to your CarouselView--> 
      <Grid> 
       <Grid.RowDefinitions> 
       <RowDefinition Height="50"/> 
       <RowDefinition/> 
       <RowDefinition Height="50"/> 
       </Grid.RowDefinitions> 

       <Grid.ColumnDefinitions> 
       <ColumnDefinition/> 
       <ColumnDefinition/> 
       </Grid.ColumnDefinitions> 

       <Label Grid.Row="0" 
        Grid.ColumnSpan="2" 
        Text="SOME TEXT" 
        FontAttributes="Bold" /> 
       <Label Grid.Row="1" 
        Grid.ColumnSpan="2" 
        Text="{Binding Question}"/> 

       <Button Grid.Row="2" 
         Grid.Column="0" 
         Text="No" 
         StyleId="No" 
         CommandParameter="false" 
         Command="{Binding ToggleAgree}" 
         Clicked="OnQuestionAnswered" 
         BackgroundColor="{Binding Agreed, Converter={StaticResource BoolToToggleButtonColorConverter}, ConverterParameter='Invert'}"/> 
       <Button Grid.Row="2" 
         Grid.Column="1" 
         Text="Yes" 
         StyleId="Yes" 
         CommandParameter="true" 
         Command="{Binding ToggleAgree}" 
         Clicked="OnQuestionAnswered" 
         BackgroundColor="{Binding Agreed, Converter={StaticResource BoolToToggleButtonColorConverter}}"/> 

      </Grid> 
      </DataTemplate> 
     </cv:CarouselView.ItemTemplate> 
     </cv:CarouselView> 
    </StackLayout> 
</ContentView> 

さらに、初めてXamarin.FormsのCarouselViewを使用したとき、CarouselViewアイテムのCountを取得する際にいくつかの問題が発生しました。次のアイテムに正しくスワイプするには、このカウント情報が必要でした。 ConfirmationQuestionsCarousel.Count情報を取得しようとするたびに、「不明なメンバ」エラーが発生したため、最終的にカウント情報を取得するために次のコードを使用しました。

private void OnQuestionAnswered(object sender, EventArgs args) 
     { 
      var buttonClicked = sender as Button; 
      var buttonClickedAnswer = buttonClicked.StyleId; 

      // Ugly way to get the count 
      //var s = new List<object>(ConfirmationQuestionsCarousel.ItemsSource.Cast<object>()).Count; 
      // Better way to get the count 
      int count = 0; 

      foreach (var item in ConfirmationQuestionsCarousel.ItemsSource) 
      { 
       count++; 
      } 

      // This is to set the Carosel's Position - this is unfinished code, I put it here only as an example 
      ConfirmationQuestionsCarousel.Position = 3; 
     } 

Answer 3

コードを取得してコンパイルして実行でき、CarouselViewはiOSとAndroidの両方で動作しました。あなたのことを確認し

：ここ

2つのビュー間の遷移を示しています

• ライブラリ2.3.0-PRE2の最新バージョンを持っています。
• あなたの3つのプロジェクト（フォーム、iOSとAndroidの）

ノートでライブラリをインストールします。私はあなたが見つけるための良い方法も

（2.3.4.247）Xamarinフォームの最新バージョンを使用ライブラリーに関する既知の問題があれば、プロジェクトgithubを訪れています。