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

Carousel With the Ability To Drag like RadListBox

1 Answer 44 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Andy
Top achievements
Rank 1
Andy asked on 05 Aug 2014, 05:24 PM
Hi, We are binding a list with both RadListBox(s) (small and large icon view) and RadCarousel to allow the user to see the same list in multiple ways. We need to allow the ability to drag items. At this point, we have enabled the List box to allow Drag and we would like to do the same thing with the RadCarousel (Drag the top most item/ image in the Carousel). Please help us with some sample code to enable the drag behavior from Carousel.
In the below code, I have both the RadListBox(s) and Carousel code.
‚Äč
    <UserControl.Resources>
        <conv:ByteArrayToImageBrush x:Key="byteArrayToImageBrushConverter" />
        <conv:BooleanToString x:Key="booleanToStringConverter" />
        <conv:StringToVisibility x:Key="stringToVisibilityConverter" />
        <Style x:Key="DraggableListBoxItem" TargetType="telerik:RadListBoxItem">
            <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
        </Style>
        <Path x:Key="horizontCarouselPath" Stretch="Fill" Opacity="1" Data="M 9,200 C9,200 450,200 450,200 "
              Stroke="{StaticResource PrimaryLayoutBorderBrush}" StrokeThickness="1" />
    </UserControl.Resources>
 
<Grid Grid.Row="2" Grid.ColumnSpan="2" Grid.Column="0" Margin="0,10,0,0">
                    <!--Small Icon View -->
                    <telerik:RadListBox x:Name="DocumentPageRadListBoxSmall"
                                        ItemsSource="{Binding SelectedPackDocumentPages}"
                                        ItemContainerStyle="{StaticResource DraggableListBoxItem}"
                                        ScrollViewer.HorizontalScrollBarVisibility="Disabled" SelectionMode="Extended"
                                        Visibility="{Binding PageLayoutView, Converter={StaticResource stringToVisibilityConverter}, ConverterParameter=SmallIconView}" BorderThickness="1" BorderBrush="{StaticResource PrimaryLayoutBorderBrush}">
                        <telerik:RadListBox.ItemTemplate>
                            <DataTemplate>
                                <Border Background="{StaticResource DropzoneBackgroundBrush}" Margin="0,4,0,0" BorderBrush="{StaticResource PrimaryLayoutBorderBrush}"
                                        BorderThickness="1" Height="155" Width="85">
                                    <StackPanel Orientation="Vertical">
                                        <Image
                                            Source="{Binding Converter={StaticResource byteArrayToImageBrushConverter}, Path=PageBytes}"
                                            Height="130" Width="80" HorizontalAlignment="Center"
                                            VerticalAlignment="Center" />
                                        <Label Content="{Binding PageLabel}" Style="{StaticResource Label}"
                                               HorizontalAlignment="Center" Margin="0,0,0,0" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </telerik:RadListBox.ItemTemplate>
                        <telerik:RadListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <WrapPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </telerik:RadListBox.ItemsPanel>
                        <telerik:RadListBox.DragDropBehavior>
                            <behaviors:DragDropCopyBehavior />
                        </telerik:RadListBox.DragDropBehavior>
                    </telerik:RadListBox>
 
                    <!--Large Icon View -->
                    <telerik:RadListBox x:Name="DocumentPageRadListBoxLarge"
                                        ItemsSource="{Binding SelectedPackDocumentPages}"
                                        ItemContainerStyle="{StaticResource DraggableListBoxItem}"
                                        ScrollViewer.HorizontalScrollBarVisibility="Auto" SelectionMode="Extended"
                                        Visibility="{Binding PageLayoutView, Converter={StaticResource stringToVisibilityConverter}, ConverterParameter=LargeIconView}" BorderThickness="1" BorderBrush="{StaticResource PrimaryLayoutBorderBrush}">
                        <telerik:RadListBox.ItemTemplate>
                            <DataTemplate>
                                <Border Background="{StaticResource DropzoneBackgroundBrush}" Margin="0,4,0,0" BorderBrush="{StaticResource PrimaryLayoutBorderBrush}"
                                        BorderThickness="1" Height="Auto" Width="Auto">
                                    <StackPanel Orientation="Vertical">
                                        <Image
                                            Source="{Binding Converter={StaticResource byteArrayToImageBrushConverter}, Path=PageBytes}"
                                            Height="300" Width="170" HorizontalAlignment="Center"
                                            VerticalAlignment="Center" />
                                        <Label Content="{Binding PageLabel}" Style="{StaticResource Label}"
                                               HorizontalAlignment="Center" Margin="0,0,0,0" />
                                    </StackPanel>
                                </Border>
                            </DataTemplate>
                        </telerik:RadListBox.ItemTemplate>
                        <telerik:RadListBox.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </telerik:RadListBox.ItemsPanel>
                        <telerik:RadListBox.DragDropBehavior>
                            <behaviors:DragDropCopyBehavior />
                        </telerik:RadListBox.DragDropBehavior>
                    </telerik:RadListBox>
 
                    <!--Carousel View -->
                    <telerik:RadCarousel x:Name="DocumentPageRadCarousel" HorizontalContentAlignment="Center"
                                         VerticalContentAlignment="Top"
                                         ItemsSource="{Binding SelectedPackDocumentPages}"
                                         AutoGenerateDataPresenters="False" Background="Transparent"
                                         Visibility="{Binding PageLayoutView, Converter={StaticResource stringToVisibilityConverter}, ConverterParameter=CarouselView}"
                                         Panel.ZIndex="4" FlowDirection="LeftToRight"
                                         HorizontalScrollBarVisibility="Auto" BorderThickness="1" BorderBrush="{StaticResource PrimaryLayoutBorderBrush}">
                        <telerik:RadCarousel.Resources>
                            <DataTemplate DataType="{x:Type workflow:DocumentPackPage}">
                                <Image
                                    Source="{Binding Converter={StaticResource byteArrayToImageBrushConverter}, Path=PageBytes}"
                                    HorizontalAlignment="Center" VerticalAlignment="Center" Height="400" Width="300" />
                            </DataTemplate>
                        </telerik:RadCarousel.Resources>
                        <telerik:RadCarousel.ItemsPanel>
                            <ItemsPanelTemplate>
                                <telerik:RadCarouselPanel Path="{StaticResource horizontCarouselPath}" />
                            </ItemsPanelTemplate>
                        </telerik:RadCarousel.ItemsPanel>
                    </telerik:RadCarousel>
                </Grid>

1 Answer, 1 is accepted

Sort by
0
Dimitrina
Telerik team
answered on 07 Aug 2014, 02:25 PM
Hello,

In order to enable dragging from Carousel, you need to handle the respective DragDropManager events. You can check our online documentation for more information on the Drag Drop Events you can use.

You can also find more drag and drop examples with the WPF Demos.  


Regards,
Didie
Telerik
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
Carousel
Asked by
Andy
Top achievements
Rank 1
Answers by
Dimitrina
Telerik team
Share this question
or