RadCarousel keyboardnavigation

3 posts, 0 answers
  1. Marius
    Marius avatar
    21 posts
    Member since:
    Oct 2010

    Posted 18 Oct 2010 Link to this post

    I'm trying to create a RadCarousel which does not show the scrollbar-buttons and supports scrolling by clicking on items or by using the keyboard navigation keys. This is (almost) working smoothly, with the current solution:

                <telerik:RadCarousel Name="carousel" HorizontalScrollBarVisibility="Hidden"
                                     ItemsSource="{Binding Path=Templates}"
                                     ItemTemplate="{StaticResource template}"
                                     SelectedItem="{Binding Path=SelectedTemplateAndFolder}" />

    Now, the issue is that if you click outside the items in the carousel but inside the carousel boundary, you can scroll by using left and right navigation keys. If you click on an item in the carousel, the ability to navigate with the keyboard is lost. The different navigation behavior, based on where you clicked in the carousel, leads to a quirky user-experience and I would really like to know if there is a solution to this problem.
  2. Milan
    Milan avatar
    1989 posts

    Posted 19 Oct 2010 Link to this post

    Hello Marius,

    There are element in the default carousel item style that handle the keyboard commands and as a result the carousel cannot be scrolled. Could you please try to define the UI or your items using the ItemTemplate property similarly to this:

    <telerik:RadCarousel Name="RadCarousel1" Loaded="RadCarousel1_Loaded">
                    <TextBlock Text="{Binding MyProperty}"/>

    All the best,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Marius
    Marius avatar
    21 posts
    Member since:
    Oct 2010

    Posted 22 Oct 2010 Link to this post

    I've already done that with this template:

            <DataTemplate x:Key="template">
                <Grid x:Name="grid" Height="182" HorizontalAlignment="Left" Width="160">
                        <RowDefinition Height="Auto" />
                        <RowDefinition />
                        <RowDefinition Height="24" />

                    <Border Grid.Row="0" BorderThickness="0" Margin="0" VerticalAlignment="Top" CornerRadius="2,2,0,0">
                            <LinearGradientBrush StartPoint="0.5, 0" EndPoint="0.5, 1">
                                <GradientStop Color="#FFC4DAFA" Offset="0" />
                                <GradientStop Color="#FFF6F9FD" Offset="1" />

                        <WrapPanel Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="6,0,0,0">
                            <TextBlock Text="{Binding Path=TemplateOwner.Name}" TextWrapping="Wrap" FontSize="11" Margin="0,0,3,0"/>
                            <TextBlock Text=" - " TextWrapping="Wrap" FontSize="11"  />
                            <TextBlock Text="{Binding Path=Template.Name}" TextWrapping="Wrap" FontSize="11" />

                    <Image Grid.Row="1" Source="{Binding Path=Template.Image}"  />
                    <TextBlock Grid.Row="2" Text="{Binding Path=Template.Description}" TextWrapping="Wrap" FontSize="9" FontStyle="Italic" TextAlignment="Center" />



    I've used "Snoop" while debugging and it seems that keyboard navigation is lost when clicking an item because focus is set to the rad carousel when clicking an item. I fixed it by setting the focus back to the scroller when clicking like this:

    private void Carousel_PreviewMouseDown(object sender, MouseButtonEventArgs e)
    CarouselScrollViewer scrollViewer = FindChild<CarouselScrollViewer>(this.carousel, null);

Back to Top