CarouselViewの項目をコードの背後から設定するにはどうすればよいですか？

Question

画像のItemsSourceにバインドされたCarouselViewがあります。 しかし、CarouselViewのインデックスを変更して、現在のImageを変更したいとします。

私はCarouselView.Positionを選択しなければならない要素のインデックスに使用しようとしました。しかし、残念ながら、これは動作しません。

どうすればこの問題を解決できますか？ ありがとう

Answer 1

私は選択しなければならない要素のインデックスにCarouselView.Positionを使用しようとしました。しかし、残念ながら、これは動作しません。

あなたがCarouselViewのItemsSourceのデータバインディングを使用しているので、あなたのイメージモデルのINotifyPropertyChangedインターフェイスを実装することができます。例えば

：背後

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
      xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
      xmlns:cv="clr-namespace:Xamarin.Forms;assembly=Xamarin.Forms.CarouselView" 
      x:Class="FormsIssue2.Page1"> 
    <Grid> 
     <cv:CarouselView ItemsSource="{Binding Zoos, Mode=OneWay}" x:Name="CarouselZoos"> 
      <cv:CarouselView.ItemTemplate> 
       <DataTemplate> 
        <Grid> 
         <Grid.RowDefinitions> 
          <RowDefinition Height="*" /> 
          <RowDefinition Height="Auto" /> 
         </Grid.RowDefinitions> 
         <Image Grid.RowSpan="2" Aspect="AspectFill" Source="{Binding ImageUrl, Mode=OneWay}" /> 
         <StackLayout Grid.Row="1" BackgroundColor="#80000000" Padding="12"> 
          <Label TextColor="White" Text="{Binding Name, Mode=OneWay}" FontSize="16" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" /> 
         </StackLayout> 
        </Grid> 
       </DataTemplate> 
      </cv:CarouselView.ItemTemplate> 
     </cv:CarouselView> 
    </Grid> 
</ContentPage> 

コード：項目が選択され

public partial class Page1 : ContentPage 
{ 
    public Page1() 
    { 
     InitializeComponent(); 

     Zoos = new ObservableCollection<Zoo> 
     { 
     new Zoo 
     { 
      ImageUrl = "http://wallpaper-gallery.net/images/image/image-13.jpg", 
      Name = "Woodland Park Zoo" 
     }, 
      new Zoo 
     { 
      ImageUrl = "https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg", 
      Name = "Cleveland Zoo" 
      }, 
     new Zoo 
     { 
      ImageUrl = "http://i.stack.imgur.com/WCveg.jpg", 
      Name = "Phoenix Zoo" 
     } 
    }; 

     //CarouselZoos.ItemsSource = Zoos; 
     this.BindingContext = this; 
     CarouselZoos.ItemSelected += CarouselZoos_ItemSelected; 
    } 

    private void CarouselZoos_ItemSelected(object sender, SelectedItemChangedEventArgs e) 
    { 
     var item = e.SelectedItem as Zoo; 
     if (item == null) 
      return; 
     item.ImageUrl = "https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png"; 
    } 

    public ObservableCollection<Zoo> Zoos { get; set; } 
} 

public class Zoo : INotifyPropertyChanged 
{ 
    private string _ImageUrl; 

    public string ImageUrl 
    { 
     get { return _ImageUrl; } 
     set 
     { 
      if (value != _ImageUrl) 
      { 
       _ImageUrl = value; 
       OnPropertyChanged("ImageUrl"); 
      } 
     } 
    } 

    private string _Name; 

    public string Name 
    { 
     get { return _Name; } 
     set 
     { 
      if (value != _Name) 
      { 
       _Name = value; 
       OnPropertyChanged("Name"); 
      } 
     } 
    } 

    public event PropertyChangedEventHandler PropertyChanged; 

    protected void OnPropertyChanged(string propertyName) 
    { 
     var handler = PropertyChanged; 
     if (handler != null) 
      handler(this, new PropertyChangedEventArgs(propertyName)); 
    } 
} 

たら、あなたはSelectedItemChangedEventArgsでこのアイテムのインスタンスを見つけることができますが、あなたはこのアイテムの画像ソースを変更することができます。

更新：

は、私たちの議論に基づいて、私はサムネイルのためにあなたのCarouselViewのアイテムのソースを考えると、あなたのサムネイル内の項目を選択すると、あなたの大きな画像のためのCarouselViewは、その後、同じ順序であります、あなたはサムネイルの位置を取得し、このような大きな画像のためCarouselViewをスクロールすることができます：アウト助けるため

var postion = CarouselThunbnails.Position; 
CarouselImages.Position = postion;