Intersoft Community - ClientUI - UXListBox DragEvent

UXListBox DragEvent

rasmister — Fri, 14 Jan 2011 10:19:08 GMT

Andry,

That's great, thank you all!

Ross

UXListBox DragEvent

ansoesil — Fri, 14 Jan 2011 04:10:30 GMT

Hi Ross,

Your request to have property that populated with collection of drop items before its processed is actually a good idea to accomodate common practice in MVVM concept. Therefore the development team already put this request in high priority enhancement that you can get in the next hotfix.

So in a glance the new property that you can listen to is DropItems. This DropItems property will be populated right before the internal process to update the collection, and will be resetted after ward.

In your VIewModel, you need to have something like:

        public ObservableCollection<object> DropItems
        {
            get
            {
                return this._dropItems;
            }
            set
            {
                if (this._dropItems != value)
                {
                    this._dropItems = value;

                    if (this._dropItems != null)
                    {
                        Data data = this._dropItems[0] as Data;
                        data.Property1 = "new string";

                        // you can also clear the items if needed
                        // this._dropItems.Clear();
                    }

                    this.OnPropertyChanged("DropItems");
                }
            }
        }

Will notify you again when the hotfix is available.

Regards

Andry

UXListBox DragEvent

rasmister — Wed, 12 Jan 2011 09:03:57 GMT

Andry,

Your last paragraph is how I solved it in MVVM. It would be handy however to have a property that fired BEFORE the collection was modified so we can intercept it.

Ross

UXListBox DragEvent

ansoesil — Tue, 11 Jan 2011 22:35:24 GMT

Drop event is considered interaction in View, so you need to attached Drop event handler at UXListBox and handle it in the View if you want to intercept the drop event.

You can declare the event handler directly in XAML.

<Intersoft:UXListBox x:Name="lbMyMemberships" Drop="lbMyMemberships_Drop">

And handle it at code behind.

using Intersoft.Client.UI.Controls.Interactivity;

private void lbMyMemberships_Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e)
{
        UIElement sourceElement = e.GetSourceElement();
        IList<UIElement> dropElements = e.GetDropElements();

 // to do
}

Note that the e.GetSourceElement() , e.GetDropElements() and some other methods are extensions method. You need to import the Intersoft.Client.UI.Controls.Interactivity namespace.

Besides using direct event handler in XAML you can also handle it using EventManager. The Drop event and other related drag drop event is a routed event handler.

public MainPage()
{
    // Required to initialize variables
    InitializeComponent();

    ISEventManager.RegisterInstanceHandler(
        this.LayoutRoot, // any element in the routed path which applicable in your scenario
        DragDrop.DropEvent, // the routed event
        new Intersoft.Client.UI.Controls.Interactivity.DragEventHandler(lbMyMemberships_Drop), // the event handler
        true);
}

private void lbMyMemberships_Drop(object sender, Intersoft.Client.UI.Controls.Interactivity.DragEventArgs e)
{
        UIElement sourceElement = e.GetSourceElement();
        IList<UIElement> dropElements = e.GetDropElements();

 // to do
}

To learn more about handling routed events, see http://intersoftpt.com/Support/ClientUI/Docs/RoutedEventsOverview.html

Another perspective for this matter is intercepting the "Drop Event" in ViewModel. However this is limited to changes in data. For example if you drag an item from another UXListBox to this UXListBox, the itemsource collection will be changed. Therefore you can add CollectionChanged event handler at your ItemsSource collection in ViewModel and do additional tasks in that event handler.

Hope this helps

Regards

Andry

UXListBox DragEvent

rasmister — Tue, 11 Jan 2011 16:09:52 GMT

After reviewing the documentation, I was still unclear how I could intercept a Drop event in an MVVM environment. Does anyone know how this can be done? Below is my UXListBox.

<Intersoft:UXListBox x:Name="lbMyMemberships" ItemsSource="{Binding OCMyMemberships, Mode=TwoWay}" SelectedItem="{Binding CurrentMyMemberships, Mode=TwoWay}" Margin="2" Height="331" ImageMemberPath="IconName" DisplayMemberPath="Description" AllowDropItem="True" AllowMoveItem="True" AllowRemoveItem="False" ItemContentType="ContentAndImage" ItemImageHeight="32" ItemImageWidth="32" ItemImageStretch="Fill" Style="{StaticResource UXListBoxTransparentStyle}" >

<i:Interaction.Behaviors>

<Intersoft:DropTargetBehavior AllowDropItem="True"/>

</i:Interaction.Behaviors>

</Intersoft:UXListBox>

Thanks,

Ross