We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add pictures on CardView

Thread ID:

Created:

Updated:

Platform:

Replies:

132863 Sep 26,2017 02:46 AM UTC Sep 29,2017 05:17 AM UTC WPF 3
loading
Tags: CardView
LENARD LOPEZ
Asked On September 26, 2017 08:16 AM UTC

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 [Syncfusion]
Replied On September 28, 2017 12:25 PM UTC

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
Replied On September 29, 2017 01:02 AM UTC

i'll try this sample.

thank you Venkateshwaran


Mallika Kannan [Syncfusion]
Replied On September 29, 2017 05:17 AM UTC

Hi Lenard 
 
Thanks for your update. 
 
We will wait until hear from you. 
 
Regards, 
Mallika 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;