Add pictures on CardView

[LENARD LOPEZ]

how to add pictures, combo box, combo box with search, check box at card view?

example attached below.

thank you

Attachment: Image_1_2211927d.7z

[Venkateshwaran Ramdoss]

Hi Lenard 

Thank you for contacting Syncfusion Support. 

This reported requirement can be achieved by customizing the ItemTemplate and HeaderTemplate of CardView. Please find the code snippet in the below. 

Code Snippets: [C#] 

 

   <syncfusion:CardView ItemsSource="{Binding collection}" Orientation="Horizontal" > 

 

            <syncfusion:CardView.HeaderTemplate> 

                <DataTemplate> 

                    <Grid > 

                        <Grid.ColumnDefinitions> 

                            <ColumnDefinition /> 

                            <ColumnDefinition /> 

                        </Grid.ColumnDefinitions> 

                        <Image Source="{Binding Path=headerimage}" /> 

                        <TextBlock Text="{Binding Path=recordnum}" HorizontalAlignment="Center" VerticalAlignment="Center" Grid.Column="1"/> 

                    </Grid> 

                </DataTemplate> 

            </syncfusion:CardView.HeaderTemplate> 

 

            <syncfusion:CardView.ItemTemplate > 

                <DataTemplate > 

 

                    <ListBox Width="500" > 

 

                        <ListBoxItem HorizontalContentAlignment="Stretch" Padding="1"> 

 

                            <Grid > 

 

                                <Grid.ColumnDefinitions> 

 

                                    <ColumnDefinition Width="75"/> 

 

                                    <ColumnDefinition Width="*"/> 

 

                                </Grid.ColumnDefinitions> 

 

                                <TextBlock Text="TradeMark"/> 

 

                                <TextBlock  Grid.Column="1" Text="{Binding trademark}" /> 

 

                            </Grid> 

 

                        </ListBoxItem> 

 

                        <ListBoxItem HorizontalContentAlignment="Stretch" Padding="1"> 

 

                            <Grid > 

 

                                <Grid.ColumnDefinitions> 

 

                                    <ColumnDefinition Width="75"/> 

 

                                    <ColumnDefinition Width="*"/> 

 

                                </Grid.ColumnDefinitions> 

 

                                <TextBlock Text="Name:"/> 

 

                                <TextBlock  Grid.Column="1" Text="{Binding Name}" /> 

 

                            </Grid> 

 

                        </ListBoxItem> 

 

                        <ListBoxItem HorizontalContentAlignment="Stretch" Padding="1"> 

 

                            <Grid > 

 

                                <Grid.ColumnDefinitions> 

 

                                    <ColumnDefinition Width="75"/> 

 

                                    <ColumnDefinition Width="*"/> 

 

                                </Grid.ColumnDefinitions> 

 

                                <TextBlock Text="Modification:"/> 

 

                                <TextBlock Grid.Column="1" Text="{Binding Modification}" /> 

 

                            </Grid> 

 

                        </ListBoxItem> 

 

                        <ListBoxItem HorizontalContentAlignment="Stretch" Padding="1"> 

 

                            <Grid > 

 

                                <Grid.ColumnDefinitions> 

 

                                    <ColumnDefinition Width="75"/> 

 

                                    <ColumnDefinition Width="*"/> 

 

                                </Grid.ColumnDefinitions> 

 

                                <TextBlock Text="Category:"/> 

 

                                <TextBlock  Grid.Column="1" Text="{Binding Category}" /> 

 

                            </Grid> 

 

                        </ListBoxItem> 

 

                        <ListBoxItem HorizontalContentAlignment="Stretch" Padding="1"> 

 

                            <Grid > 

 

                                <Grid.ColumnDefinitions> 

 

                                    <ColumnDefinition Width="75"/> 

 

                                    <ColumnDefinition Width="*"/> 

 

                                </Grid.ColumnDefinitions> 

 

                                <TextBlock Text="Body Style:"/> 

 

                                <TextBlock  Grid.Column="1" Text="{Binding BodyStyle}" /> 

 

                            </Grid> 

 

                        </ListBoxItem> 

 

                        <ListBoxItem  Padding="1"> 

 

                            <Grid> 

 

                              <Image  Grid.Column="1" Stretch="None" Source="{Binding Photo}"/> 

                            </Grid> 

 

                        </ListBoxItem> 

 

                        <ListBoxItem HorizontalContentAlignment="Stretch" Padding="1"> 

 

                            <Grid > 

 

                                <Grid.ColumnDefinitions> 

 

                                    <ColumnDefinition Width="75"/> 

 

                                    <ColumnDefinition Width="*"/> 

 

                                </Grid.ColumnDefinitions> 

 

                                <TextBlock Text="Price:"/> 

 

                                <TextBox  Grid.Column="1" Text="{Binding Price}" /> 

 

                            </Grid> 

 

                        </ListBoxItem> 

 

                        <ListBoxItem HorizontalContentAlignment="Stretch" Padding="1"> 

 

                            <Grid > 

 

                                <Grid.ColumnDefinitions> 

 

                                    <ColumnDefinition Width="75"/> 

 

                                    <ColumnDefinition Width="*"/> 

 

                                </Grid.ColumnDefinitions> 

 

                                <TextBlock Text="Stock:"/> 

 

                                <CheckBox  Grid.Column="1" IsChecked="True"/> 

 

                            </Grid> 

 

                        </ListBoxItem> 

 

                    </ListBox> 

                </DataTemplate> 

            </syncfusion:CardView.ItemTemplate> 

 

         

 

        </syncfusion:CardView> 

 

 

We have prepared a sample for your reference and it can be downloaded from the below link. 

Sample: CardViewSample 

 

Screenshot 

 

 

Please check the above solution and let us know if it is helpful. 

Regards, 

Venkateshwaran V.R. 

[LENARD LOPEZ]

i'll try this sample.

thank you Venkateshwaran

[Mallika Kannan]

Hi Lenard 

 

Thanks for your update. 

 

We will wait until hear from you. 

 

Regards, 

Mallika