dynamically adding usercontrols as a tileviewitem

[sai]

i have wpf tileview.

i am binding list of usercontrols as a itemsource to tileview

like below
<radtileview itemsource="{binding viewelements,mode=twoway}"/>

here viewelement is just usercontrol.

and i am binding list of viewelements.

what features i have to enable for tileview to provide drag and drop feature.

please try to provide the solution asap.

[Pavel R. Pavlov]

Hello,

As far as I understand you need to implement MVVM scenario using our RadTileView component. This can be achieved in fairly simple way. You need to create an object (just a class) which will hold the data that should be visualized in 1 RadTileViewItem. This will be your business object. The next step should be to create a collection of such items (e.g. ObservableCollection<YourBusinessItem>). If you set this collection as ItemsSource of the RadTileView, you will allow the RadTileView to create UI containers for each of the business items in that collection. Furthermore, you can control the appearance of the UI containers via DataTemplates. You can define a DataTemplate constructing the look of 1 RadTileViewItem and then you will be able to use bindings to populate the UI components with the data held by your business items.

Such approach is demonstrated in this article. Please take a look at it and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[sai]

Hi,

Your solution help me to make enable to drag and drop in my project.

And i have another scanario which i have to implement in my project.

I have some items in radtreeview controls.and i have tileview control.

right as per the treeview item selection i am creating the tileviewitem in the tileview dashboard.

But the requirement is i have ti implement the drag and drop from only treeview to tileview.

Could you help me out to implement this.

i have attached the screen shot of my application.

and i have to show the treeviewitem when i am doing to drag and until to drop in the respective area of tileview.
 Thank you

[Pavel R. Pavlov]

Hi,

To achieve your requirement you can take advantage of the default drag&drop logic implemented in the RadTreeView control. You can use the TreeViewDragDropOptions object to easily get the dragged items and to fully customize the look of the drag visual.

Furthermore, you can take advantage of the DragDropManager to handle the drop of the items. The attached project demonstrates simple implementation of your requirements. You can use it to start your implementation.

Please take a look at it and let us know if you need any further assistance.

Regards,
Pavel R. Pavlov
Telerik

 

 

[sai]

Hi pavel,

Your solution really helps me alot.

And i have small problem with dragvisual.

I have below controltemplate in my resourcedictionary.i would like to display this controltemplate when i ma doing drag from treeview to tileview.

 <ControlTemplate x:Key="SelectedSingleSeriesChart">
        <Canvas Height="124.657" Canvas.Left="0" Canvas.Top="0" Width="191.691">
            <Path Data="F1M265.888,189.709L74.197,189.709L74.197,69.7329999999999L265.888,69.7329999999999z" Fill="White" Height="124.657" Canvas.Left="0" Stretch="Fill" Canvas.Top="0" Width="191.691" Effect="{DynamicResource DropShadow}"/>
            <Path Data="F1M87.605,160.417L109.675,160.417L109.675,186.444L87.605,186.444z" Fill="#FF40B9A6" Height="26.027" Canvas.Left="13.218" Opacity="0.80000299215316772" Stretch="Fill" Canvas.Top="90.680" Width="22.07"/>
            <Path Data="F1M123.373,134.256L145.443,134.256L145.443,186.441L123.373,186.441z" Fill="#FF40B9A6" Height="52.185" Canvas.Left="48.986" Opacity="0.80000299215316772" Stretch="Fill" Canvas.Top="64.523" Width="22.07"/>
            <Path Data="F1M159.141,110.417L181.21,110.417L181.21,186.434L159.141,186.434z" Fill="#FF40B9A6" Height="76.017" Canvas.Left="84.754" Opacity="0.80000299215316772" Stretch="Fill" Canvas.Top="40.684" Width="22.069"/>
            <Path Data="F1M194.909,146.439L216.978,146.439L216.978,186.445L194.909,186.445z" Fill="#FF40B9A6" Height="40.006" Canvas.Left="120.522" Opacity="0.80000299215316772" Stretch="Fill" Canvas.Top="76.705" Width="22.069"/>
            <Path Data="F1M230.676,128.761L252.745,128.761L252.745,186.44L230.676,186.44z" Fill="#FF40B9A6" Height="57.679" Canvas.Left="156.289" Opacity="0.80000299215316772" Stretch="Fill" Canvas.Top="59.027" Width="22.069"/>
        </Canvas>
    </ControlTemplate>

Please help me out on this.

Advance thanks....

[Pavel R. Pavlov]

Hello Sai,

Maybe in your case it would be better if you set the ContentTemplate property of the TreeViewDragVisual instead of its Template property. You can try defining the DataTemplate that you need as an Application resource and then you will be able to apply it in a similar manner:

private void OnTreeDragInitialized(object sender, DragInitializeEventArgs e)
{
    var options = DragDropPayloadManager.GetDataFromObject(e.Data, TreeViewDragDropOptions.Key) as TreeViewDragDropOptions;
    if (options != null)
    {

        (options.DragVisual as TreeViewDragVisual).ContentTemplate = Application.Current.Resources["SelectedSingleSeriesChart"] as DataTemplate;
    }
}

Please give this a try and let me know if you need any further assistance on that matter.

Regards,
Pavel R. Pavlov
Telerik

 

 

[sai]

Hi pavel,

Thanks for your quick solution.Yesterday i have achived same .now its working fine.
Right now i am doing drag from treeview and drop in tileview.As per item droping i am adding tileviewitem in the tileview.
I need to do some enhancement in this work.When i drop the treeviewitem in the tileview, tilevieitem getting create at last and it can be done at first position also.But i want to implement some thing different,that is where ever i drop the treeviewitem in the same position i want to create my tileview item.what i can do to achive this requirement.
Please help me out on this.

[Pavel R. Pavlov]

Hello Sai,

The requests behavior is not supported out of the box.

However, you can change the position of the item that is currently dropped inside the RadTileView control by changing the RadTileViewItem.Position property. You will need to implement logic which will detect where the user is trying to drop the item. You should consider the position of the mouse, the number of the items and their state. Based on that information you will be able to decide where to drop the new RadTileViewItem.

Regards,
Pavel R. Pavlov
Telerik

 

 

[sai]

Thank you Pavel,

I will check my business requirement and ll have a discussion on this how we would like to implement this.then i will come back to you.