dynamically adding usercontrols as a tileviewitem

9 posts, 3 answers
  1. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 26 Feb 2015 Link to this post

    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.
  2. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 02 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 11 Mar 2015 in reply to Pavel R. Pavlov Link to this post

    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
  5. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 13 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 16 Mar 2015 in reply to Pavel R. Pavlov Link to this post

    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....
  7. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 19 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 19 Mar 2015 in reply to Pavel R. Pavlov Link to this post

    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.





  9. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 23 Mar 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  10. sai
    sai avatar
    43 posts
    Member since:
    Feb 2015

    Posted 25 Mar 2015 in reply to Pavel R. Pavlov Link to this post

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