How to get details of a selected item?
You can get the properties of SelectedItem by casting the sender to SfCarousel in the SelectionChanged or ItemTapped event.
SelectedIndex property
You can get the index of the SelectedItem by using the SelectedIndex property.
SelectedItem property
The SelectedItem property stores the value of the current item that has been selected as an object.
MainWindow.Xaml
<syncfusion:SfCarousel x:Name="carousel" ItemsSource="{Binding Images}" Margin="10"
SelectedIndex="2"
VerticalAlignment="Top" Height="500"
HorizontalAlignment="Left"
Offset="60"
SelectedItemOffset="120"
RotationAngle="45"
ZOffset="0"
ScaleOffset="0.7">
<syncfusion:SfCarousel.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="4">
<Image Source="{Binding Image}" Stretch="Uniform" />
</Border>
</DataTemplate>
</syncfusion:SfCarousel.ItemTemplate>
</syncfusion:SfCarousel>
The above code selects the third item on load as displayed in the following screenshot.
Figure 1: SelectedItem
SelectionChanged event
You can get the details of the SelectedItem, by casting the sender as SfCarousel. The following code displays how to get the item’s properties.
MainPage.xaml
<Grid >
<Grid.DataContext>
<local:CarousalProperties/>
</Grid.DataContext>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<syncfusion:SfCarousel x:Name="carousel" ItemsSource="{Binding Images}" Margin="10 50 0 0"
SelectedIndex="2"
VerticalAlignment="Top" Height="500"
HorizontalAlignment="Left"
Offset="60"
SelectedItemOffset="120"
RotationAngle="45"
ZOffset="0"
ScaleOffset="0.7"
SelectionChanged="carousel_SelectionChanged" Tapped="carousel_Tapped">
<syncfusion:SfCarousel.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="4">
<Image Source="{Binding Image}" Stretch="Uniform" />
</Border>
</DataTemplate>
</syncfusion:SfCarousel.ItemTemplate>
</syncfusion:SfCarousel>
<StackPanel Grid.Row="1">
<TextBlock x:Name="tappedText" Margin="10 5" FontSize="18"/>
<TextBlock x:Name="selectedText" Margin="10 5" FontSize="18"/>
</StackPanel>
</Grid>
CarousalProperties.cs
public class CarousalProperties
{
public CarousalProperties()
{
Images = new ObservableCollection<Person>();
for (int iCount = 11; iCount <= 15; iCount++)
{
images.Add(new Person() { Name=iCount.ToString(), Image = "Assets/" + iCount + ".jpg" });
}
}
private ObservableCollection<Person> images;
public ObservableCollection<Person> Images
{
get { return images; }
set { images = value; }
}
}
public class Person
{
public string Name { get; set; }
public string Image { get; set; }
public Person()
{ }
public Person(string name, string image)
{
Name = name;
Image = image;
}
}
MainPage.xaml.cs
private void carousel_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
selectedText.Text = "Selection Changed : " + "\n Selected Index = " + (sender as SfCarousel).SelectedIndex.ToString();
}
private void carousel_Tapped(object sender, TappedRoutedEventArgs e)
{
tappedText.Text = "Item Tapped : " + "\n Item Name = " + ((sender as SfCarousel).SelectedItem as Person).Name + "\n Item Image = " + ((sender as SfCarousel).SelectedItem as Person).Image;
}
The following screenshot displays the information after tapping on the second item.
Figure 2: SelectionChanged
