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

Carousel With the Ability To Drag like RadListBox

1 Answer 116 Views

Carousel

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

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

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

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

<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

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.