RadCarouselPanel and DataBinding

[Scott]

From what I can tell, the RadCarousel control is the desired control to use for using DataBinding. However, my particular need requires theuse of RadCarousel. Do you have any suggestions to do DataBinding with theRadCarouselPanel?

Thanks,

Ryan

[Milan]

Hi Scott,

Could you be more specific about the requirements of your project? What stops you from using RadCarousel in favor of RadCarouselPanel?

Kind regards,
Milan
the Telerik team

[Scott]

Hi Milan,

I have a horizontal scrollbar on my control as well as each item in the carousel being a UserControl.

I can add the items programatically if I need to, but I wanted to see if it would be possible to do it using databinding. 

[Milan]

Hello Scott,

Well, if you prefer to use data binding and the UI that you have to present is data driven - dependent of some sort of collection of data (collection of Person classes, for example) - RadCarousel is the right choice. You can use its ItemTemplate property to customize the appearance of the items. Our "Custom Item Template" example demonstrates how this property can be utilized.

Greetings,
Milan
the Telerik team

[Scott]

Milan,

My understanding was that the scrollbar wasn't possible with the RadCarousel, is this correct? That is why I was using the CarouselPanel.

[Milan]

Hi Scott,

There should be no problem to have a ScrollViewer inside RadCarousel.

Greetings,
Milan
the Telerik team

[Scott]

Milan,

I am not able to get the RadCarousel to work properly inside of a ScrollViewer. The two problems I am having are:

1. It doesn't span the entire contents of the ScrollViewer and therefore is appearing in the top left.

2. It doesn't actually show a horizontal scrollbar like it does with a RadCarouselPanel. I can scroll horizontally, but I don't have a visible scrollbar.

Here is my very simple application:

    <Grid>
        <ScrollViewer Name="ScrollBar" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center">
            <telerik:RadCarousel Name="radCarousel1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
        </ScrollViewer>
    </Grid>

using System.Collections.Generic;
using System.Windows;

namespace WpfApplication5
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<CarouselItem> CarouselItems = new List<CarouselItem>();

            CarouselItems.Add(new CarouselItem { Content = "Content is Here", Title = "Item 1" });
            CarouselItems.Add(new CarouselItem { Content = "More Content is Here", Title = "Item 2" });

            radCarousel1.ItemsSource = CarouselItems;
        }
    }
}

public class CarouselItem
{

    private string _Title;
    public string Title
    {
        get { return _Title; }
        set { _Title = value; }
    }

    private string _Content;
    public string Content
    {
        get { return _Content; }
        set { _Content = value; }
    }


}

[Milan]

Hi Scott,

It seems that I have misunderstood you - excuse me for that. I though your idea was to palace a ScrollViewer inside each carousel item. RadCarousel has a built in ScrollViewer which is also visible - the buttons that you see on the bottom of RadCarousel are part of the built-in ScrollViewer. 

Maybe you would like to have a standard looking ScrollViewer.

Regards,
Milan
the Telerik team

[Scott]

Milan,

Our designs call for a styled Horizontal Scrollbar. We have a Global Resource that will style the scrollbar. Is there a way to disable the built-in ScrollViewer or to use the external one instead? What would you suggest? I would like to use DataBinding with a RadCarousel as opposed to using the RadCarouselPanel and manually adding the items, but I had my Carousel 100% done with the RadCarouselPanel.

[Milan]

Hi Scott,

I am sending you a sample that demonstrates how you can tweak the carousel to use the default ScrollBar style. 

Sincerely yours,
Milan
the Telerik team

[raven]

For defining a custom path or displaying more than one item per page  like i can do it for Rad carousel panel, hence the need for databinding, can i display more than one item per page using radcarousel?

[Milan]

Hi raven,

You can use the ItemsPanel property of RadCarousel to provide a RadCarousel of your choosing. For example:

<telerik:RadCarousel Name="RadCarousel1" Loaded="RadCarousel1_Loaded">
    <telerik:RadCarousel.ItemsPanel>
        <ItemsPanelTemplate>
            <telerik:RadCarouselPanel ItemsPerPage="3" Path="{StaticResource MyPath}"/>
        </ItemsPanelTemplate>
    </telerik:RadCarousel.ItemsPanel>
</telerik:RadCarousel>

Greetings,
Milan
the Telerik team

[raven]

Thanks is there a way to define the path that looks similar to the first screen shot http://www.telerik.com/help/wpf/carousel-radcarouselpanel-item-movement.html

[Milan]

Hi raven,

Here is a path that looks like the one in our documentation.

<Window.Resources>
    <Path x:Key="customPath" Stretch="Fill" Height="100"
          Data="M639,-115.5 C702,-106.5 666.49972,-35 491.49972,-35 300.4994,-35 293.49973,-116 343.50004,-116">
    </Path>
</Window.Resources>
<Grid>
    <telerik:RadCarousel Name="RadCarousel1" Loaded="RadCarousel1_Loaded">
        <telerik:RadCarousel.ItemsPanel>
            <ItemsPanelTemplate>
                <telerik:RadCarouselPanel ItemsPerPage="7" Path="{StaticResource customPath}" AutoLoadItems="False"/>
            </ItemsPanelTemplate>
        </telerik:RadCarousel.ItemsPanel>
    </telerik:RadCarousel>
</Grid>

Greetings,
Milan
the Telerik team