Carousel With the Ability To Drag like RadListBox

2 posts, 0 answers
  1. Andy
    Andy avatar
    13 posts
    Member since:
    Apr 2014

    Posted 05 Aug 2014 Link to this post

    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>
  2. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 07 Aug 2014 Link to this post

    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.
     
  3. UI for WPF is Visual Studio 2017 Ready
Back to Top