I have implemented a drag drop functionality in XamCarouselListBox, but am not able to replicate the behaviour in XamDataCarousel. Is it possible to do it? Please help.
Hello,
Thank you for your post. I have been looking into your question and I assume that you are using Infragistics Drag and Drop Framework. If you wish to add Drag Drop functionality for the XamDataCarousel, what I can suggest re-templating the CarouselItem and set DragDropManager.DragSouce to the root element of the template. Also, in order to allow the Drag Drop operations, you should set the CellClickAction of the FieldSettings of the XamDataCarousel to EnterEditModeIfAllowed, since by default clicking on the cell is selecting it and this stop the mouse down event to bubble and prevents the drag drop operation from starting. I have created a sample application for you, that shows how you can allow dragging items of the XamDataCarousel.
Please let me know if you need any further assistance on the matter.
Sincerely,
Krasimir, MCPD
Developer Support Supervisor - XAML
Infragistics
www.infragistics.com/support
Hello Krasimir and thank you for posting this sample project; it works great! I have just cut and paste the templete code in may own project and the drag action does nothing. What setting on the DataCarousel might surpress the mouse action; it is like the code never sees the mouse event.
Here my code:
<Style TargetType="{x:Type igDP:CarouselItem}"> <Setter Property="ItemDisappearingStoryboard" Value="{DynamicResource ItemDisappearing}"/> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type igDP:CarouselItem}"> <Grid x:Name="root"> <ig:DragDropManager.DragSource> <ig:DragSource IsDraggable="True"/> </ig:DragDropManager.DragSource> <Grid.RowDefinitions> <RowDefinition Height="{Binding Path=(idgControl:XamCarouselPanel.ViewSettings).(idgControl:CarouselViewSettings.ItemSize).Height, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type igDP:CarouselViewPanel}}}"/> <RowDefinition Height="*"/> </Grid.RowDefinitions>
<ScrollViewer x:Name="ScrollViewer" Focusable="false" HorizontalScrollBarVisibility="{TemplateBinding ItemHorizontalScrollBarVisibility}" VerticalScrollBarVisibility="{TemplateBinding ItemVerticalScrollBarVisibility}" VerticalAlignment="Bottom"> <Viewbox x:Name="ViewBox" VerticalAlignment="Bottom" HorizontalAlignment="Center"> <Grid x:Name="itemContentHolder"> <Border x:Name="itemContentHolderBackground" BorderThickness="1" CornerRadius="5" BorderBrush="{TemplateBinding BorderBrush}" Background="{TemplateBinding Background}"/>
<ContentControl x:Name="itemContent" Focusable="false" Grid.Row="0" Content="{TemplateBinding Content}"/> </Grid> </Viewbox> </ScrollViewer> <Grid x:Name="glyphCanvas" Grid.Row="0"> <idgControl:ExpansionIndicator x:Name="ExpansionIndicator" Canvas.Left="{Binding Path=ActualWidth, ElementName=glyphCanvas}" HorizontalAlignment="Right" VerticalAlignment="Bottom" IsChecked="{Binding Path=IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Margin="0,0,-11,0" Background="{DynamicResource {ComponentResourceKey TypeInTargetAssembly={x:Type igDP:XamDataGrid}, ResourceId=CarouselItemExpansionIndicator}}" Visibility="{Binding Path=ExpansionIndicatorVisibility, RelativeSource={RelativeSource TemplatedParent}}"> <idgControl:ExpansionIndicator.Template> <ControlTemplate TargetType="{x:Type idgControl:ExpansionIndicator}"> <Grid> <Path x:Name="selectorArrow" RenderTransformOrigin="0.5,0.5" Fill="{TemplateBinding Background}" Stretch="Fill" Stroke="#00CCCCCC" StrokeThickness="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}" Width="10" Height="10" Cursor="{TemplateBinding Cursor}" Data="M10,0L10,10 0,10z" Visibility="Visible"/> </Grid> </ControlTemplate> </idgControl:ExpansionIndicator.Template> </idgControl:ExpansionIndicator> </Grid>
<Border Grid.Row="1" Visibility="{Binding Path=ReflectionVisibility, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type igDP:CarouselViewPanel}}}" Height="{Binding Path=ActualHeight, ElementName=ScrollViewer}" Width="{Binding Path=ActualWidth, ElementName=ScrollViewer}" IsHitTestVisible="False" Margin="0,1,0,0" x:Name="reflection" VerticalAlignment="Top"> <Border.Background> <VisualBrush Visual="{Binding ElementName=ScrollViewer}" Stretch="None" Opacity=".15" AlignmentX="Center" AlignmentY="Bottom"> <VisualBrush.RelativeTransform> <TransformGroup> <MatrixTransform Matrix="1,0,0,-1,0,0"/> <TranslateTransform Y="1"/> </TransformGroup> </VisualBrush.RelativeTransform> </VisualBrush> </Border.Background> </Border> </Grid> <ControlTemplate.Triggers> <Trigger Property="AutoScaleItemContentsToFit" Value="true"> <Setter TargetName="ScrollViewer" Property="HorizontalScrollBarVisibility" Value="Disabled"/> <Setter TargetName="ScrollViewer" Property="VerticalScrollBarVisibility" Value="Disabled"/> <Setter TargetName="ScrollViewer" Property="Focusable" Value="False"/> <Setter TargetName="ViewBox" Property="Stretch" Value="Uniform"/> <Setter TargetName="ViewBox" Property="StretchDirection" Value="Both"/> </Trigger>
<Trigger Property="IsOpacityReduced" Value="True"> <Setter TargetName="root" Property="Opacity" Value="0.35"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style>
<igDP:XamDataCarousel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Height="Auto" x:Name="CmsCommands" Theme="IGTheme" GroupByAreaLocation="None" Grid.Row="1" Initialized="CmsCommands_Initialized" IsSynchronizedWithCurrentItem="True" AutoFit="True" BindToSampleData="False" BorderThickness="1" Margin="2,10,2,2">
<igDP:XamDataCarousel.FieldSettings> <igDP:FieldSettings LabelTextAlignment="Center" LabelTextWrapping="Wrap" AllowResize="True" CellClickAction="EnterEditModeIfAllowed"/> </igDP:XamDataCarousel.FieldSettings>
<igDP:XamDataCarousel.FieldLayoutSettings> <igDP:FieldLayoutSettings AutoGenerateFields="True" HighlightAlternateRecords="True"/> </igDP:XamDataCarousel.FieldLayoutSettings>
<igDP:XamDataCarousel.ViewSettings> <idgControl:CarouselViewSettings ItemPathAutoPad="True" ItemPathPadding="5,5,5,5" IsListContinuous="True" ItemPathHorizontalAlignment="Stretch" ItemPathVerticalAlignment="Stretch" ItemSize="150,150" OpacityEffectStopDirection="Vertical" ScalingEffectStopDirection="Vertical" ItemsPerPage="7" AutoScaleItemContentsToFit="True" ItemPathRenderBrush="Transparent" RotateItemsWithPathTangent="False" ShouldAnimateItemsOnListChange="True" UseOpacity="False">
<idgControl:CarouselViewSettings.ItemPathRenderPen> <Pen Brush="#FFEDE8E8" /> </idgControl:CarouselViewSettings.ItemPathRenderPen>
<idgControl:CarouselViewSettings.OpacityEffectStops> <idgControl:OpacityEffectStop Offset="0" Value="0.5" /> <idgControl:OpacityEffectStop Offset="0.5" Value="1" /> <idgControl:OpacityEffectStop Offset="1" Value="0.5" /> </idgControl:CarouselViewSettings.OpacityEffectStops>
<idgControl:CarouselViewSettings.ScalingEffectStops> <idgControl:ScalingEffectStop /> <idgControl:ScalingEffectStop Offset="1" Value="2" /> </idgControl:CarouselViewSettings.ScalingEffectStops>
</idgControl:CarouselViewSettings> </igDP:XamDataCarousel.ViewSettings> </igDP:XamDataCarousel>
Tavi
I am just checking if you require any further assistance on the matter.