RadTileView with MVVM and Persistence framework

[Sajid Ali]

Hi all,
can somebody look at the code and tell me what's i am doing wrong.

My Dashboard XML

<UserControl x:Class="SimpleModule.Views.DashboardView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:cal="http://www.codeplex.com/prism"
    d:DesignHeight="600" d:DesignWidth="900">

    <UserControl.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <TextBlock Text="{Binding Name}" />
        </DataTemplate>

        <DataTemplate x:Key="ContentTemplate">
            <ContentControl cal:RegionManager.RegionName="{Binding Name}">
            </ContentControl>
        </DataTemplate>
    </UserControl.Resources>

    <Grid x:Name="LayoutRoot" Background="White" Height="500">
        <Grid.Resources>
            <Style TargetType="ListBoxItem">
                <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True"></Setter>
            </Style>
            <Style TargetType="telerik:RadTileView">
                <Setter Property="Margin" Value="10" />
                <Setter Property="MaximizeMode" Value="Zero"/>
                <Setter Property="BorderBrush" Value="Black" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="PreservePositionWhenMaximized" Value="True" />
                <Setter Property="TileStateChangeTrigger" Value="SingleClick" />
                <Setter Property="IsAutoScrollingEnabled" Value="True" />
                <Setter Property="IsDockingEnabled" Value="True" />
                <Setter Property="telerik:RadDragAndDropManager.AllowDrop" Value="True"/>
                <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplate}" />
                <Setter Property="ItemTemplate" Value="{StaticResource ItemTemplate}" />
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="597*" />
            <ColumnDefinition Width="303*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="72*" />
            <RowDefinition Height="405" />
            <RowDefinition Height="23*" />
        </Grid.RowDefinitions>
        <TextBlock Height="47" HorizontalAlignment="Left" Margin="47,25,0,0" Text="My Dashboard" VerticalAlignment="Top" FontSize="28" FontFamily="Lucida Sans Unicode" Width="245" />
        <TextBlock FontFamily="Lucida Sans Unicode" FontSize="24" Height="33" HorizontalAlignment="Left" Margin="18,25,0,0" Text="Drag Drop Elements" VerticalAlignment="Top" Width="245" Grid.Column="1" />
        <ListBox x:Name="ApplicationList" ItemsSource="{Binding AllWidgets}" SelectedItem="{Binding SelectedWidget,Mode=TwoWay}" DisplayMemberPath="Name" Padding="20" Grid.Column="1" Grid.Row="1" Height="326" HorizontalAlignment="Left" Margin="18,10,0,0" VerticalAlignment="Top" Width="225">
            <ListBox.BorderBrush>
                <LinearGradientBrush>
                    <GradientStop Color="#FFA3AEB9" Offset="0" />
                    <GradientStop Color="#FF8399A9" Offset="0.375" />
                    <GradientStop Color="#FF718597" Offset="0.529" />
                    <GradientStop Color="#FF617584" Offset="1" />
                </LinearGradientBrush>
            </ListBox.BorderBrush>
        </ListBox>
        <telerik:RadTileView Name="rtvViews" ItemsSource="{Binding ViewItems}" Grid.Row="1"/>
        <Button Content="Save" Grid.Column="1" Grid.Row="1" Height="53" HorizontalAlignment="Left" Margin="18,342,0,0" VerticalAlignment="Top" Width="100" FontSize="24" Click="button1_Click" />
        <Button Content="Load" FontSize="24" Height="53" HorizontalAlignment="Left" Margin="143,342,0,0" VerticalAlignment="Top" Width="100" Grid.Column="1" Grid.Row="1" Click="OnLoad" />
        <ComboBox ItemsSource="{Binding MyLayout}" SelectedItem="{Binding SelectedLayout,Mode=TwoWay}" HorizontalAlignment="Left" Margin="467,40,0,0" VerticalAlignment="Top" Width="120"/>
        <Button Content="Show Student" Command="{Binding StudentCommand}" HorizontalAlignment="Left" Margin="309,30,0,0" VerticalAlignment="Top" Height="30" Width="92" />
    </Grid>
</UserControl>

Code behind of XML

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Practices.ServiceLocation;
using SimpleModule.ViewModels;
using System.Collections;
using School.Web;
using Telerik.Windows.DragDrop;
using Telerik.Windows.Persistence;
using Telerik.Windows.Persistence.SerializationMetadata;
using Telerik.Windows.Controls.DragDrop;
using System.Collections.ObjectModel;
using Microsoft.Practices.Unity;
using Microsoft.Practices.Prism.Regions;
using System.Reflection;
using Telerik.Windows.Persistence.Services;
using Telerik.Windows.Controls;
using SimpleModule.Helpers;

namespace SimpleModule.Views
{
    public partial class DashboardView : UserControl
    {
        System.IO.Stream stream;
        DashboardViewModel vm;

        public DashboardView()
        {
            InitializeComponent();

            vm = ServiceLocator.Current.GetInstance<DashboardViewModel>();
            this.DataContext = vm;

            RadDragAndDropManager.AddDragQueryHandler(this, vm.OnDragQuery);
            RadDragAndDropManager.AddDropQueryHandler(this, vm.OnDropQuery);
            RadDragAndDropManager.AddDropInfoHandler(this, vm.OnDropInfo);
        }

        private void button1_Click(object sender, RoutedEventArgs e)
        {
            PersistenceManager manager = new PersistenceManager();
            stream = manager.Save(rtvViews);
            vm.SaveClicked(stream);
        }

        private void OnLoad(object sender, System.Windows.RoutedEventArgs e)
        {
            LoadStream();
        }

        private void LoadStream()
        {
            this.stream.Position = 0L;
            this.stream = vm.LoadClicked();
            if (this.stream != null)
            {
                PersistenceManager manager = new PersistenceManager();
                manager.Load(this.rtvViews, this.stream);
            }
        }
    }
}

My ViewModel

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Practices.Unity;
using Microsoft.Practices.Prism.Events;
using Microsoft.Practices.Prism.Regions;
using Microsoft.Practices.Prism.Commands;
using System.Linq;
using SimpleModule.Views;
using School.Web;
using System.Collections.ObjectModel;
using System.ServiceModel.DomainServices.Client;
using System.Collections.Generic;
using System.IO;
using Telerik.Windows.Controls.DragDrop;
using System.Reflection;
using SimpleModule.Helpers;

namespace SimpleModule.ViewModels
{
    public class DashboardViewModel : ViewModelBase
    {
        #region Events

        public event EventHandler DataLoaded;

        #endregion

        #region Commands

        public ICommand StudentCommand { get; set; }

        #endregion

        #region Properties

        private ObservableCollection<WidgetDTO> _allWidgets;

        public ObservableCollection<WidgetDTO> AllWidgets
        {
            get { return _allWidgets; }
            set { _allWidgets = value; OnPropertyChanged("AllWidgets"); }
        }

        private WidgetDTO _selectedWidget;

        public WidgetDTO SelectedWidget
        {
            get { return _selectedWidget; }
            set
            {
                _selectedWidget = value;
                OnPropertyChanged("SelectedWidget");
            }
        }

        public List<DashboardDTO> DashboardLayouts { get; set; }

        private ObservableCollection<string> _myLayOut;

        public ObservableCollection<string> MyLayout
        {
            get { return _myLayOut; }
            set { _myLayOut = value; OnPropertyChanged("MyLayout"); }
        }

        private string _selectedLayout;

        public string SelectedLayout
        {
            get { return _selectedLayout; }
            set
            {
                _selectedLayout = value;

                if (value == "6 Cell")
                {
                    ViewItems = _viewItems6;
                }
                else
                {
                    ViewItems = _viewItems9;
                }

                DashboardDTO dto = DashboardLayouts.Where(c => c.LayoutName == value).FirstOrDefault();
                if (dto == null)
                {
                    dto = new DashboardDTO();
                    dto.LayoutName = value;
                    DashboardLayouts.Add(dto);
                    Context.DashboardDTOs.Add(dto);
                }

                OnPropertyChanged("SelectedLayout");
            }
        }

        private ObservableCollection<TileViewModel> _viewItems6;

        private ObservableCollection<TileViewModel> _viewItems9;

        private ObservableCollection<TileViewModel> _viewItems;

        public ObservableCollection<TileViewModel> ViewItems
        {
            get { return _viewItems; }
            set { _viewItems = value; OnPropertyChanged("ViewItems"); }
        }

        #endregion

        public DashboardViewModel(IUnityContainer container, IEventAggregator eventAggregator, IRegionManager regionManager)
            : base(regionManager, container)
        {
            StudentCommand = new DelegateCommand(StudentClicked);

            Context = new NetflixDomain();
            LoadWidgets();
            LoadLayouts();
        }

        #region Methods

        private void LoadWidgets()
        {
            var query = Context.GetWidgetsQuery();
            LoadOperation<WidgetDTO> operation = Context.Load<WidgetDTO>(query);
            operation.Completed += new EventHandler(operation_Completed);
        }

        void operation_Completed(object sender, EventArgs e)
        {
            LoadOperation<WidgetDTO> operation = (LoadOperation<WidgetDTO>)sender;
            if (operation.Entities != null)
            {
                AllWidgets = new ObservableCollection<WidgetDTO>(operation.Entities);
            }
        }

        private void LoadLayouts()
        {
            var query = Context.GetDashboardQuery();
            LoadOperation<DashboardDTO> operation = Context.Load<DashboardDTO>(query);
            operation.Completed += new EventHandler(layoutOperation_Completed);
        }

        void layoutOperation_Completed(object sender, EventArgs e)
        {
            LoadOperation<DashboardDTO> operation = (LoadOperation<DashboardDTO>)sender;
            if (operation.Entities != null)
            {
                DashboardLayouts = operation.Entities.ToList();

                MyLayout = new ObservableCollection<string>();

                MyLayout.Add("6 Cell");
                MyLayout.Add("9 Cell");

                TileViewModel model;
                _viewItems6 = new ObservableCollection<TileViewModel>();
                for (int i = 1; i <= 6; i++)
                {
                    model = new TileViewModel();

                    model.Name = "Cell6" + i.ToString();

                    _viewItems6.Add(model);

                    RegionManager.Regions.Add(model.Name, new SingleActiveRegion());
                }

                _viewItems9 = new ObservableCollection<TileViewModel>();

                for (int i = 1; i <= 9; i++)
                {
                    model = new TileViewModel();

                    model.Name = "Cell9" + i.ToString();

                    _viewItems9.Add(model);

                    RegionManager.Regions.Add(model.Name, new SingleActiveRegion());
                }

                SelectedLayout = MyLayout.FirstOrDefault();

                if (DataLoaded != null)
                {
                    DataLoaded.Invoke(sender, null);
                }
            }
        }

        public void SaveClicked(Stream data)
        {
            MemoryStream ms = new MemoryStream();
            data.CopyTo(ms);
            DashboardDTO dto = DashboardLayouts.Where(c => c.LayoutName == SelectedLayout).FirstOrDefault();
            dto.DashboardLayout = ms.ToArray();
            Context.SubmitChanges(Submit_Completed, null);
        }

        private void Submit_Completed(SubmitOperation operation)
        {
            if (operation.HasError)
            {
                MessageBox.Show(operation.Error.Message);
            }
            else
            {
                MessageBox.Show("Data saved successfully");
            }
        }

        public Stream LoadClicked()
        {
            DashboardDTO dto = DashboardLayouts.Where(c => c.LayoutName == SelectedLayout).FirstOrDefault();
            Stream str = new MemoryStream(dto.DashboardLayout);
            return str;
        }

        private void StudentClicked()
        {
            StudentViewModel vm = Container.Resolve<StudentViewModel>();

            object pview = RegionManager.Regions["MainRegion"].Views.FirstOrDefault(region => region.GetType().Equals(typeof(DashboardView)));

            vm.ReturnView = pview;

            if (pview != null)
            {
                RegionManager.Regions["MainRegion"].Remove(pview);
            }

            StudentView view = Container.Resolve<StudentView>();
            vm.MyView = view;

            view.DataContext = vm;

            RegionManager.AddToRegion("MainRegion", view);
            RegionManager.Regions["MainRegion"].Activate(view);
        }

        #region DragDrop functionality

        public void OnDragQuery(object sender, DragDropQueryEventArgs e)
        {
            if (e.Options.Status == DragStatus.DragQuery && SelectedWidget != null)
            {
                e.Options.Payload = SelectedWidget;
                ContentControl cue = new ContentControl();
                cue.Content = SelectedWidget;
                e.Options.DragCue = cue;
                e.Options.ArrowCue = RadDragAndDropManager.GenerateVisualCue();
            }
            e.QueryResult = true;
        }

        public void OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            e.QueryResult = true;
        }

        public void OnDropInfo(object sender, DragDropEventArgs e)
        {
            if (e.Options.Status == DragStatus.DropComplete)
            {
                WidgetDTO widget = e.Options.Payload as WidgetDTO;

                TileViewModel model = (e.OriginalSource as FrameworkElement).DataContext as TileViewModel;

                Assembly assembly = Assembly.GetExecutingAssembly();
                Type wType = assembly.GetType("SimpleModule.MyWidgets." + widget.Name);

                RegionManager.RegisterViewWithRegion(model.Name, wType);

                string w1 = widget.Name + ".xaml";

                RegionManager.AddToRegion(model.Name, w1);
                RegionManager.Regions[model.Name].Activate(w1);
            }
        }

        #endregion

        #endregion
    }
}

and I have a directory of of Widgets in the SimpleModule.MyWidgets that are simply the user control with a hardcoded label.

...

I want to make it persistence by saving the stream in the database and then getting it back from there and applying it to the GUI.
I am stick here and didn't know what's i am doing wrong here..

[Tina Stancheva]

Hi Sajid,

Thank you for contacting Telerik support!

Unfortunately from the code snippets you provided I'm not sure what is the issue you encountered. Also, looking through your logic I can see that you're getting your data from a WCF Service and that you're also using PRISM to injects your views. But as there is lots of external logic in the code snippets, I can't recreate your solution. So I prepared a sample solution instead and if you can modify it to demonstrate your issues, we will be able to better assist you.

Also, can you please describe your requirements - what RadTileView properties/states you need to persist? And what result you need to get from the persistence.

On a side note, please have in mind that the PersisteceFramework can only persist UIProperties and you need to be careful when using the persistence along with databinding. Basically the persistence will save the current state of the UIProperties in your RadTileView and if a data-binding operation is somehow changing any of the persisted properties, you need to be careful which of the two operations (binding and load of persisted settings) is executed first.

Regards,
Tina Stancheva
the Telerik team

[Sajid Ali]

Thanks Tina Stancheva for having time to look at my code.

I am done with the persistence.
Summary of what I was trying to accomplish was.

1) Use TileView so that TileViewItem can move around the dashboard.
2) Each TileViewItem will be a PRIMS Region that can hold a View in it.
3) We have a list of Widgets ( Silverlight UserControls/Page ) that can dropped on the TileViewItem. After that the TileViewItem show the associated View in it by registering itself with that PRISM Region.
4) Whenever there is a StateChanged event I need to store the state of the dashboard in the database so that I can restore it when needed.

Now my Updated View is 

<UserControl x:Class="SimpleModule.Views.DashboardView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
    xmlns:mvvmlight="http://www.galasoft.ch/mvvmlight"
    xmlns:cal="http://www.codeplex.com/prism"
    xmlns:converters="clr-namespace:SimpleModule.Converters"
    d:DesignHeight="600" d:DesignWidth="900">
 
    <UserControl.Resources>
        <DataTemplate x:Key="ItemTemplate">
            <TextBlock Text="{Binding RName}" />
        </DataTemplate>
 
        <DataTemplate x:Key="ContentTemplate">
            <ContentControl cal:RegionManager.RegionName="{Binding RName}">
            </ContentControl>
        </DataTemplate>
 
    </UserControl.Resources>
 
    <Grid x:Name="LayoutRoot" Background="White" Height="500">
        <Grid.Resources>
            <Style TargetType="ListBoxItem">
                <Setter Property="telerik:RadDragAndDropManager.AllowDrag" Value="True"></Setter>
            </Style>
            <Style TargetType="telerik:RadTileView">
                <Setter Property="Margin" Value="10" />
                <Setter Property="MaximizeMode" Value="Zero"/>
                <Setter Property="BorderBrush" Value="Black" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="PreservePositionWhenMaximized" Value="True" />
                <Setter Property="TileStateChangeTrigger" Value="SingleClick" />
                <Setter Property="IsAutoScrollingEnabled" Value="True" />
                <Setter Property="IsDockingEnabled" Value="True" />
                <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplate}" />
                <Setter Property="ItemTemplate" Value="{StaticResource ItemTemplate}" />
            </Style>
            <Style TargetType="telerik:RadTileViewItem">
                <Setter Property="Position" Value="{Binding Position,Mode=TwoWay}"/>
                <Setter Property="telerik:RadDragAndDropManager.AllowDrop" Value="True"/>
            </Style>
        </Grid.Resources>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="597*" />
            <ColumnDefinition Width="303*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="72*" />
            <RowDefinition Height="405*" />
        </Grid.RowDefinitions>
        <TextBlock Height="47" HorizontalAlignment="Left" Margin="47,25,0,0" Text="My Dashboard" VerticalAlignment="Top" FontSize="28" FontFamily="Lucida Sans Unicode" Width="245" />
        <TextBlock FontFamily="Lucida Sans Unicode" FontSize="24" Height="33" HorizontalAlignment="Left" Margin="18,25,0,0" Text="Drag Drop Elements" VerticalAlignment="Top" Width="245" Grid.Column="1" />
        <ListBox x:Name="ApplicationList" ItemsSource="{Binding AllWidgets}" SelectedItem="{Binding SelectedWidget,Mode=TwoWay}" DisplayMemberPath="Name" Padding="20" Grid.Column="1" Grid.Row="1" Height="326" HorizontalAlignment="Left" Margin="18,10,0,0" VerticalAlignment="Top" 
                 Width="225">
            <ListBox.BorderBrush>
                <LinearGradientBrush>
                    <GradientStop Color="#FFA3AEB9" Offset="0" />
                    <GradientStop Color="#FF8399A9" Offset="0.375" />
                    <GradientStop Color="#FF718597" Offset="0.529" />
                    <GradientStop Color="#FF617584" Offset="1" />
                </LinearGradientBrush>
            </ListBox.BorderBrush>
        </ListBox>
        <telerik:RadTileView Name="rtvViews" ItemsSource="{Binding ViewItems,Mode=TwoWay}" Grid.Row="1">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="TilesPositionChanged">
                    <mvvmlight:EventToCommand Command="{Binding TileStateCommand,Mode=TwoWay}"
                                      MustToggleIsEnabledValue="True" 
                                      PassEventArgsToCommand="True"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </telerik:RadTileView>
        <ComboBox ItemsSource="{Binding MyLayout}" SelectedItem="{Binding SelectedLayout,Mode=TwoWay}" HorizontalAlignment="Left" Margin="467,40,0,0" VerticalAlignment="Top" Width="120"/>
    </Grid>
</UserControl>

Code behind of it

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Practices.ServiceLocation;
using SimpleModule.ViewModels;
using System.Collections;
using School.Web;
using Telerik.Windows.Controls.DragDrop;
using System.Collections.ObjectModel;
using Microsoft.Practices.Unity;
using Microsoft.Practices.Prism.Regions;
using System.Reflection;
using Telerik.Windows.Controls;
 
namespace SimpleModule.Views
{
    public partial class DashboardView : UserControl
    {
        DashboardViewModel vm;
 
        public DashboardView()
        {
            InitializeComponent();
 
            vm = ServiceLocator.Current.GetInstance<DashboardViewModel>();
            this.DataContext = vm;
 
            RadDragAndDropManager.AddDragQueryHandler(this, vm.OnDragQuery);
            RadDragAndDropManager.AddDropQueryHandler(this, vm.OnDropQuery);
            RadDragAndDropManager.AddDropInfoHandler(this, vm.OnDropInfo);
        }
    }
}

Updated View Model

using System;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Practices.Unity;
using Microsoft.Practices.Prism.Events;
using Microsoft.Practices.Prism.Regions;
using System.Linq;
using SimpleModule.Views;
using School.Web;
using System.Collections.ObjectModel;
using System.ServiceModel.DomainServices.Client;
using System.Collections.Generic;
using System.IO;
using Telerik.Windows.Controls.DragDrop;
using System.Reflection;
using Telerik.Windows.Controls;
 
 
namespace SimpleModule.ViewModels
{
    public class DashboardViewModel : ViewModelBase
    {
        #region Commands

        public ICommand TileStateCommand { get; set; }
 
        #endregion
 
        #region Properties
 
        private ObservableCollection<WidgetDTO> _allWidgets;
 
        public ObservableCollection<WidgetDTO> AllWidgets
        {
            get { return _allWidgets; }
            set { _allWidgets = value; OnPropertyChanged("AllWidgets"); }
        }
 
        private WidgetDTO _selectedWidget;
 
        public WidgetDTO SelectedWidget
        {
            get { return _selectedWidget; }
            set
            {
                _selectedWidget = value;
                OnPropertyChanged("SelectedWidget");
            }
        }
 
        private ObservableCollection<string> _myLayOut;
 
        public ObservableCollection<string> MyLayout
        {
            get { return _myLayOut; }
            set { _myLayOut = value; OnPropertyChanged("MyLayout"); }
        }
 
        private string _selectedLayout;
 
        public string SelectedLayout
        {
            get { return _selectedLayout; }
            set
            {
                _selectedLayout = value;
 
                if (value == "6 Cell")
                {
                    ViewItems = _viewItems6;
                }
                else
                {
                    ViewItems = _viewItems9;
                }
 
                OnPropertyChanged("SelectedLayout");
            }
        }
 
        private ObservableCollection<TileViewItemDTO> _viewItems6;
 
        private ObservableCollection<TileViewItemDTO> _viewItems9;
 
        private ObservableCollection<TileViewItemDTO> _viewItems;
 
        public ObservableCollection<TileViewItemDTO> ViewItems
        {
            get { return _viewItems; }
            set { _viewItems = value; OnPropertyChanged("ViewItems"); }
        }
 
        #endregion
 
        public DashboardViewModel(IUnityContainer container, IEventAggregator eventAggregator, IRegionManager regionManager)
            : base(regionManager, container)
        {
            MyLayout = new ObservableCollection<string>();
 
            MyLayout.Add("6 Cell");
            MyLayout.Add("9 Cell");
 
            TileStateCommand = new DelegateCommand(ChangedStateAction);
 
            Context = new NetflixDomain();
            LoadWidgets();
            LoadDashboardItem();
        }
 
        #region Methods
 
        private void ChangedStateAction(object args)
        {
            SaveClicked();
        }
 
        private void LoadWidgets()
        {
            var query = Context.GetWidgetsQuery();
            LoadOperation<WidgetDTO> operation = Context.Load<WidgetDTO>(query);
            operation.Completed += new EventHandler(operation_Completed);
        }
 
        void operation_Completed(object sender, EventArgs e)
        {
            LoadOperation<WidgetDTO> operation = (LoadOperation<WidgetDTO>)sender;
            if (operation.Entities != null)
            {
                AllWidgets = new ObservableCollection<WidgetDTO>(operation.Entities);
            }
        }
 
        private void LoadDashboardItem()
        {
            var query = Context.GetTileViewItemDTOQuery();
            LoadOperation<TileViewItemDTO> operation = Context.Load<TileViewItemDTO>(query);
            operation.Completed += new EventHandler(layoutOperation_Completed);
        }
 
        void layoutOperation_Completed(object sender, EventArgs e)
        {
            LoadOperation<TileViewItemDTO> operation = (LoadOperation<TileViewItemDTO>)sender;
            ViewItems = new ObservableCollection<TileViewItemDTO>(operation.Entities);
 
            if (ViewItems.Count == 0)
            {
                // If no records then create the new for each Layout
 
                TileViewItemDTO model;
                _viewItems6 = new ObservableCollection<TileViewItemDTO>();
                for (int i = 0; i < 6; i++)
                {
                    model = new TileViewItemDTO();
 
                    model.RName = "Cell6" + i.ToString();
                    model.Position = i;
                    model.LayoutName = "6 Cell";
                    _viewItems6.Add(model);
 
                    Context.TileViewItemDTOs.Add(model);
 
                    RegionManager.Regions.Add(model.RName, new SingleActiveRegion());
                }
 
                _viewItems9 = new ObservableCollection<TileViewItemDTO>();
                for (int i = 0; i < 9; i++)
                {
                    model = new TileViewItemDTO();
 
                    model.RName = "Cell9" + i.ToString();
                    model.LayoutName = "9 Cell";
                    model.Position = i;
                    _viewItems9.Add(model);
 
                    Context.TileViewItemDTOs.Add(model);
 
                    RegionManager.Regions.Add(model.RName, new SingleActiveRegion());
                }
            }
            else
            {
                _viewItems6 = new ObservableCollection<TileViewItemDTO>();
                foreach (TileViewItemDTO item in ViewItems.Where(c => c.LayoutName == "6 Cell"))
                {
                    _viewItems6.Add(item);
                    ConfigureTileViewItemDtoRegion(item);
                }
 
                _viewItems9 = new ObservableCollection<TileViewItemDTO>();
                foreach (TileViewItemDTO item in ViewItems.Where(c => c.LayoutName == "9 Cell"))
                {
                    _viewItems9.Add(item);
                    ConfigureTileViewItemDtoRegion(item);
                }
            }
 
            SelectedLayout = MyLayout.FirstOrDefault();
        }
 
        private void ConfigureTileViewItemDtoRegion(TileViewItemDTO item)
        {
            if (!RegionManager.Regions.ContainsRegionWithName(item.RName))
            {
                RegionManager.Regions.Add(item.RName, new SingleActiveRegion());
            }
 
            if (item.WidgetName != null)
            {
                Assembly assembly = Assembly.GetExecutingAssembly();
                Type wType = assembly.GetType("SimpleModule.MyWidgets." + item.WidgetName);
 
                RegionManager.RegisterViewWithRegion(item.RName, wType);
 
                string w1 = item.WidgetName + ".xaml";
 
                RegionManager.AddToRegion(item.RName, w1);
                RegionManager.Regions[item.RName].Activate(w1);
            }
        }
 
        public void SaveClicked()
        {
            Context.SubmitChanges(Submit_Completed, null);
        }
 
        private void Submit_Completed(SubmitOperation operation)
        {
            if (operation.HasError)
            {
                MessageBox.Show(operation.Error.Message);
            }
            else
            {
               // MessageBox.Show("Data saved successfully");
            }
        }

        #region DragDrop functionality
 
        public void OnDragQuery(object sender, DragDropQueryEventArgs e)
        {
            if (e.Options.Status == DragStatus.DragQuery && SelectedWidget != null)
            {
                e.Options.Payload = SelectedWidget;
                ContentControl cue = new ContentControl();
                cue.Content = SelectedWidget;
                e.Options.DragCue = cue;
                e.Options.ArrowCue = RadDragAndDropManager.GenerateVisualCue();
            }
            e.QueryResult = true;
        }
 
        public void OnDropQuery(object sender, DragDropQueryEventArgs e)
        {
            e.QueryResult = true;
        }
 
        public void OnDropInfo(object sender, DragDropEventArgs e)
        {
            if (e.Options.Status == DragStatus.DropComplete)
            {
 
                WidgetDTO widget = e.Options.Payload as WidgetDTO;
 
                TileViewItemDTO model = (e.Options.Destination as FrameworkElement).DataContext as TileViewItemDTO;
 
                model.WidgetName = widget.Name;
 
                Assembly assembly = Assembly.GetExecutingAssembly();
                Type wType = assembly.GetType("SimpleModule.MyWidgets." + widget.Name);
 
                RegionManager.RegisterViewWithRegion(model.RName, wType);
 
                string w1 = widget.Name + ".xaml";
 
                RegionManager.AddToRegion(model.RName, w1);
                RegionManager.Regions[model.RName].Activate(w1);
 
                SaveClicked();
            }
        }
 
        #endregion
 
        #endregion
    }
}



This was all about the persistence.

Now I am working on the Preview dashboard and I am facing problem that how can i make the TileView to not 
move it's TileViewItems and Each TileViewItem should appear without the Header ( Mean the area on the top where
user can drag the TileViewItem to another location.
On Preview the Dashboard should appear fixed with TileViewItem fixed postion functionality.

Kindly help me out how can i do that.

[Zarko]

Hello Sajid,
As far as I understand you want to disable the position change of your RadTileViewItems and remove their headers, is that right? If this is the case you could just set a HeaderStyle to your tileView with an empty ControlTemplate like this:

<Style TargetType="telerik:RadTileView">
    <Setter Property="Margin" Value="10" />
    <Setter Property="MaximizeMode" Value="Zero" />
    <Setter Property="BorderBrush" Value="Black" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="PreservePositionWhenMaximized" Value="True" />
    <Setter Property="TileStateChangeTrigger" Value="SingleClick" />
    <Setter Property="IsAutoScrollingEnabled" Value="True" />
    <Setter Property="IsDockingEnabled" Value="True" />
    <Setter Property="telerik:RadDragAndDropManager.AllowDrop" Value="True" />
    <Setter Property="ContentTemplate" Value="{StaticResource ContentTemplate}" />
    <Setter Property="ItemTemplate" Value="{StaticResource ItemTemplate}" />
    <Setter Property="HeaderStyle">
        <Setter.Value>
            <Style TargetType="tileView:TileViewItemHeader">
                <Setter Property="Template">
                    <Setter.Value>
                      <ControlTemplate />
                    </Setter.Value>
                </Setter>
            </Style>
        </Setter.Value>
    </Setter>
</Style>

This way you won't be able to drag your items (because they don't have headers) but you'll also lose the Maximize/Minimize button. If you want to keep your button you'll have to edit the default template - I've attached a sample project showing how you can do this so could you please examine it and if you have further questions feel free to ask.

Kind regards,
Zarko
the Telerik team

[Sajid Ali]

thanks so much
 Zarko

that's exactly the solution I was looking for ..