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

How do I bind to a list of view models?

6 Answers 277 Views

Carousel

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

Simplex asked on 15 Jul 2009, 09:16 PM

I can't get it to display a list of objects which are view models.
Using version 2009.2.701.35 with vb.net in a model/view/view model framework.

This displays nothing:

    
                        <telerik:RadCarousel  
        
                            x:Name="RCAddressList" 
        
                            ItemsSource="{Binding Path=AddressViewModelList}" 
        
                            telerik:StyleManager.Theme="Office_Blue"> 
        
                        </telerik:RadCarousel

This displays the correct number of items, but it is just then name of the object. i.e. 4 addresses in the list means AddressApp.ViewModel.AddressViewModel as text 4 times in the carousel.

    
                        <ListView  
        
                            x:Name="ListView"  
        
                            ItemsSource="{Binding Path=AddressViewModelList}"  
        
                            BorderThickness="0" Background="Transparent" 
        
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch"> 
        
                            <ListView.ItemsPanel> 
        
                                <ItemsPanelTemplate> 
        
                                    <telerik:RadCarouselPanel /> 
        
                                </ItemsPanelTemplate> 
        
                            </ListView.ItemsPanel> 
        
                        </ListView>

6 Answers, 1 is accepted

answered on 21 Jul 2009, 09:06 AM

Hi Edward,

There is no problem to bind to ViewModel data - the only thing that you have to do is to modify the default
CarouselDataRecordPresenter template. To display a ViewModel object you could do something like that:

    
            <Style TargetType="{x:Type telerik:CarouselDataRecordPresenter}">  
        
                <Setter Property="Template">  
        
                    <Setter.Value> 
        
                        <ControlTemplate TargetType="{x:Type telerik:CarouselDataRecordPresenter}">  
        
                                <StackPanel Margin="0,20,0,0" TextElement.FontWeight="Bold">  
        
                                    <Label Content="{Binding Path=Data.ViewModelData.Sender}"/>  
        
                                    <Label Content="{Binding Path=Data.ViewModelData.Subject}"/>  
        
                                    <Label Content="{Binding Path=Data.ViewModelData.Size}"/>  
        
                                </StackPanel> 
        
                        </ControlTemplate> 
        
                    </Setter.Value> 
        
                </Setter> 
        
            </Style>

The CarouselDataRecordPresenter is the element that displays the contents of a data item. A binding to a property of the original data items should look like "{Binding Path=Data.ViewModelData.Size}" where the first property Data is the property of our DataRecord class (the DataContext), the second property ViewModelData is the ViewModel property that exposes the original data item and finally the last item is a property of a data item.

Hope this helps.

Kind regards,
Milan
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.