This is a migrated thread and some comments may be shown as answers.

RadCarousel keyboardnavigation

2 Answers 109 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Marius
Top achievements
Rank 1
Marius asked on 18 Oct 2010, 07:58 AM
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 Answers, 1 is accepted

Sort by
0
Milan
Telerik team
answered on 19 Oct 2010, 02:03 PM
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
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
0
Marius
Top achievements
Rank 1
answered on 22 Oct 2010, 09:42 AM
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();
}

Tags
Carousel
Asked by
Marius
Top achievements
Rank 1
Answers by
Milan
Telerik team
Marius
Top achievements
Rank 1
Share this question
or