Skip to content

Latest commit

 

History

History
203 lines (162 loc) · 8.68 KB

getting-started.md

File metadata and controls

203 lines (162 loc) · 8.68 KB
title page_title description slug tags published position
Getting Started
Getting Started
Check our "Getting Started" documentation article for the RadSlideView control.
radslideview-getting-started
getting started, radslideview
true
2

Getting Started with {{ site.framework_name }} SlideView

This tutorial will walk you through the creation of a sample application that contains a RadSlideView control.

Adding Telerik Assemblies Using NuGet

To use RadSlideView when working with NuGet packages, install the Telerik.Windows.Controls.for.Wpf.Xaml package. The [package name may vary]({%slug nuget-available-packages%}) slightly based on the Telerik dlls set - [Xaml or NoXaml]({%slug xaml-vs-noxaml%})

Read more about NuGet installation in the [Installing UI for WPF from NuGet Package]({%slug nuget-installation%}) article.

tip With the 2025 Q1 release, the Telerik UI for WPF has a new licensing mechanism. You can learn more about it [here]({%slug installing-license-key%}).

Adding Assembly References Manually

If you are not using NuGet packages, you can add a reference to the following assemblies:

  • Telerik.Licensing.Runtime
  • Telerik.Windows.Controls

Defining the RadSlideView

You can add RadSlideView manually in XAML as demonstrated in the following example:

[XAML] Adding RadSlideView in XAML

{{region radslideview-getting-started-0}} telerik:RadSlideView/ {{endregion}}

Empty RadSlideView

{{ site.framework_name }} Empty RadSlideView

Data Binding

RadSlideView allows you to data bind it to a collection of business objects. To do so, bind the collection to the ItemsSource property of the control.

The following example will demonstrate a simple data binding scenario.

[C#] Defining the model

{{region radslideview-getting-started-1}} public class Photo { public string Title { get; set; } public string ImagePath { get; set; } } {{endregion}}

[VB.NET] Defining the model

{{region radslideview-getting-started-2}} Public Class Photo Public Property Title As String Public Property ImagePath As String End Class {{endregion}}

[C#] Defining the view model

{{region radslideview-getting-started-3}} public class PhotosViewModel { public PhotosViewModel() { this.Photos = new ObservableCollection() { new Photo() { Title = "First Photo", ImagePath = "FirstPhoto.png" }, new Photo() { Title = "Second Photo", ImagePath = "SecondPhoto.png" }, new Photo() { Title = "Third Photo", ImagePath = "ThirdPhoto.png" }, }; } public ObservableCollection Photos { get; set; } } {{endregion}}

[VB.NET] Defining the view model

{{region radslideview-getting-started-4}} Public Class PhotosViewModel Public Sub New() Me.Photos = New ObservableCollection(Of Photo)() From { New Photo() With { .Title = "First Photo", .ImagePath = "FirstPhoto.png" }, New Photo() With { .Title = "Second Photo", .ImagePath = "SecondPhoto.png" }, New Photo() With { .Title = "Third Photo", .ImagePath = "ThirdPhoto.png" } } End Sub

    Public Property Photos As ObservableCollection(Of Photo)
End Class

{{endregion}}

[XAML] Binding the collection to the ItemsSource property

{{region radslideview-getting-started-5}} <Grid.Resources> <local:PhotosViewModel x:Key="PhotosViewModel"/> </Grid.Resources> <telerik:RadSlideView DataContext="{StaticResource PhotosViewModel}" ItemsSource="{Binding Photos}"> </telerik:RadSlideView> {{endregion}}

[XAML] Customizing the appearance of the bound items via the ItemTemplate property of RadSlideView

{{region radslideview-getting-started-6}} <Grid.Resources> <local:PhotosViewModel x:Key="PhotosViewModel"/> </Grid.Resources> <telerik:RadSlideView DataContext="{StaticResource PhotosViewModel}" ItemsSource="{Binding Photos}" SelectedIndex="0" ShowButtonsOverContent="False" HorizontalAlignment="Center" VerticalAlignment="Center"> telerik:RadSlideView.ItemTemplate <Grid.RowDefinitions> </Grid.RowDefinitions> </telerik:RadSlideView.ItemTemplate> </telerik:RadSlideView> {{endregion}}

RadSlideView in a sample data-binding scenario

{{ site.framework_name }} RadSlideView in a sample data-binding scenario

Setting a Theme

The controls from our suite support different themes. You can see how to apply a theme different than the default one in the [Setting a Theme]({%slug styling-apperance-implicit-styles-overview%}) help article.

important Changing the theme using implicit styles will affect all controls that have styles defined in the merged resource dictionaries. This is applicable only for the controls in the scope in which the resources are merged.

  • Choose between the themes and add reference to the corresponding theme assembly (ex: Telerik.Windows.Themes.Windows8.dll). You can see the different themes applied in the Theming examples from our {% if site.site_name == 'WPF' %}WPF Controls Examples{% else %}Silverlight Controls Examples{% endif %} application.

  • Merge the ResourceDictionaries with the namespace required for the controls that you are using from the theme assembly. For the RadSlideView, you will need to merge the following resources:

    • Telerik.Windows.Controls

The following example demonstrates how to merge the ResourceDictionaries so that they are applied globally for the entire application.

[XAML] Merge the ResourceDictionaries

{{region radslideview-getting-started-7}} <Application.Resources> <ResourceDictionary.MergedDictionaries> </ResourceDictionary.MergedDictionaries> </Application.Resources> {{endregion}}

Alternatively, you can use the theme of the control via the StyleManager.

The following image shows a RadSlideView with the Windows8 theme applied.

RadSlideView with the Windows8 theme

{{ site.framework_name }} RadSlideView with the Windows8 theme

{% if site.site_name == 'WPF' %}

Telerik UI for WPF Learning Resources

See Also

  • [Animations]({%slug radslideview-animations%})
  • [Navigation Buttons]({%slug radslideview-navigation-buttons%})