Xamarin.Forms CarouselView Etkileşimi
CarouselView
kullanıcı etkileşimini denetleen aşağıdaki özellikleri tanımlar:
CurrentItem
, türüne göreobject
, görüntülenen geçerli öğedir. Bu özelliğinTwoWay
varsayılan bağlama modu vardır ve görüntülenecek veri olmadığında birnull
değere sahiptir.CurrentItemChangedCommand
, türündekiICommand
geçerli öğe değiştiğinde yürütülür.CurrentItemChangedCommandParameter
, türündekiobject
parametresineCurrentItemChangedCommand
geçirilir.IsBounceEnabled
, türündedirbool
. Bu, öğesininCarouselView
bir içerik sınırında geri tepip zıplamayacağını belirtir. Varsayılan değer şudur:true
.IsSwipeEnabled
, türündedirbool
ve 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ündedirbool
ve öğesininCarouselView
öğ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ündekiint
, temel alınan koleksiyondaki geçerli öğenin dizinidir. Bu özellik varsayılan bağlama modunaTwoWay
sahiptir ve görüntülenecek veri olmadığında 0 değerine sahiptir.PositionChangedCommand
, türündekiICommand
konumu değiştiğinde yürütülür.PositionChangedCommandParameter
, türündekiobject
parametresinePositionChangedCommand
geçirilir.VisibleViews
, türündedirObservableCollection<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 ICommand
değ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 ICommand
değ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 TwoWay
sahiptir.
Özellik CarouselView.CurrentItem
verileri, türündeki CurrentItem
Monkey
bağ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 TwoWay
sahiptir.
Özellik CarouselView.Position
verileri, türündeki Position
int
bağlı görünüm modelinin özelliğine bağlanır. Varsayılan olarak, kullanıcı içinde CarouselView
kaydı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 CarouselView
görüntülenen öğelerde görsel değişiklikler başlatmak için kullanılabilir.
Aşağıdaki XAML örneğinde , , PreviousItem
NextItem
ve DefaultItem
görsel durumlarının CurrentItem
nası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 DataTemplate
türü olan bir TargetType
özellik değerine sahip bir içinde tanımlanabilirStyle
.
Aşağıdaki ekran görüntüleri , PreviousItem
ve 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ığı null
nesneyle temizlenebilir.
Geri döneni devre dışı bırak
Varsayılan olarak, CarouselView
içerik sınırlarında öğeleri geri alır. Bu özellik false
olarak 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 Loop
false
bu 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 false
olarak ayarlanarak IsSwipeEnabled
devre dışı bırakılabilir.