Reflect changed position of tiles back into the ItemsSource collection

12 posts, 2 answers
  1. Alex
    Alex avatar
    13 posts
    Member since:
    Aug 2010

    Posted 03 Jun 2011 Link to this post

    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.
  2. Answer
    Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 08 Jun 2011 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Alex
    Alex avatar
    13 posts
    Member since:
    Aug 2010

    Posted 08 Jun 2011 Link to this post

    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.
  5. Answer
    Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 10 Jun 2011 Link to this post

    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
  6. Alex
    Alex avatar
    13 posts
    Member since:
    Aug 2010

    Posted 12 Jun 2011 Link to this post

    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.
  7. Ben Jones
    Ben Jones avatar
    12 posts
    Member since:
    Jun 2009

    Posted 28 Jul 2011 Link to this post

    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
  8. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 29 Jul 2011 Link to this post

    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!

  9. Peter
    Peter avatar
    12 posts
    Member since:
    May 2010

    Posted 02 Sep 2011 Link to this post

    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

  10. Alex
    Alex avatar
    13 posts
    Member since:
    Aug 2010

    Posted 02 Sep 2011 Link to this post

    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.
  11. Peter
    Peter avatar
    12 posts
    Member since:
    May 2010

    Posted 03 Sep 2011 Link to this post

    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
  12. Zarko
    Admin
    Zarko avatar
    755 posts

    Posted 06 Sep 2011 Link to this post

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

  13. Peter
    Peter avatar
    12 posts
    Member since:
    May 2010

    Posted 09 Sep 2011 Link to this post

    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}"
Back to Top
UI for WPF is Visual Studio 2017 Ready