This is a migrated thread and some comments may be shown as answers.

Reflect changed position of tiles back into the ItemsSource collection

11 Answers 150 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 2
Alex asked on 03 Jun 2011, 03:03 PM
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.

11 Answers, 1 is accepted

Sort by
0
Accepted
Tina Stancheva
Telerik team
answered on 08 Jun 2011, 11:14 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Alex
Top achievements
Rank 2
answered on 08 Jun 2011, 11:17 AM
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.
0
Accepted
Zarko
Telerik team
answered on 10 Jun 2011, 05:28 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Alex
Top achievements
Rank 2
answered on 12 Jun 2011, 11:26 AM
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.
0
Ben Jones
Top achievements
Rank 1
answered on 28 Jul 2011, 11:36 AM
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
0
Zarko
Telerik team
answered on 29 Jul 2011, 01:41 PM
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

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!

0
Peter
Top achievements
Rank 1
answered on 02 Sep 2011, 10:25 AM

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

0
Alex
Top achievements
Rank 2
answered on 02 Sep 2011, 10:31 AM
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.
0
Peter
Top achievements
Rank 1
answered on 03 Sep 2011, 11:35 AM

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
0
Zarko
Telerik team
answered on 06 Sep 2011, 05:07 PM
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

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

0
Peter
Top achievements
Rank 1
answered on 09 Sep 2011, 12:01 PM
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}"
Tags
TileView
Asked by
Alex
Top achievements
Rank 2
Answers by
Tina Stancheva
Telerik team
Alex
Top achievements
Rank 2
Zarko
Telerik team
Ben Jones
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Share this question
or