maui-404808-slide-view.md
The DevExpress SlideView component for .NET MAUI allows you to show a collection of items. Users can swipe left/right or up/down to navigate between items.
Download and install the DevExpress.Maui.Core package from the DevExpress NuGet Gallery to obtain the SlideView component. For more information on how to build your first .NET MAUI app, refer to the following help topic: Get Started.
The markup below adds a SlideView instance to a ContentPage:
<ContentPage ...
xmlns:dx="http://schemas.devexpress.com/maui">
<dx:SlideView x:Name="slideView">
</dx:SlideView>
</ContentPage>
BindingContext property. This example uses an instance of the HouseViewModel class as the ViewModel.Houses in this example).<ContentPage ...
xmlns:local="clr-namespace:SlideViewExample">
<ContentPage.BindingContext>
<local:HouseViewModel/>
</ContentPage.BindingContext>
<dx:SlideView x:Name="slideView"
ItemsSource="{Binding Houses}">
<dx:SlideView.ItemTemplate>
<DataTemplate>
<dx:DXImage Source="{Binding HouseImageSource}" Margin="10"/>
</DataTemplate>
</dx:SlideView.ItemTemplate>
</dx:SlideView>
</ContentPage>
Show ViewModel implementation
public class HouseViewModel {
public ObservableCollection<House> Houses { get; set; } = new ObservableCollection<House>();
public HouseViewModel() {
for (int i = 1; i < 25; i++) {
Houses.Add(new House () { HouseImageName = i.ToString() });
}
}
}
public class House {
string imageName;
public string HouseImageName {
get => this.imageName;
set {
this.imageName = value;
// House images are named according to the pattern "house1.jpg"
// and are stored in the Resources/Houses folder
HouseImageSource = ImageSource.FromFile("house" + value + ".jpg");
}
}
public ImageSource HouseImageSource { get; set; }
}
As an alternative to the SlideView.ItemsSource property, you can use the SlideView.Items property to add slides to a SlideView.
The following markup adds three slides with images to a SlideView:
<dx:SlideView AllowLooping="True"
AllowSwipe="True">
<dx:SlideView.Items>
<dx:DXImage Source="house1.jpg"/>
<dx:DXImage Source="house2.jpg"/>
<dx:DXImage Source="house3.jpg"/>
</dx:SlideView.Items>
</dx:SlideView>
Use the properties below to retrieve information about the selected item:
CurrentIndexGets or sets the zero-based index of the currently displayed item.CurrentItemGets or sets the source object corresponding to the current item.
The SlideView control raises the CurrentItemChanged event when the currently displayed item is replaced with another item.
The SlideView controls caches item content. You can specify the ContentCacheMode property to select an appropriate cache mode. The following modes are available:
None – Item content is not cached.All – All item content is cached at once, when the SlideView control is loaded and displayed.OnFirstShow – When the control displays an item for the first time, it caches this item’s content.The control supports swipe gestures that allow users to navigate between items. You can implement your own UI and use the following methods and commands for navigation:
SlideView.ShowPrevious | SlideViewCommands.ShowPreviousShows the previous item in the item collection.SlideView.ShowNext | SlideViewCommands.ShowNextShows the next item in the item collection.
The following example implements a simple gallery in which users can tap Previous and Next buttons to scroll images:
<Grid ColumnDefinitions="*,*">
<dx:SlideView x:Name="slideView" AllowLooping="True">
<!--...-->
</dx:SlideView>
<dx:DXButton Grid.Column="0" Content="<"
Command="{Binding Commands.ShowPrevious, Source={x:Reference slideView}}"
WidthRequest="60" HeightRequest="60"
VerticalOptions="Center" HorizontalOptions="Start"
BackgroundColor="LightGray" DisabledBackgroundColor="Gray"
TextColor="Black" Margin="20,0,0,0" FontSize="20"/>
<dx:DXButton Grid.Column="1" Content=">"
Command="{Binding Commands.ShowNext, Source={x:Reference slideView}}"
WidthRequest="60" HeightRequest="60"
VerticalOptions="Center" HorizontalOptions="End"
BackgroundColor="LightGray" DisabledBackgroundColor="Gray"
TextColor="Black" Margin="0,0,20,0" FontSize="20"/>
</Grid>
You can disable built-in swipe gesture support. Set AllowSwipe property to false.
Set the AllowLooping property to true to allow users to scroll items endlessly. Otherwise, scrolling stops when a users reaches the first/last item.
Specify the Orientation property to define whether users should use “left” and “right” swipes (horizontal orientation) or “up” and “down” swipes (vertical orientation) to scroll through SlideView items.