I have a WPF application in which I load a multipage tiff file and use the TileView Control to display the BitmapFrames in tiles. The end user needs to change the order of the pages(tiles) and the save the tiff. The dragging of the tiles works ok but I also need to change the order of the objects in the ObservableCollection<PageViewModel> which is bound to the ItemsSource of the TileView. How can I achieve that ?
Thanks,
Alex.
11 Answers, 1 is accepted
The RadTileView doesn't change its ItemsSource collection when the TileViewItems are rearranged through drag operations. However, the RadTileViewItem has a property called Position that you can bind to a property from your ViewModel. If the binding is a TwoWay binding, then the changes in the TileViewItems position will be reflected in the business properties as well. This will allow you to sort the ItemsSource collection of the RadTileView by the Position property thus getting the rearranged collection of items.
I hope that info helps. You can read more about the RadTileViewItem's Position property here.
Regards,
Tina Stancheva
the Telerik team
That sounds about right I just have one more concern: by sorting the collection of viewmodels, won't that change the position of tiles ? I mean if I interchange two objects in the collection then simply by the binding set on ItemsSource the tiles will be displayed different. Right ?
Alex.
The tiles in the RadTileView are always ordered by their position, but more importantly when you order the ItemsSource with the OrderBy method it doesn't change the ItemsSource it returns new IEnumerable that is ordered. If you change the position of an item in the collection (it's index; by insert etc.) this will affect the display of the items.
For further references could you please examine the attached project and if you have more questions feel free to ask.
Greetings,
Zarko
the Telerik team
Thanks for your advice, I now understand the whole thing and I have managed to achieve my goal. Great jobs with the controls, keep up the good work!
Alex.
I have an extension to this question: if I have a list of business obejcts bound to the tileview, is it possible to enable reordering of the tile items in as shift up/ down mode, as opposed to a swap mode as it currently is?
i.e. at the moment if item 1 is moved to the position of item 4, item 4 takes item 1's position. I'd like a mode whereby items 2 and item 3 move down so 1,2,3,4 become 2,3,1,4 or 2,3,4,1 depending on where I end the drop.
Is this a feature that is ebing considered?
Kind Regards
Unfortunately at the moment this behavior is not supported by the RadTileView. I've added a feature request in our PITS under the name "Add a DragMode that doesn't swap the items but inserts the DraggedItem on the drop position" and it will be ready for tracking and voting tomorrow the latest.
For now I can give you a work around with some code behind - please examine the attached project and if you have more questions feel free to ask.
All the best,
Zarko
the Telerik team
Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!
Hello
The TileViewPositionExample is very interesting and works fine. But I have some problems to transfer this to a pure WPF application (and not Silverlight) since there is no ContainerBindingCollection.
Do you have a WPF sample (probably in VB)
Thanks
Peter
As far as I know WPF allows binding to a value of a propertySetter in Style, so you don't need the ContainerBinding trick that is done in Silverlight. I am not sure that this is what you need.
Can you provide some more details ?
Alex.
Hi Alex
I still have the problem, that the position property is not changed when i reorder the items in the TileView per mouse. However, changing the value in the TextBox does update the ObservableCollection. Some of the bindings are not correct. But I don’t see how I have to set them correctly. Here is my code:
<
DataTemplate
x:Key
=
"BildHeaderTemplate"
>
<
StackPanel
Orientation
=
"Horizontal"
>
<
TextBox
Text
=
"{Binding Position, Mode=TwoWay}"
Margin
=
"0,0,5,0"
/>
<
TextBlock
Text
=
"{Binding Name}"
/>
</
StackPanel
>
</
DataTemplate
>
<
DataTemplate
x:Key
=
"BildTemplateX"
>
<
Border
Background
=
"LightSteelBlue"
>
<
StackPanel
>
<
TextBlock
Text
=
"Current position: "
/>
<
TextBlock
Text
=
"{Binding Position}"
/>
<
Image
Source
=
"{Binding ThumbA}"
Stretch
=
"Uniform"
/>
</
StackPanel
>
</
Border
>
</
DataTemplate
>
....
<
telerik:RadTileView
x:Name
=
"TV"
Grid.Column
=
"1"
Grid.Row
=
"2"
IsVirtualizing
=
"True"
IsAutoScrollingEnabled
=
"True"
MinimizedColumnWidth
=
"150"
TileStateChangeTrigger
=
"SingleClick"
ItemTemplate
=
"{StaticResource BildHeaderTemplate}"
ContentTemplate
=
"{StaticResource BildTemplateX}"
ColumnWidth
=
"{Binding ElementName=SliderColWidth, Path=Value}"
RowHeight
=
"{Binding ElementName=SliderColWidth, Path=Value}"
Margin
=
"10,0,0,0"
>
</
telerik:RadTileView
>
Public Class Bild
Implements INotifyPropertyChanged
Private m_position As Integer = 0
Public Property Filename As String
Public Property Name As String
Public Property Size As Long
Public Property Creation As DateTime
Public Property Position() As Integer
Get
Return m_position
End Get
Set(value As Integer)
If m_position <> value Then
m_position = value
OnPropertyChanged("Position")
End If
End Set
End Property
Public Event PropertyChanged(sender As Object, e As PropertyChangedEventArgs) Implements INotifyPropertyChanged.PropertyChanged
Protected Sub OnPropertyChanged(propertyName As String)
RaiseEvent PropertyChanged(Me, New PropertyChangedEventArgs(propertyName))
End Sub
Public ReadOnly Property ThumbA As BitmapImage
Get
Dim bi As BitmapImage = New BitmapImage()
bi.BeginInit()
bi.DecodePixelWidth = 200
bi.CacheOption = BitmapCacheOption.OnLoad
bi.UriSource = New Uri(Filename)
bi.EndInit()
Return bi
End Get
End Property
End Class
In the MainWindow code:
Public Shared Bilder As ObservableCollection(Of Bild) = New ObservableCollection(Of Bild)
TV.ItemsSource = Bilder
I've attached a sample project with the code for the F1 example in WPF so could you please examine it and if you have more questions feel free to ask.
Regards,
Zarko
the Telerik team
Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>
<
Style
TargetType
=
"telerik:RadTileViewItem"
x:Key
=
"itemStyle"
>
<
Setter
Property
=
"Position"
Value
=
"{Binding Position, Mode=TwoWay, Converter={StaticResource PositionConverter1}}"
/>
</
Style
>
<telerik:RadTileView x:Name="TV" ItemContainerStyle="{StaticResource itemStyle}"