TileView with multiple maximized items

2 posts, 0 answers
  1. Mar
    Mar avatar
    7 posts
    Member since:
    Mar 2015

    Posted 22 Mar 2015 Link to this post


    I want to implement something like TileView that has multiple maximized items.
    The ways we get multiple maximized are:
    1. Dragging minimized item to maximized items area.
    2. Clicking on the "All" button that shows all the items in the maximized area, with eqaul space for every item.
    (Concept attached)

    I'd like to mention that the minimzed items list (which will be located at the bottom) shouldn't remove the dragged and dropped item.
    Any item from the maximized area should be removed by 'X' button (and will stay at the minimized items list at the buttom).

    I tried to define RadTileView as the content template in order to enable the re-ordering by dragging behavior, and because it's already handling the equal space allocation for the items.

                <Style TargetType="telerik:RadTileViewItem">
                    <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
            <telerik:RadTileView x:Name="tileView1" BorderBrush="#6BC6FF" BorderThickness="2" Margin="10"  MinimizedItemsPosition="Bottom" MaximizeMode="ZeroOrOne">
                        <telerik:RadTileView BorderBrush="#6BC6FF" BorderThickness="2" Margin="10">

    Is there an out-of-the-box solution for my needs?
    Am I in the right way, or what I'm tryind to do is overkill (TileGridView as ContentTemplate)?
    Maybe I should do something like that: Define one and only fixed maximixed item that it's ContentTemplate will be RadTileView (or maybe RadDocking) and override its header style to be empty (we will set the Template property with empty ControlTemplate)? 

    Thanks for your support!
  2. Pavel R. Pavlov
    Pavel R. Pavlov avatar
    1165 posts

    Posted 24 Mar 2015 Link to this post

    Hi Mar,

    The required behavior is not supported out of the box by the RadTileView control. However, there is a way to accomplish your scenario using only the RadTileView and implementing some custom Drag&Drop logic.

    For your scenario you can use two RadTileViews. One with larger dimensions and two columns (RadTileView.ColumnsCount = 2) which will host the so called "Maximized" items and the other with smaller dimensions and one row (RadTileView.RowsCount = 1) hosting the so called "Minimized" items. All the items in both controls should be in their Restored state. This is the state that shares equal space over all items.

    When you create this structure you will be able to implement a copy drac logic using our DragDropManager which will copy the items from the smaller RadTileView and paste them into the larger one.

    I hope this information will get you started.

    Pavel R. Pavlov

    See What's Next in App Development. Register for TelerikNEXT.

  3. DevCraft R3 2016 release webinar banner
Back to Top