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.

public class Employee {
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string FullName => FirstName + " " + LastName;
    public string JobTitle { get; set; }
    public string EmailAddress { get; set; }
    public string City { get; set; }
    public byte[] ImageData { get; set; }

    [XmlIgnore]
    public BitmapImage Photo => imageSource ??= LoadImage();

    BitmapImage LoadImage() {
        var stream = new MemoryStream(ImageData);
        var image = new BitmapImage();
        image.BeginInit();
        image.StreamSource = stream;
        image.EndInit();
        return image;
    }
}

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.

<DataTemplate x:Key="ItemHeaderTemplate">
    <TextBlock Text="{Binding FirstName}" />
</DataTemplate>

<DataTemplate x:Key="ItemContentTemplate">
    <Grid>
        <!-- Photo, FullName, JobTitle, etc. -->
    </Grid>
</DataTemplate>

Slide View Configuration

<dxwui:SlideView
    Header="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)