Hide listbox source item on dragging

[Alex]

Hello,

I have two radlistboxes in my user control.

I need on dragging to hide (make invisible) the item in source radlistbox and keep showing up the dragged item at the same time.

If I make the source item to be invisible, the dragged item is also becomes  invisible.

Is there any solution to this issue ?

This is the styles of radlistbox and radlistbox item I use :

    <Style x:Key="RadListBoxStyle1" TargetType="{x:Type telerik:RadListBox}">
        <Setter Property="telerik:ScrollingSettingsBehavior.IsEnabled" Value="True"/>
        <Setter Property="telerik:ScrollingSettingsBehavior.ScrollAreaPadding" Value="30"/>
        <Setter Property="telerik:ScrollingSettingsBehavior.ScrollStep" Value="24"/>
        <Setter Property="telerik:ScrollingSettingsBehavior.ScrollStepTime" Value="0:0:0.05"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Foreground" Value="Black"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="VerticalContentAlignment" Value="Top"/>
        <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="ScrollViewer.CanContentScroll" Value="True"/>
        <Setter Property="KeyboardNavigation.TabNavigation" Value="Once"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <VirtualizingStackPanel IsItemsHost="True"/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:RadListBox}">
                    <Grid>
                        <ScrollViewer x:Name="PART_ScrollViewer" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsTabStop="False" Margin="0" Padding="{TemplateBinding Padding}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}">
                            <telerik:StyleManager.Theme>
                                <telerik:Expression_DarkTheme/>
                            </telerik:StyleManager.Theme>
                            <ItemsPresenter/>
                        </ScrollViewer>
                        <ContentPresenter x:Name="PART_DropVisualPlaceholder" HorizontalAlignment="Stretch" Visibility="Collapsed" VerticalAlignment="Stretch"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

 

  <Style x:Key="CustomRadListBoxItemStyle" TargetType="telerik:RadListBoxItem">
        <Setter Property="Padding" Value="0" />
        <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        <Setter Property="VerticalContentAlignment" Value="Top" />
        <Setter Property="Background" Value="Transparent" />
        <Setter Property="BorderBrush" Value="Transparent" />
        <Setter Property="IsSelected" Value="{Binding IsSelected,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}"/>
        <Setter Property="BorderThickness" Value="0" />
        <Setter Property="telerik:DragDropManager.AllowDrag" Value="True"/>
        <Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True"/>
        <Setter Property="telerik:DragDropManager.TouchDragTrigger" Value="TapDown"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerik:RadListBoxItem">
                    <Grid>
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal" />
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="MouseOverVisual" Storyboard.TargetProperty="Opacity" To="1" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Disabled">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="Opacity" To="0.5" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected" />
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" Storyboard.TargetName="SelectedVisual" Storyboard.TargetProperty="Opacity" To="1" />
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual" />
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <!-- normal-->
                        <Border CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}" Margin="1 0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" />
                        <!-- Mouseover -->
                        <Border x:Name="MouseOverVisual" Opacity="0" 
                                CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}" Margin="1 0" 
                                BorderBrush="{StaticResource ControlOuterBorder_Highlighted}" 
                                BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                            <Border Background="Transparent" BorderBrush="{StaticResource ControlInnerBorder_Highlighted}" BorderThickness="0" CornerRadius="{StaticResource ControlInnerBorder_CornerRadius}" SnapsToDevicePixels="True" />
                        </Border>
                        <!-- Selected -->
                        <Border x:Name="SelectedVisual" Opacity="0" CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}" Margin="1 0" BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}" BorderThickness="{TemplateBinding BorderThickness}" SnapsToDevicePixels="True">
                            <Border Background="Transparent" BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}" BorderThickness="0" CornerRadius="{StaticResource ControlInnerBorder_CornerRadius}" SnapsToDevicePixels="True" />
                        </Border>
                        <ContentPresenter x:Name="contentPresenter" Margin="{TemplateBinding Padding}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
                        <!-- Focus -->
                        <Border x:Name="FocusVisual" Opacity="0" Margin="0 0" BorderThickness="0" CornerRadius="{StaticResource ControlOuterBorder_CornerRadius}" BorderBrush="{StaticResource ControlOuterBorder_Focused}" SnapsToDevicePixels="True" />
                        
                        
                    </Grid>
                    
                    
                </ControlTemplate>
            </Setter.Value>
        </Setter>

        <!--<Style.Triggers>
            <DataTrigger Binding="{Binding  Path=IsItemEnable}" Value="True">
                <Setter Property="Visibility" Value="Visible" />
            </DataTrigger>
            <DataTrigger Binding="{Binding  Path=IsItemEnable}" Value="False">
                <Setter Property="Visibility" Value="Hidden" />
            </DataTrigger>
         
        </Style.Triggers>-->
    </Style>

Thank you,

Alex.S

[Dilyan Traykov]

Hello Alex,

In order to achieve the desired result, you will need to create custom ListBoxDragDropBehavior as well as a custom DragVisualProvider.

There are a number of examples which can be found in our SDK Samples Browser on which to base the implementation upon, however, for your convenience, I'm attaching a sample project with the desired behavior.

Please let me know if this works for you.

Regards,
Dilyan Traykov
Telerik by Progress

[Alex]

Hello Dilyan,

Thank you for the answer. I did not find a solution to my problem in sdk samples.

I don't want to remove the dragged item from the source listbox until dropping, I just want to hide it and make visible again on dropping.

Is that possible ?

 

Thanks,

Alex.

[Dilyan Traykov]

Hello Alex,

Please excuse me for the misunderstanding.

In such case you can simply hide the container inside the CreateDragVisual method of the custom DragVisualProvider (and also change back its visibility when the drag is completed):

private FrameworkElement container;

public FrameworkElement CreateDragVisual(DragVisualProviderState state)
{
    var visual = new DragVisual();

    var theme = StyleManager.GetTheme(state.Host);
    if (theme != null)
    {
        StyleManager.SetTheme(visual, theme);
    }

    visual.Content = state.DraggedItems.OfType<object>().FirstOrDefault();
    this.container = state.DraggedItemContainers.FirstOrDefault() as FrameworkElement;
    this.container.Visibility = Visibility.Collapsed;
    visual.ContentTemplate = this.DraggedItemTemplate;

    DragDropManager.AddDragDropCompletedHandler(state.Host, OnDragDropCompleted);

    return visual;
}

private void OnDragDropCompleted(object sender, DragDropCompletedEventArgs e)
{
    this.container.Visibility = Visibility.Visible;
}

I'm also attaching the modified project with the implementation. Do let me know if you find this applicable.

Regards,
Dilyan Traykov
Telerik by Progress

[Alex]

Hi Dilyan,te

Thank you for the answer. It works great only if DataTemplate is provided , but I have a problem with DataTemplate , since my items in radlistbox are user controls from different types and all of them  inheriting from interface. So radlistbox holds a list of objects of type interface.

What should I do with the DataTemplate in my case or maybe there is a way avoiding implementation of DataTemplate ?

Thank you again,

Alex

[Dilyan Traykov]

Hello Alex,

You can simply remove the DataTemplate property as well as all code that references it if you do not want to use it but in mind that the ToString method of your objects will be used by the provider in such case. What I can suggest is to create a DataTemplateSelector property to handle the different data types.

If you do not find this applicable, I will need more information on your exact setup in order to assist you further - more specifically, how exactly have you bound the ListBox and the exact types of items you're using.

Regards,
Dilyan Traykov
Telerik by Progress

[Alex]

Hi Dilyan,

Thank you again for the answer. 

I did not really understand what you meant by DataTemplateSelector  and how to implement this.

I'm attaching you the modified project you have sent me earlier which has two types of user control and one interface inherited by these user controls.

Rename the file extension to .zip 

Please, advise me how to implement the DataTemplate in order to make drag and drop working properly. 

Thank you,

Alex

 

[Dilyan Traykov]

Hello Alex,

I've modified the project you provided to use DataTemplates rather than have its items defined as user controls. I've also demonstrated the DataTemplateSelector approach I had in mind.

You can find the project attached to my reply. Please have a look at it and let me know whether this would work for you.

Regards,
Dilyan Traykov
Telerik by Progress

[Alex]

Hello Dilyan,

First of all I want to thank you for all the answers and examples you have provided.

From the last reply I got your point of view and how to use DataTemplateSelector.

You  actually gave up the user controls, but the user controls(strips) in my real project are very complicated and I can't use the strip's  DataTemplate like <DataTemplate DataType="{x:Type sa:Strip}"> ..... </DataTemplate>

How can I do it with the user controls ?

Thank you again,

Alex.

[Dilyan Traykov]

Hello Alex,

The recommended approach in this scenario is to use data templates. If you would specify the content you wish to display in the RadListBox as well as the properties your business objects should possess, I would gladly suggest a viable solution for you.

I'm looking forward to your reply.

Regards,
Dilyan Traykov
Telerik by Progress