Hello Guys,
I'm new to the drag-drop and am testing the needs I have. I come across some confusing things I must say; some old/new behavior may-be.
The scenario I want: 2 Listboxes, drag left to right, but the left listbox is not to be changed and the right one can thus contain more items of the same type. finally I want the right listbox to allow reorder via drag/drop.
I've seen the online demo, and this does some of what I want:
http://demos.telerik.com/silverlight/#DragAndDrop/FirstLook
I also did the exercize on this "getting started":
http://www.telerik.com/help/silverlight/raddraganddrop-getting-started-with-drag-and-drop.html
The confusing thing is that the "Getting Started" uses code events (something I want, because I anticipate this need to take control in the future) and the Online Example has no code. The "Getting Started" has something like this:
<Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True" />
While the online example does this:
<Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
( ^ is not possible in the "Getting Started" ?)
Whats the difference between the 2?
I did manage to create a app where I can drag items left > right and on drop a new items is created, and the left list stays in tact. Multiple items of the same type is thus a go.
What I want is that the auto rearange that is automatically done in the Online example (right box) where you can pick up the 2nd item and place it between the 4rd and 5th is done in my app to. But I do not have a clue how. Here's the code so far:
XAML:
And here's the code:
So, how can I get the rearangeing to work?
also, where can i find some more info about the 4 events, or don't I need them at all?
Thanks in advance,
Erik
I'm new to the drag-drop and am testing the needs I have. I come across some confusing things I must say; some old/new behavior may-be.
The scenario I want: 2 Listboxes, drag left to right, but the left listbox is not to be changed and the right one can thus contain more items of the same type. finally I want the right listbox to allow reorder via drag/drop.
I've seen the online demo, and this does some of what I want:
http://demos.telerik.com/silverlight/#DragAndDrop/FirstLook
I also did the exercize on this "getting started":
http://www.telerik.com/help/silverlight/raddraganddrop-getting-started-with-drag-and-drop.html
The confusing thing is that the "Getting Started" uses code events (something I want, because I anticipate this need to take control in the future) and the Online Example has no code. The "Getting Started" has something like this:
<Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True" />
While the online example does this:
<Setter Property="telerik:DragDropManager.AllowDrag" Value="True" />
<Setter Property="telerik:DragDropManager.AllowCapturedDrag" Value="True" />
( ^ is not possible in the "Getting Started" ?)
Whats the difference between the 2?
I did manage to create a app where I can drag items left > right and on drop a new items is created, and the left list stays in tact. Multiple items of the same type is thus a go.
What I want is that the auto rearange that is automatically done in the Online example (right box) where you can pick up the 2nd item and place it between the 4rd and 5th is done in my app to. But I do not have a clue how. Here's the code so far:
XAML:
<
UserControl
xmlns:my
=
"clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
x:Class
=
"XXXXX.MainPage"
xmlns:telerik
=
"http://schemas.telerik.com/2008/xaml/presentation"
xmlns:local
=
"clr-namespace:XXXXXXX.Desktop"
mc:Ignorable
=
"d"
d:DesignWidth
=
"640"
d:DesignHeight
=
"480"
>
<
UserControl.Resources
>
<
DataTemplate
x:Key
=
"ApplicationDragTemplate"
>
<
Image
Source
=
"{Binding IconPath}"
Stretch
=
"None"
VerticalAlignment
=
"Top"
/>
</
DataTemplate
>
<
Style
TargetType
=
"ListBoxItem"
x:Key
=
"draggableItemStyle"
>
<
Setter
Property
=
"HorizontalAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"HorizontalContentAlignment"
Value
=
"Stretch"
/>
<
Setter
Property
=
"Foreground"
Value
=
"#000000"
/>
<
Setter
Property
=
"telerik:RadDragAndDropManager.AllowDrag"
Value
=
"True"
/>
</
Style
>
</
UserControl.Resources
>
<
Grid
x:Name
=
"LayoutRoot"
>
<
Grid.ColumnDefinitions
>
<
ColumnDefinition
Width
=
"2*"
/>
<
ColumnDefinition
Width
=
"10"
/>
<
ColumnDefinition
Width
=
"4*"
/>
</
Grid.ColumnDefinitions
>
<
ListBox
x:Name
=
"allApplicationsBox"
telerik:RadDragAndDropManager.AllowDrop
=
"False"
ItemContainerStyle
=
"{StaticResource draggableItemStyle}"
>
<
ListBox.ItemTemplate
>
<
DataTemplate
>
<
Grid
Width
=
"150"
>
<
Grid.RowDefinitions
>
<
RowDefinition
/>
<
RowDefinition
/>
<
RowDefinition
/>
</
Grid.RowDefinitions
>
<
Image
Grid.Row
=
"0"
HorizontalAlignment
=
"Center"
Source
=
"{Binding IconPath}"
Width
=
"32"
Height
=
"32"
Margin
=
"0 0 5 0"
/>
<
TextBlock
Grid.Row
=
"1"
Text
=
"{Binding Name}"
FontWeight
=
"Bold"
HorizontalAlignment
=
"Center"
/>
<
TextBlock
Text
=
"{Binding Author}"
Grid.Row
=
"2"
HorizontalAlignment
=
"Center"
/>
</
Grid
>
</
DataTemplate
>
</
ListBox.ItemTemplate
>
</
ListBox
>
<!--My Applications-->
<
ListBox
x:Name
=
"myApplicationsBox"
telerik:RadDragAndDropManager.AllowDrop
=
"True"
ItemContainerStyle
=
"{StaticResource draggableItemStyle}"
Grid.Column
=
"2"
>
<
ListBox.ItemTemplate
>
<
DataTemplate
>
<
StackPanel
VerticalAlignment
=
"Stretch"
HorizontalAlignment
=
"Stretch"
>
<
Image
Source
=
"{Binding IconPath}"
Margin
=
"0 0 3 0"
HorizontalAlignment
=
"Center"
/>
<
TextBlock
Text
=
"{Binding Name}"
HorizontalAlignment
=
"Center"
/>
</
StackPanel
>
</
DataTemplate
>
</
ListBox.ItemTemplate
>
<
ListBox.ItemsPanel
>
<
ItemsPanelTemplate
>
<
telerik:RadUniformGrid
Columns
=
"3"
HorizontalAlignment
=
"Left"
VerticalAlignment
=
"Top"
/>
</
ItemsPanelTemplate
>
</
ListBox.ItemsPanel
>
</
ListBox
>
</
Grid
>
</
UserControl
>
And here's the code:
Imports
System.Collections.ObjectModel
Imports
Telerik.Windows.Controls.DragDrop
Imports
System.Windows.Browser
Partial
Public
Class
MainPage
Inherits
UserControl
Private
Sub
CreateItem(
ByRef
aobj_Data
As
ObservableCollection(Of ApplicationInfo),
ByVal
astr_Type
As
String
)
With
aobj_Data
Select
Case
astr_Type.Trim.ToLower
Case
"Atom"
.ToLower : .Add(
New
ApplicationInfo(
"Atom"
,
"images/Atom.png"
,
"C.E.R.N."
,
"Large Collider"
))
Case
"Brush"
.ToLower : .Add(
New
ApplicationInfo(
"Brush"
,
"Images/Brush.png"
,
"Imagine Inc."
,
"Paintbrush"
))
Case
"Calendar"
.ToLower : .Add(
New
ApplicationInfo(
"Calendar"
,
"Images/CalendarEvents.png"
,
"Control AG"
,
"Lively Calendar"
))
Case
"CDBurn"
.ToLower : .Add(
New
ApplicationInfo(
"CDBurn"
,
"Images/CDBurn.png"
,
"The CD Factory"
,
"Fire Burning ROM"
))
Case
"favo"
.ToLower : .Add(
New
ApplicationInfo(
"favo"
,
"Images/favorites.png"
,
"Star Factory"
,
"Fav Explorer"
))
Case
"Connected"
.ToLower : .Add(
New
ApplicationInfo(
"Connected"
,
"Images/Connected.png"
,
"Open Org"
,
"IE Fox"
))
Case
"ChartDot"
.ToLower : .Add(
New
ApplicationInfo(
"ChartDot"
,
"Images/ChartDot.png"
,
"AA-AZ inc"
,
"Charting"
))
Case
"Games"
.ToLower : .Add(
New
ApplicationInfo(
"Games"
,
"Images/Games.png"
,
"EB Games"
,
"SuperPlay"
))
End
Select
End
With
End
Sub
Public
Function
GenerateApplicationInfos1()
As
ObservableCollection(Of ApplicationInfo)
Dim
data
As
New
ObservableCollection(Of ApplicationInfo)()
CreateItem(data,
"Atom"
)
CreateItem(data,
"Brush"
)
CreateItem(data,
"Calendar"
)
CreateItem(data,
"CDBurn"
)
CreateItem(data,
"favo"
)
CreateItem(data,
"Connected"
)
CreateItem(data,
"ChartDot"
)
CreateItem(data,
"Games"
)
Return
data
End
Function
Public
Function
GenerateApplicationInfos2()
As
ObservableCollection(Of ApplicationInfo)
Dim
data
As
New
ObservableCollection(Of ApplicationInfo)()
CreateItem(data,
"Games"
)
Return
data
End
Function
Private
allApplications
As
ObservableCollection(Of ApplicationInfo) = GenerateApplicationInfos1()
Private
myApplications
As
ObservableCollection(Of ApplicationInfo) = GenerateApplicationInfos2()
Public
Sub
New
()
InitializeComponent()
allApplicationsBox.ItemsSource = allApplications
myApplicationsBox.ItemsSource = myApplications
RadDragAndDropManager.AddDragQueryHandler(
Me
,
AddressOf
OnDragQuery)
RadDragAndDropManager.AddDragInfoHandler(
Me
,
AddressOf
OnDragInfo)
RadDragAndDropManager.AddDropQueryHandler(
Me
,
AddressOf
OnDropQuery)
RadDragAndDropManager.AddDropInfoHandler(
Me
,
AddressOf
OnDropInfo)
End
Sub
<ScriptableMember()> _
Public
Sub
CallMeInSilverlight(
ByVal
astr_Command
As
String
)
End
Sub
Private
Sub
OnDragQuery(sender
As
Object
, e
As
DragDropQueryEventArgs)
Dim
listBoxItem
As
ListBoxItem = TryCast(e.Options.Source, ListBoxItem)
Dim
box
As
ListBox = TryCast(ItemsControl.ItemsControlFromItemContainer(listBoxItem), ListBox)
If
e.Options.Status = DragStatus.DragQuery
AndAlso
box IsNot
Nothing
Then
e.Options.Payload = box.SelectedItem
Dim
cue
As
New
ContentControl()
cue.ContentTemplate = TryCast(
Me
.Resources(
"ApplicationDragTemplate"
), DataTemplate)
cue.Content = box.SelectedItem
e.Options.DragCue = cue
e.Options.ArrowCue = RadDragAndDropManager.GenerateArrowCue()
End
If
e.QueryResult =
True
End
Sub
Private
Sub
OnDragInfo(sender
As
Object
, e
As
DragDropEventArgs)
Dim
listBoxItem
As
ListBoxItem = TryCast(e.Options.Source, ListBoxItem)
Dim
box
As
ListBox = TryCast(ItemsControl.ItemsControlFromItemContainer(listBoxItem), ListBox)
Dim
itemsSource
As
IList(Of ApplicationInfo) = TryCast(box.ItemsSource, IList(Of ApplicationInfo))
Dim
payload
As
ApplicationInfo = TryCast(e.Options.Payload, ApplicationInfo)
If
e.Options.Status = DragStatus.DragComplete
Then
If
payload IsNot
Nothing
AndAlso
itemsSource.Contains(payload)
Then
'itemsSource.Remove(payload)
End
If
End
If
End
Sub
Private
Sub
OnDropQuery(sender
As
Object
, e
As
DragDropQueryEventArgs)
Dim
box
As
ItemsControl = TryCast(e.Options.Destination, ItemsControl)
Dim
itemsSource
As
IList(Of ApplicationInfo) = TryCast(box.ItemsSource, IList(Of ApplicationInfo))
Dim
payload
As
ApplicationInfo = TryCast(e.Options.Payload, ApplicationInfo)
e.QueryResult = payload IsNot
Nothing
AndAlso
Not
itemsSource.Contains(payload)
End
Sub
Private
Sub
OnDropInfo(sender
As
Object
, e
As
DragDropEventArgs)
Dim
box
As
ItemsControl = TryCast(e.Options.Destination, ItemsControl)
Dim
itemsSource
As
IList(Of ApplicationInfo) = TryCast(box.ItemsSource, IList(Of ApplicationInfo))
Dim
payload
As
ApplicationInfo = TryCast(e.Options.Payload, ApplicationInfo)
If
e.Options.Status = DragStatus.DropComplete
Then
'If Not itemsSource.Contains(payload) Then
CreateItem(itemsSource, payload.TypeCode)
' itemsSource.Add(payload)
'End If
End
If
End
Sub
End
Class
Public
Class
ApplicationInfo
Public
Sub
New
(
ByVal
astr_TypeCode
As
String
,
ByVal
astr_IconPath
As
String
,
ByVal
astr_Name
As
String
,
ByVal
astr_Author
As
String
)
Me
.TypeCode = astr_TypeCode
Me
.IconPath = astr_IconPath
Me
.Name = astr_Name
Me
.Author = astr_Author
End
Sub
Public
Property
TypeCode()
As
[
String
]
Get
Return
m_TypeCode
End
Get
Set
(value
As
[
String
])
m_TypeCode = value
End
Set
End
Property
Private
m_TypeCode
As
[
String
]
Public
Property
IconPath()
As
[
String
]
Get
Return
m_IconPath
End
Get
Set
(value
As
[
String
])
m_IconPath = value
End
Set
End
Property
Private
m_IconPath
As
[
String
]
Public
Property
Name()
As
[
String
]
Get
Return
m_Name
End
Get
Set
(value
As
[
String
])
m_Name = value
End
Set
End
Property
Private
m_Name
As
[
String
]
Public
Property
Author()
As
[
String
]
Get
Return
m_Author
End
Get
Set
(value
As
[
String
])
m_Author = value
End
Set
End
Property
Private
m_Author
As
[
String
]
End
Class
So, how can I get the rearangeing to work?
also, where can i find some more info about the 4 events, or don't I need them at all?
Thanks in advance,
Erik