2017-05-21 4 views
0

Visual Studio의 Xamarin.Forms를 사용하여 iOS 및 Android에서 사용할 Xamarin.Forms.CarouselView를 구현하려고했습니다. Android에서 완벽하게 작동하지만 iOS에서는 작동하지 않습니다. iOS에서는 첫 번째 슬라이드를 표시하지만 현재 슬라이드를 변경하려면 오른쪽 또는 왼쪽으로 스 와이프 할 수 없습니다. iOS 및 Android 프로젝트 모두에 NuGet 패키지를 설치했습니다.Xamarin.Forms.CarouselView가 iOS에서 작동하지 않습니다.

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

을 그리고 백엔드는 다음과 같습니다 : :이 XAML은 다음과 같습니다

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를 사용하여 알려진 문제가 있습니까 아니면 내가 뭔가를 놓친 거지?

답변

0

CarouselView 주위에 StackLayout 태그를 넣어서이 문제를 해결했습니다.

0

다양한 iOS 프로젝트에 Xamarin.Forms CarouselView을 사용했지만 정상적으로 작동합니다. 다음은 샘플 코드입니다. 자세한 내용은 my blog을 참조하십시오. 희망이 도움이됩니다.

귀하의 모든 프로젝트 (PCL, 안드로이드, iOS 및 윈도우)에 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 항목의 개수를 얻는 동안 몇 가지 문제가있었습니다. 다음 항목으로 올바르게 스 와이프하기 위해이 개수 정보가 필요했습니다. 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; 
     } 
0

나는 코드를 가져 와서 컴파일하고 실행할 수 있었으며 CarouselView는 iOS와 Android에서 모두 작동했습니다.

여기에 두 개의보기 사이의 전환을 보여주는입니다 :

showing the transition

확실히 당신에게 확인 :

  • 라이브러리 2.3.0-PRE2의 최신 버전.
  • 하여 3 개 프로젝트 (양식, iOS 및 Android)에

주 라이브러리를 설치 : 나는 자 마린 양식의 최신 버전 (2.3.4.247)

또한

당신이 찾을 수있는 좋은 방법을 사용 라이브러리에 알려진 문제가있는 경우 프로젝트 github을 방문합니다.

+0

저도 같은 문제에 직면 해 있습니다. 제발 저를 도와주세요. –

관련 문제