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.
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
>