Xamarin.Forms CarouselView Etkileşimi

CarouselView kullanıcı etkileşimini denetleen aşağıdaki özellikleri tanımlar:

• CurrentItem, türüne göre object, görüntülenen geçerli öğedir. Bu özelliğin TwoWayvarsayılan bağlama modu vardır ve görüntülenecek veri olmadığında bir null değere sahiptir.
• CurrentItemChangedCommand, türündeki ICommandgeçerli öğe değiştiğinde yürütülür.
• CurrentItemChangedCommandParameter, türündeki objectparametresine CurrentItemChangedCommandgeçirilir.
• IsBounceEnabled, türündedir bool. Bu, öğesinin CarouselView bir içerik sınırında geri tepip zıplamayacağını belirtir. Varsayılan değer şudur: true.
• IsSwipeEnabled, türündedir boolve bir çekme hareketinin görüntülenen öğeyi değiştirip değiştirmeyeceğini belirler. Varsayılan değer şudur: true.
• Loop, türündedir boolve öğesinin CarouselView öğe koleksiyonuna döngüye alınan erişim sağlayıp sağlamadığını belirler. Varsayılan değer şudur: true.
• Position, türündeki int, temel alınan koleksiyondaki geçerli öğenin dizinidir. Bu özellik varsayılan bağlama moduna TwoWaysahiptir ve görüntülenecek veri olmadığında 0 değerine sahiptir.
• PositionChangedCommand, türündeki ICommandkonumu değiştiğinde yürütülür.
• PositionChangedCommandParameter, türündeki objectparametresine PositionChangedCommandgeçirilir.
• VisibleViews, türündedir ObservableCollection<View>. Bu, şu anda görünür durumda olan öğelerin nesnelerini içeren salt okunur bir özelliktir.

Bu özelliklerin tümü nesneler tarafından BindableProperty desteklenir, bu da özelliklerin veri bağlamalarının hedefleri olabileceği anlamına gelir.

CarouselView , kullanıcı kaydırması nedeniyle veya bir CurrentItemChanged uygulama özelliği ayarlarken CurrentItem özellik değiştiğinde tetiklenen bir olayı tanımlar. Olaya CurrentItemChangedEventArgs eşlik eden nesnenin CurrentItemChanged iki objectözelliği vardır:

• PreviousItem – özellik değişikliğinden sonra önceki öğe.
• CurrentItem – özellik değiştirildikten sonra geçerli öğe.

CarouselView ayrıca, kullanıcı kaydırması nedeniyle veya bir PositionChanged uygulama özelliği ayarlarken Position özellik değiştiğinde tetiklenen bir olayı tanımlar. Olaya PositionChangedEventArgs eşlik eden nesnenin PositionChanged iki intözelliği vardır:

• PreviousPosition – özellik değişikliğinden sonra önceki konum.
• CurrentPosition – özellik değişikliğinden sonra geçerli konum.

Geçerli öğe değişikliğine yanıt verme

Şu anda görüntülenen öğe değiştiğinde CurrentItem , özelliği öğenin değerine ayarlanır. Bu özellik değiştiğinde CurrentItemChangedCommand , öğesine geçirilen ICommanddeğeriyle CurrentItemChangedCommandParameter yürütülür. Özelliği Position daha sonra güncelleştirilir ve CurrentItemChanged olay tetikler.

Önemli

Position Özellik değiştiğinde CurrentItem özelliği değişir. Bunun sonucunda PositionChangedCommand yürütülür ve PositionChanged olay tetiklenir.

Etkinlik

Aşağıdaki XAML örneği, geçerli öğe değişikliğine yanıt vermek için bir olay işleyicisi kullanan bir CarouselView örneği gösterir:

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChanged="OnCurrentItemChanged">
    ...
</CarouselView>

Eşdeğer C# kodu:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.CurrentItemChanged += OnCurrentItemChanged;

Bu örnekte, OnCurrentItemChanged olay çalıştırıldığında CurrentItemChanged olay işleyicisi yürütülür:

void OnCurrentItemChanged(object sender, CurrentItemChangedEventArgs e)
{
    Monkey previousItem = e.PreviousItem as Monkey;
    Monkey currentItem = e.CurrentItem as Monkey;
}

Bu örnekte, OnCurrentItemChanged olay işleyicisi önceki ve geçerli öğeleri kullanıma sunar:

Command

Aşağıdaki XAML örneği, geçerli öğe değişikliğine yanıt vermek için bir komut kullanan bir gösterir CarouselView :

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItemChangedCommand="{Binding ItemChangedCommand}"
              CurrentItemChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=CurrentItem}">
    ...
</CarouselView>

Eşdeğer C# kodu:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandProperty, "ItemChangedCommand");
carouselView.SetBinding(CarouselView.CurrentItemChangedCommandParameterProperty, new Binding("CurrentItem", source: RelativeBindingSource.Self));

Bu örnekte, CurrentItemChangedCommand özellik özelliğine ItemChangedCommand bağlanır ve özellik değerini bağımsız değişken olarak geçirir CurrentItem . Ardından ItemChangedCommand , geçerli öğe değişikliğine gerektiği gibi yanıt verebilir:

public ICommand ItemChangedCommand => new Command<Monkey>((item) =>
{
    PreviousMonkey = CurrentMonkey;
    CurrentMonkey = item;
});

Bu örnekte, ItemChangedCommand önceki ve geçerli öğeleri depolayan nesneler güncelleştirildi.

Değişen konuma yanıt verme

Şu anda görüntülenen öğe değiştiğinde Position , özellik temel koleksiyondaki geçerli öğenin dizinine ayarlanır. Bu özellik değiştiğinde PositionChangedCommand , öğesine geçirilen ICommanddeğeriyle PositionChangedCommandParameter yürütülür. Olay PositionChanged daha sonra tetikler. Position Özellik program aracılığıyla değiştirildiyse, CarouselView değeriyle ilgili öğeye Position kaydırılır.

Not

özelliğinin Position 0 olarak ayarlanması, temel koleksiyondaki ilk öğenin görüntülenmesine neden olur.

Etkinlik

Aşağıdaki XAML örneği, özellik değişikliğine yanıt vermek için bir olay işleyicisi Position kullanan bir CarouselView gösterir:

<CarouselView ItemsSource="{Binding Monkeys}"              
              PositionChanged="OnPositionChanged">
    ...
</CarouselView>

Eşdeğer C# kodu:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.PositionChanged += OnPositionChanged;

Bu örnekte, OnPositionChanged olay çalıştırıldığında PositionChanged olay işleyicisi yürütülür:

void OnPositionChanged(object sender, PositionChangedEventArgs e)
{
    int previousItemPosition = e.PreviousPosition;
    int currentItemPosition = e.CurrentPosition;
}

Bu örnekte, OnCurrentItemChanged olay işleyicisi önceki ve geçerli konumları kullanıma sunar:

Command

Aşağıdaki XAML örneği, özelliğin değiştirilmesine Position yanıt vermek için bir komut kullanan bir gösterirCarouselView:

<CarouselView ItemsSource="{Binding Monkeys}"
              PositionChangedCommand="{Binding PositionChangedCommand}"
              PositionChangedCommandParameter="{Binding Source={RelativeSource Self}, Path=Position}">
    ...
</CarouselView>

Eşdeğer C# kodu:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.PositionChangedCommandProperty, "PositionChangedCommand");
carouselView.SetBinding(CarouselView.PositionChangedCommandParameterProperty, new Binding("Position", source: RelativeBindingSource.Self));

Bu örnekte, PositionChangedCommand özellik özelliğine PositionChangedCommand bağlanır ve özellik değerini bağımsız değişken olarak geçirir Position . Daha PositionChangedCommand sonra, gerektiğinde değişen konuma yanıt verebilir:

public ICommand PositionChangedCommand => new Command<int>((position) =>
{
    PreviousPosition = CurrentPosition;
    CurrentPosition = position;
});

Bu örnekte, PositionChangedCommand önceki ve geçerli konumları depolayan nesneler güncelleştirildi.

Geçerli öğeyi önceden ayarlama

içindeki CarouselView geçerli öğe, özelliği öğe olarak ayarlanarak CurrentItem program aracılığıyla ayarlanabilir. Aşağıdaki XAML örneği, geçerli öğeyi önceden seçen bir CarouselView örneği gösterir:

<CarouselView ItemsSource="{Binding Monkeys}"
              CurrentItem="{Binding CurrentItem}">
    ...
</CarouselView>

Eşdeğer C# kodu:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.CurrentItemProperty, "CurrentItem");

Not

özelliği varsayılan CurrentItem bağlama moduna TwoWaysahiptir.

Özellik CarouselView.CurrentItem verileri, türündeki CurrentItemMonkeybağlı görünüm modelinin özelliğine bağlanır. Varsayılan olarak, kullanıcı geçerli öğeyi değiştirirse özelliğin CurrentItem değeri geçerli Monkey nesneye ayarlanacak şekilde bir TwoWay bağlama kullanılır. CurrentItem özelliği sınıfında tanımlanırMonkeysViewModel:

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public ObservableCollection<Monkey> Monkeys { get; private set; }

    public Monkey CurrentItem { get; set; }

    public MonkeysViewModel()
    {
        // ...
        CurrentItem = Monkeys.Skip(3).FirstOrDefault();
        OnPropertyChanged("CurrentItem");
    }
}

Bu örnekte, CurrentItem özelliği koleksiyondaki Monkeys dördüncü öğeye ayarlanır:

Konumu önceden ayarlama

içinde CarouselView görüntülenen öğe, özelliği temel koleksiyondaki Position öğenin dizinine ayarlanarak program aracılığıyla ayarlanabilir. Aşağıdaki XAML örneği, görüntülenen öğeyi ayarlayan bir CarouselView gösterir:

<CarouselView ItemsSource="{Binding Monkeys}"
              Position="{Binding Position}">
    ...
</CarouselView>

Eşdeğer C# kodu:

CarouselView carouselView = new CarouselView();
carouselView.SetBinding(ItemsView.ItemsSourceProperty, "Monkeys");
carouselView.SetBinding(CarouselView.PositionProperty, "Position");

Not

özelliği varsayılan Position bağlama moduna TwoWaysahiptir.

Özellik CarouselView.Position verileri, türündeki Positionintbağlı görünüm modelinin özelliğine bağlanır. Varsayılan olarak, kullanıcı içinde CarouselViewkaydırılırsa özelliğin Position değeri görüntülenen öğenin dizinine ayarlanacak şekilde bir TwoWay bağlama kullanılır. Position özelliği sınıfında tanımlanırMonkeysViewModel:

public class MonkeysViewModel : INotifyPropertyChanged
{
    // ...
    public int Position { get; set; }

    public MonkeysViewModel()
    {
        // ...
        Position = 3;
        OnPropertyChanged("Position");
    }
}

Bu örnekte, Position özelliği koleksiyondaki Monkeys dördüncü öğeye ayarlanır:

Görsel durumları tanımlama

CarouselView dört görsel durumu tanımlar:

• CurrentItem şu anda görüntülenen öğenin görsel durumunu temsil eder.
• PreviousItem , daha önce görüntülenen öğenin görsel durumunu temsil eder.
• NextItem bir sonraki öğenin görsel durumunu temsil eder.
• DefaultItem öğelerin geri kalanı için görsel durumu temsil eder.

Bu görsel durumlar, tarafından CarouselViewgörüntülenen öğelerde görsel değişiklikler başlatmak için kullanılabilir.

Aşağıdaki XAML örneğinde , , PreviousItemNextItemve DefaultItem görsel durumlarının CurrentItemnasıl tanımlanacağı gösterilmektedir:

<CarouselView ItemsSource="{Binding Monkeys}"
              PeekAreaInsets="100">
    <CarouselView.ItemTemplate>
        <DataTemplate>
            <StackLayout>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="CurrentItem">
                            <VisualState.Setters>
                                <Setter Property="Scale"
                                        Value="1.1" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="PreviousItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="NextItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.5" />
                            </VisualState.Setters>
                        </VisualState>
                        <VisualState x:Name="DefaultItem">
                            <VisualState.Setters>
                                <Setter Property="Opacity"
                                        Value="0.25" />
                            </VisualState.Setters>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>

                <!-- Item template content -->
                <Frame HasShadow="true">
                    ...
                </Frame>
            </StackLayout>
        </DataTemplate>
    </CarouselView.ItemTemplate>
</CarouselView>

Bu örnekte, CurrentItem görsel durumu tarafından CarouselView görüntülenen geçerli öğenin özelliğinin varsayılan değeri olan 1'den 1.1'e değiştirileceğini Scale belirtir. PreviousItem ve NextItem görsel durumları, geçerli öğeyi çevreleyen öğelerin 0,5 değeriyle Opacity görüntüleneceğini belirtir. Görsel DefaultItem durumu, tarafından CarouselView görüntülenen öğelerin geri kalanının 0,25 değeriyle Opacity görüntüleneceğini belirtir.

Not

Alternatif olarak, görsel durumları, özellik değeri olarak ItemTemplate ayarlanan kök öğesinin DataTemplatetürü olan bir TargetType özellik değerine sahip bir içinde tanımlanabilirStyle.

Aşağıdaki ekran görüntüleri , PreviousItemve NextItem görsel durumlarını gösterirCurrentItem:

Görsel durumlar hakkında daha fazla bilgi için bkz Xamarin.Forms . Visual State Manager.

Geçerli öğeyi temizleme

CurrentItem özelliği olarak ayarlanarak veya bağlandığı nullnesneyle temizlenebilir.

Geri döneni devre dışı bırak

Varsayılan olarak, CarouselView içerik sınırlarında öğeleri geri alır. Bu özellik falseolarak ayarlanarak IsBounceEnabled devre dışı bırakılabilir.

Devre dışı bırakma döngüsü

Varsayılan olarak, CarouselView öğe koleksiyonuna döngüyle erişim sağlar. Bu nedenle, koleksiyondaki ilk öğeden geriye doğru çekme, koleksiyondaki son öğeyi görüntüler. Benzer şekilde, koleksiyondaki son öğeden ileri doğru çekme işlemleri koleksiyondaki ilk öğeye döner. Özelliği olarak ayarlanarak Loopfalsebu davranış devre dışı bırakılabilir.

Çekme etkileşimlerini devre dışı bırakma

Varsayılan olarak, CarouselView kullanıcıların bir çekme hareketi kullanarak öğeler arasında hareket etmesine izin verir. Bu çekme etkileşimi özelliği falseolarak ayarlanarak IsSwipeEnabled devre dışı bırakılabilir.

İlgili bağlantılar

• Xamarin.Forms Visual State Manager