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

Expand Tile Using ViewModel In MVVM

3 Answers 90 Views
TileView
This is a migrated thread and some comments may be shown as answers.
Shivam
Top achievements
Rank 1
Shivam asked on 18 Nov 2011, 01:02 PM
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

3 Answers, 1 is accepted

Sort by
0
Petar Mladenov
Telerik team
answered on 23 Nov 2011, 12:36 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Shivam
Top achievements
Rank 1
answered on 25 Nov 2011, 11:27 AM
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
0
Tina Stancheva
Telerik team
answered on 30 Nov 2011, 01:12 PM
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

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

Tags
TileView
Asked by
Shivam
Top achievements
Rank 1
Answers by
Petar Mladenov
Telerik team
Shivam
Top achievements
Rank 1
Tina Stancheva
Telerik team
Share this question
or