How to show a pop-up message when clicking the image in the SfRotator control?
Steps to show a pop-up message when clicking the image in the SfRotator control:
Step 1: Add the rotator control in the content page.
Step 2: Create a Model and ViewModel classes in sample.
Step 3: Create a list of collections in the ViewModel class and add corresponding image value.
Step 4: Bind the list of collections into the Image property in ItemTemplate using a DataTemplate.
Step 5: Add the tap gesture to the view in the itemtemplate to show the popup.
The following code sample demonstrates how to show a pop-up message when clicking the image in the SfRotator control.
Xaml code for defining the SfRotator control:
XAML Code:
<StackLayout > <syncfusion:SfRotator x:Name="rotator" ItemsSource="{Binding Offers}" > <syncfusion:SfRotator.ItemTemplate> <DataTemplate> <Grid> <Grid.RowDefinitions> <RowDefinition Height="*" /> <RowDefinition Height="30" /> <RowDefinition Height="30" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Image Source="{Binding Image}" Grid.Row="0" Grid.Column="0"/> <StackLayout Orientation="Horizontal" Grid.Row="1" Grid.Column="0"> <Label Text="Keypoint:"/> <Label Text="{Binding KeyPoint}" /> </StackLayout> <StackLayout Orientation="Horizontal" Grid.Row="2" Grid.Column="0"> <Label Text="Description:"/> <Label Text="{Binding Description}" /> </StackLayout> <Grid.GestureRecognizers> <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" NumberOfTapsRequired="1"> </TapGestureRecognizer> </Grid.GestureRecognizers> </Grid> </DataTemplate> </syncfusion:SfRotator.ItemTemplate> </syncfusion:SfRotator> </StackLayout>
|
C# Code:
Model :
public class RotatorModel
{
public RotatorModel(string imageString,string keypoint ,string descrption)
{
Image = imageString;
KeyPoint = keypoint;
Description = descrption;
}
private String _image;
public String Image
{
get { return _image; }
set { _image = value; }
}
private String _keypoint;
public String KeyPoint
{
get { return _keypoint; }
set { _keypoint = value; }
}
private String _descrption;
public String Description
{
get { return _descrption; }
set { _descrption = value; }
}
}
ViewModel:
public class RotatorViewModel : INotifyPropertyChanged
{
public RotatorViewModel()
{
for(int i=0;i<ImageName.Count;i++)
{
Offers.Add(new RotatorModel(ImageName[i], KeyPoint[i], Description[i]));
}
}
private List<RotatorModel> offer = new List<RotatorModel>();
public List<RotatorModel> Offers
{
get { return offer; }
set { offer = value;
}
}
private string other;
public string Other
{
get
{
return other;
}
set
{
other = value;
}
}
// Add the Image
public List<string> ImageName = new List<string>() { "movie1.png", "movie2.png", "movie3.png", "movie4.png", "movie5.png" };
// Add the Keypoint
public List<string> KeyPoint = new List<string>() { "Agile Software", "Delphi", "NancyFX", "Rosyln", "Spark" };
// Add the Description
public List<string> Description = new List<string>() { "Book related to Agile Software development", "Book related to Delphi Succinctly", "Book related to NancyFX Succinctly", "Book related to Rosyln Succinctly", "Book related to Spark Succinctly" };
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
{
var handler = PropertyChanged;
if (handler != null)
handler(this, new PropertyChangedEventArgs(propertyName));
}
}
Code to show the pop-up message:
public partial class MainPage : ContentPage
{
RotatorViewModel rotatorViewModel;
public MainPage()
{
InitializeComponent();
rotatorViewModel = new RotatorViewModel();
this.BindingContext = rotatorViewModel;
}
private void TapGestureRecognizer_Tapped(object sender, EventArgs e)
{
DisplayAlert("Other Information", "The selected index is "+rotator.SelectedIndex, "Ok");
}
}
Sample image:
Please find the sample from the following link: Sample
Conclusion
I hope you enjoyed learning about how to show a pop-up message when clicking the image in the SfRotator control.
You can refer to our Xamarin.Forms Rotator feature tour page to know about its other groundbreaking feature representations. You can also explore our Xamarin.Forms Rotator documentation to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
