Reflect changed position of tiles back into the ItemsSource collection

[Alex]

Hello,

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.

[Tina Stancheva]

Hello Alex,

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

[Alex]

Hello,

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.

[Zarko]

Hello 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

[Alex]

Hello,

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.

[Ben Jones]

Hi there,

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

[Zarko]

Hi Ben Jones,
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

[Peter]

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

[Alex]

Hi 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.

[Peter]

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

[Zarko]

Hi Peter,
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

[Peter]

Thanks a lot! the key was:

<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}"