WPF SlideView – Display a Horizontal List of Cards with Swipe Navigation

This example uses the SlideView control to display a scrollable horizontal list of items. Each item is rendered as a content card with user-defined templates.

Use the SlideView control when you need to:

• Display detailed information for data items in a focused, single-item view.
• Create a modern, user-friendly interface with swipe-style navigation.

Implementation Details

Data Structure

The data source, which contains a list of Employee objects, is exposed by the EmployeesData view model through the DataSource property. The Employee class exposes employee-related properties (such as FullName, Photo, JobTitle, EmailAddress, and City). Images are stored as byte arrays and converted to BitmapImage objects at runtime.

publicclassEmployee{publicstringFirstName{get;set;}publicstringLastName{get;set;}publicstringFullName=>FirstName+" "+LastName;publicstringJobTitle{get;set;}publicstringEmailAddress{get;set;}publicstringCity{get;set;}publicbyte[]ImageData{get;set;}[XmlIgnore]publicBitmapImagePhoto=>imageSource??=LoadImage();BitmapImageLoadImage(){varstream=newMemoryStream(ImageData);varimage=newBitmapImage();image.BeginInit();image.StreamSource=stream;image.EndInit();returnimage;}}

Templates

The following code example defines two templates:

• ItemHeaderTemplate displays the employee’s first name.
• ItemContentTemplate displays detailed information, including photo, contact details, and job data.

<DataTemplatex:Key="ItemHeaderTemplate">
<TextBlockText="{Binding FirstName}" />
</DataTemplate>
<DataTemplatex:Key="ItemContentTemplate">
<Grid>
<!-- Photo, FullName, JobTitle, etc. -->
</Grid>
</DataTemplate>

Slide View Configuration

<dxwui:SlideViewHeader="Slide View"ItemsSource="{Binding DataSource}"ItemHeaderTemplate="{StaticResource ItemHeaderTemplate}"ItemTemplate="{StaticResource ItemContentTemplate}" />

Files to Review

• DataStorage.cs
• MainWindow.xaml

Documentation

• SlideView
• SlideViewItem
• ItemHeaderTemplate
• ItemContentTemplate
• Slide View

More Examples

• WPF Accordion Control – Bind to Hierarchical Data Structure
• WPF MVVM Framework – Use View Models Generated at Compile Time
• WPF Dock Layout Manager - Populate a DockLayoutManager LayoutGroup with the ViewModels Collection
• WPF Bars – Create a Container for BarItem Links
• WPF PDF Viewer – Customize the Integrated Bar's Commands

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)