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

TileView with multiple maximized items

1 Answer 77 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Mar
Top achievements
Rank 1
Mar asked on 22 Mar 2015, 04:19 PM
Hi,

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.


<Grid>
        <Grid.Resources>
            <Style TargetType="telerik:RadTileViewItem">
                <Setter Property="Position" Value="{Binding Position, Mode=TwoWay}" />
            </Style>
        </Grid.Resources>
 
        <telerik:RadTileView x:Name="tileView1" BorderBrush="#6BC6FF" BorderThickness="2" Margin="10"  MinimizedItemsPosition="Bottom" MaximizeMode="ZeroOrOne">
            <i:Interaction.Behaviors>
                <behaviors:TileViewItemDropBehavior/>
                <behaviors:TileViewItemDragBehavior/>
            </i:Interaction.Behaviors>
            <telerik:RadTileView.ContentTemplate>
                <DataTemplate>
                    <telerik:RadTileView BorderBrush="#6BC6FF" BorderThickness="2" Margin="10">
                        <i:Interaction.Behaviors>
                            <behaviors:TileViewItemDropBehavior/>
                            <behaviors:TileViewItemDragBehavior/>
                        </i:Interaction.Behaviors>
                    </telerik:RadTileView>
                </DataTemplate>
            </telerik:RadTileView.ContentTemplate>
             
        </telerik:RadTileView>
        </Grid>



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!

1 Answer, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 24 Mar 2015, 06:58 AM
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.

Regards,
Pavel R. Pavlov
Telerik
 

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

 
Tags
TileView
Asked by
Mar
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Share this question
or