Custom Item Template

[Mahmoud Wagdy]

Can you send a sample of creating sfPicker with custom item template contains a grid showing 2 columns one for title and another for image.

i tried to achive this using a grid or stacklayout inside itemTemplate but labels and images are not binded.

[Sakthivel Palaniyappan]

Hi Mohamoud,

Greetings from Syncfusion.

We have analyzed your query and created sample with custom item template as like below code snippet.

Model: 

public class PickerModel 

    { 

        private string fruitName; 

  

        public string FruitName 

        { 

            get { return fruitName; } 

            set { fruitName = value; } 

        } 

  

        private string fruitImage; 

  

        public string FruitImage 

        { 

            get { return fruitImage; } 

            set { fruitImage = value; } 

        } 

  

        public PickerModel(string label, string pickerIamge) 

        { 

            FruitName = label; 

            FruitImage = pickerIamge; 

        } 

    } 

ViewModel: 

public class PickerViewModel 

    { 

  

        private ObservableCollection<PickerModel> fruits; 

  

        public ObservableCollection<PickerModel> Fruits 

        { 

            get { return fruits; } 

            set { fruits = value; } 

        } 

  

        public PickerViewModel() 

        { 

            Fruits = new ObservableCollection<PickerModel>(); 

  

            Fruits.Add(new PickerModel("Apple", "Apple.jpg")); 

            Fruits.Add(new PickerModel("Blueberry", "Blueberry.jpg")); 

            Fruits.Add(new PickerModel("CustardApple", "CustardApple.jpg")); 

            Fruits.Add(new PickerModel("Kiwi", "Kiwi.jpg")); 

            Fruits.Add(new PickerModel("Lemon", "Lemon.jpg")); 

            Fruits.Add(new PickerModel("Strawberry", "Strawberry.jpg")); 

            Fruits.Add(new PickerModel("Lemon", "Lemon.jpg")); 

            Fruits.Add(new PickerModel("WaterMelon", "WaterMelon.jpg")); 

        } 

  

    } 

XAML: 

<ContentPage.BindingContext> 

  

        <localSample:PickerViewModel/> 

  

    </ContentPage.BindingContext> 

  

            <syncfusion:SfPicker x:Name="picker" PickerMode="Dialog" IsOpen="False" PickerHeight="300" PickerWidth="250" HeaderText="Select a Fruits" ItemsSource="{Binding Fruits}" > 

                <syncfusion:SfPicker.ItemTemplate> 

                    <DataTemplate> 

                        <Grid> 

                            <Grid.ColumnDefinitions> 

                                <ColumnDefinition Width="*"/> 

                                <ColumnDefinition Width="*"/> 

                            </Grid.ColumnDefinitions> 

                            <Label Grid.Column="1" VerticalTextAlignment="Center" HorizontalTextAlignment="Start" Text="{Binding FruitName}"/> 

                            <Image Grid.Column="0" HorizontalOptions="End" VerticalOptions="Center" Source="{Binding FruitImage}"/> 

                        </Grid> 

                    </DataTemplate> 

                </syncfusion:SfPicker.ItemTemplate> 

            </syncfusion:SfPicker> 

    </ContentPage.Content> 

Output:



We have created sample based on your requirement, please find the sample from below.

Sample link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfPickerSample1314674455.zip

Please get back us, if you have any concern. 

Regards,
Sakthivel P.