Skip to content

Update Readme file #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added Images/slide-view.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 89 additions & 11 deletions Readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,102 @@
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
<!-- default badges end -->
<!-- default file list -->
*Files to look at*:

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

This example uses the [`SlideView`](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.SlideView) control to display a scrollable horizontal list of items. Each item is rendered as a content card with user-defined templates.

![Group Bar Items with Separators](./Images/slide-view.jpg)

Use the [`SlideView`](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.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.

```csharp
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`](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.SlideView.ItemHeaderTemplate) displays the employee’s first name.
* [`ItemContentTemplate`](https://docs.devexpress.com/WPF/DevExpress.Xpf.Docking.LayoutGroup.ItemContentTemplate) displays detailed information, including photo, contact details, and job data.

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

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

### Slide View Configuration

```xaml
<dxwui:SlideView
Header="Slide View"
ItemsSource="{Binding DataSource}"
ItemHeaderTemplate="{StaticResource ItemHeaderTemplate}"
ItemTemplate="{StaticResource ItemContentTemplate}" />
```

## Files to Review

* [DataStorage.cs](./CS/SlideViewSample/DataStorage.cs)
* **[MainWindow.xaml](./CS/SlideViewSample/MainWindow.xaml)**
<!-- default file list end -->
# WPF SlideView - Display a horizontal list of items with slide navigation
* [MainWindow.xaml](./CS/SlideViewSample/MainWindow.xaml)

## Documentation

<p>This example demonstrates how to create a SlideView, bind it to data and use templates to visualize its items. </p>
* [SlideView](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.SlideView)
* [SlideViewItem](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.SlideViewItem)
* [ItemHeaderTemplate](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.SlideView.ItemHeaderTemplate)
* [ItemContentTemplate](https://docs.devexpress.com/WPF/DevExpress.Xpf.WindowsUI.SlideView.ItemHeaderTemplate)
* [Slide View](https://docs.devexpress.com/WPF/15020/controls-and-libraries/windows-modern-ui/content-containers/slide-view)

<br/>
## More Examples

* [WPF Accordion Control – Bind to Hierarchical Data Structure](https://github.com/DevExpress-Examples/wpf-accordion-bind-to-hierarchical-data-structure)
* [WPF MVVM Framework – Use View Models Generated at Compile Time](https://github.com/DevExpress-Examples/wpf-mvvm-framework-view-model-generator)
* [WPF Dock Layout Manager - Populate a DockLayoutManager LayoutGroup with the ViewModels Collection](https://github.com/DevExpress-Examples/wpf-docklayoutmanager-display-viewmodels-collection-in-layoutgroup)
* [WPF Bars – Create a Container for BarItem Links](https://github.com/DevExpress-Examples/wpf-bars-create-baritem-link-container)
* [WPF PDF Viewer – Customize the Integrated Bar's Commands](https://github.com/DevExpress-Examples/wpf-pdf-viewer-customize-bar-manager)

<!-- feedback -->
## Does this example address your development requirements/objectives?

[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=create-wpf-slide-view&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=create-wpf-slide-view&~~~was_helpful=no)

## Does this example address your development requirements/objectives?
[<img src="https://www.devexpress.com/support/examples/i/yes-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=create-wpf-slide-view&~~~was_helpful=yes) [<img src="https://www.devexpress.com/support/examples/i/no-button.svg"/>](https://www.devexpress.com/support/examples/survey.xml?utm_source=github&utm_campaign=create-wpf-slide-view&~~~was_helpful=no)
(you will be redirected to DevExpress.com to submit your response)
<!-- feedback end -->
Loading