Expand Tile Using ViewModel In MVVM

[Shivam]

Hi,

i want to Expand My Tile using ViewModel.
My RadTileView ItemSource is Binded to DeviceModelsWithoutAux Observable collection of the type DeviceModel (Class).
Through my ViewModel I am binding MaximizedItem Property of RadTileView with an object of DeviceModel type.(which is present inside DeviceModelsWithoutAux )

i am getting a Error in Code behind of my View Containing  RadTileView for the event TileStateChanged:

{System.InvalidOperationException: Sequence contains no elements
   at System.Linq.Enumerable.First[TSource](IEnumerable`1 source)
   at Cirrus.Core.UI.Views.Devices.NewDevices.TileView_TileStateChanged(Object sender, RadRoutedEventArgs e)}
On the BOLD line Below


The CodeBehind of my View Containing RadTileView :

private void TileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            var item = e.Source as RadTileViewItem;
            if (item == null) return;
            var fluidControl = item.ChildrenOfType<RadFluidContentControl>().First();
            if (fluidControl == null) return;
            switch (item.TileState)
            {
                case TileViewItemState.Maximized:
                    DeviceViewModel.ActiveDevice = ((DeviceModel)item.DataContext).Device;
                    fluidControl.State = FluidContentControlState.Large;
                    break;
                case TileViewItemState.Minimized:
                    fluidControl.State = FluidContentControlState.Small;
                    break;
                case TileViewItemState.Restored:
                    fluidControl.State = FluidContentControlState.Normal;
                    break;
            }
        }

The View Containing RadTileView :

<telerikNavigation:RadTileView  TileStateChangeTrigger="SingleClick"
            MinimizedItemsPosition="Left"
            MinimizedRowHeight="Auto"
            MinimizedColumnWidth="150"
            TileStateChanged="TileView_TileStateChanged"
            ItemsSource="{Binding DeviceModelsWithoutAux}" PreservePositionWhenMaximized="True"
            ContentTemplateSelector="{StaticResource ContentSelector}"
             ItemContainerStyle="{StaticResource RadTileViewItemStyle1}"
            ItemTemplate="{StaticResource HeaderTemplate}"
            x:Name="TileView" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollBarVisibility="Auto"
            RowHeight="237" ColumnsCount="4" RowsCount="3"
            MaximizedItem="{Binding MaximizedItem}" />
    </Grid>

 
My DeviceViewModel Contains:

private DeviceModel _maximizedItem;
        public DeviceModel MaximizedItem
        {
            get { return _maximizedItem; }
            set
            {
                if (_maximizedItem == value) return;
                _maximizedItem = value;
                OnPropertyChanged("MaximizedItem");
            }
        }


AND


I am Checking from which object has to be Maximized in my function (parameter is the Object):

public void DeviceModelChangedHandler(object parameter)
        {
            DeviceModel model = parameter as DeviceModel;
            foreach (var item in DeviceModelsWithoutAux)
            {
                if (item._device.DeviceID == model._device.DeviceID)
                {
item.State = FluidContentControlState.Large;
                    MaximizedItem = item;
                    break;
                }
            }
        }

here I Have Created a State Property inside my DeviceModel Class too:
private FluidContentControlState _state;
        public FluidContentControlState State
        {
            get { return _state; }
            set
            {
                if (_state == value) return;
                _state = value;
                OnPropertyChanged("State");
            }
        }


Please Provide your Input for the above Scenario.

Thanks,
Shivam

[Petar Mladenov]

Hello Shivam,

Actually, when you are implementing a databound RadTileView with RadFluidContent control, you don't need the TileStateChanged event. You can examie the best possible approach in this help article.
As for the concrete issue you have come up with, i think you need an additional if-clause like so:

private void TileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            var item = e.Source as RadTileViewItem;
            if (item == null) return;
            var fluidControls = item.ChildrenOfType<RadFluidContentControl>();

            if(fluidControls != null)
           {
             var fluidControl = fluidControls.First();
            switch (item.TileState)
            {
                case TileViewItemState.Maximized:
                    DeviceViewModel.ActiveDevice = ((DeviceModel)item.DataContext).Device;
                    fluidControl.State = FluidContentControlState.Large;
                    break;
                case TileViewItemState.Minimized:
                    fluidControl.State = FluidContentControlState.Small;
                    break;
                case TileViewItemState.Restored:
                    fluidControl.State = FluidContentControlState.Normal;
                    break;
            }
}
        }

Regards,
Petar Mladenov
the Telerik team

[Shivam]

Hi,
Thanks for your Reply, Actually the requirement is I have to maximize one of the Tiles On click for a Button from Some Other View and ViewModel associated with it (Not the view containing my Tile) and also TileView should behave normally as it does on click of tile header  form the view containing the tiles itself.

For this I am using EvntAggregator Publish and Subscribe.
I am not able to maximize the Required Tile On Click of Button and I am getting the Exception in the TileView_TileStateChanged  Event Because the Source form where Maximized Item is Binded is not from the same view.

I have even put the Fix Given by you but I am still not able to Maximize:

private void TileView_TileStateChanged(object sender, Telerik.Windows.RadRoutedEventArgs e)
        {
            var item = e.Source as RadTileViewItem;
            if (item == null) return;
            var fluidControls = item.ChildrenOfType<RadFluidContentControl>();

            if (fluidControls.Count != 0)
            {
                var fluidControl = fluidControls.First();
                switch (item.TileState)
                {
                    case TileViewItemState.Maximized:
                        DeviceViewModel.ActiveDevice = ((DeviceModel)item.DataContext).Device;
                        fluidControl.State = FluidContentControlState.Large;
                        break;
                    case TileViewItemState.Minimized:
                        fluidControl.State = FluidContentControlState.Small;
                        break;
                    case TileViewItemState.Restored:
                        fluidControl.State = FluidContentControlState.Normal;
                        break;
                }
            }
        }

Is my binding for MaximizedItem="{Binding MaximizedItem}" property Correct ?? Or Do i need to include any more Propeties Like:
The State Property, that i have created inside my DeviceModel Class:
private FluidContentControlState _state;
        public FluidContentControlState State
        {
            get { return _state; }
            set
            {
                if (_state == value) return;
                _state = value;
                OnPropertyChanged("State");
            }
        }
Which I am setting as MaximizedItem.State = FluidContentControlState.Large;
For my DeviceModel Object inside my DeviceviewModel class :

private DeviceModel _maximizedItem;

        public DeviceModel MaximizedItem

        {

            get { return _maximizedItem; }

            set

            {

                if (_maximizedItem == value) return;

                _maximizedItem = value;

                OnPropertyChanged("MaximizedItem");

            }

        }

Waiting for your response.

Best Regards
Shivam

[Tina Stancheva]

Hello Shivam,

i tried to reproduce this issue in a PRISM scenario using EventAggrigator but I wasn't able to. I attached the  sample solution I created, can you please have a look at it and let me know if it works for you. If it doesn't correctly illustrate your scenario, can you please modify it accordingly.

Thank you in advance for your cooperation.

Greetings,
Tina Stancheva
the Telerik team