RadCarousel keyboardnavigation

[Marius]

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.

[Milan]

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">
    <telerik:RadCarousel.ItemTemplate>
        <DataTemplate>
            <Border>
                <TextBlock Text="{Binding MyProperty}"/>
            </Border>
        </DataTemplate>
    </telerik:RadCarousel.ItemTemplate>
</telerik:RadCarousel>

All the best,
Milan
the Telerik team

[Marius]

I've already done that with this template:

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

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

                    <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" />
                    </WrapPanel>
                </Border>

                <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" />

            </Grid>

        </DataTemplate>

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);
    scrollViewer.Focus();

}