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

Binding Carousel to a listbox

4 Answers 166 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Rick Mueller
Top achievements
Rank 1
Rick Mueller asked on 09 Sep 2010, 02:48 AM
Hello,

I have a listbox and Carousel populate dynamically in a TileView. The TIleView and the Listbox are binded to xml data and is working nicely. My Problem with syncing and binding the carousel. The Carousel is populating the image and text, but only to the first Table in the XML data. When selecting a Item in the listbox the carousel just spins.  I would like to select a item in the listbox and the image of the carousel would Bring to view(Front).
<Grid x:Name="ImGrid" 
                                          Margin="220,0,0,210" 
                                          DataContext="{Binding SelectedItem, ElementName=TileContentData1}" 
                                          Width="400" 
                                          Height="420">
    <Grid.Resources>
        <DataTemplate x:Key="customItemTemplate">
            <Border Background="LightSlateGray" Padding="10">
                <Grid>
                    <StackPanel>
                    <Image  Source="{Binding Source={StaticResource Recipe1},XPath=Image}" Height="240" Width="200" Stretch="Fill" />
                    <TextBlock FontSize="12"  Text="{Binding Source={StaticResource Recipe1},XPath=RecipeID}" />
                    </StackPanel>
                </Grid>
            </Border>
        </DataTemplate>
    </Grid.Resources>
                                        <telerik:RadCarousel
                                            ItemsSource="{Binding}"
                                            ItemTemplate="{StaticResource customItemTemplate}"
                                            Height="400"  />
                                          
                                    </Grid>
                                </Grid>


Any Thoughts?

Thank You
Rick Mueller

4 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 14 Sep 2010, 02:19 PM
Hi Rick Mueller,

You may handle the SelectionChanged event of the ListBox. Thus, once you get the selected item, you can bring it to view using the BrindgDataItemIntoView method of the RadCarousel.
I am sending you a sample project illustrating the proposed solution.
 

All the best,
Maya
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rick Mueller
Top achievements
Rank 1
answered on 14 Sep 2010, 05:43 PM
Maya,
Thank you for the sample.

I was able to fix the Itemsource for the Carousel. Using your example in my logic, now i am receiving a error on the name of the listbox. I changed accordingly in the xaml and the xaml.cs, but Intellisence doesn't see it.

The tileview populates the listbox and Carousel dynamically 
This Is what I have so far:
<DataTemplate x:Key="TileData1">
                                        <Grid>
                             
                                             
                         
                         
                                             
                             
                                                 
                                                <ListBox x:Name="TileContentData1"
                                                    FontSize="18"
                                                    Height="600"
                                                    Foreground="Black"
                                                    BorderBrush="Transparent"
                                                    Background="Transparent"
                                                    SelectionChanged="listBox_SelectionChanged"
                                                    Width="200"
                                                    Margin="25,0,0,100"
                                                    HorizontalAlignment="Left"
                                                    ItemsSource="{Binding Items}"
                                                    ItemTemplate="{StaticResource template}"
                                                    ScrollViewer.VerticalScrollBarVisibility="Auto"
                                                    ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>   
                                         
                                     
                                            <StackPanel Orientation="Horizontal" Margin="340,0,0,30" VerticalAlignment="Bottom" Width="Auto" HorizontalAlignment="Left">
                             
                                                <StackPanel  Width="Auto">
                                                    <TextBlock Text="Station:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                    <TextBlock Text="Created Date:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                    <TextBlock Text="Revision Date:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                    <TextBlock Text="Production Time:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                    <TextBlock Text="Shelve Life:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                    <TextBlock Text="Yield:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                    <TextBlock Text="Cost:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                    <TextBlock Text="Storage:" Foreground="Black" FontSize="16" TextAlignment="Right" FontWeight="Bold" Height="24"/>
                                                </StackPanel>
                                 
                                                <Grid x:Name="RecDataGrid"   DataContext="{Binding SelectedItem, ElementName=TileContentData1}" Width="Auto" Height="Auto" VerticalAlignment="Bottom" >
                                                    <StackPanel  Width="Auto" Margin="15,0,0,0">
                                                        <TextBlock Text="{Binding XPath=Station}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                        <TextBlock Text="{Binding XPath=CreatDate}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                        <TextBlock Text="{Binding XPath=RevDate}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                        <TextBlock Text="{Binding XPath=PrepTime}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                        <TextBlock Text="{Binding XPath=ShelveLife}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                        <TextBlock Text="{Binding XPath=RecipeYield}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                        <TextBlock Text="{Binding XPath=RecipeCost}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                        <TextBlock Text="{Binding XPath=RecipeCount}" Foreground="Black" FontSize="16" TextAlignment="Left" FontStyle="Italic" Height="24"/>
                                                    </StackPanel>
                                                </Grid>
 
                             
                                            </StackPanel>
                 
         
                 
     
                                            <Grid x:Name="ImGrid" Margin="212,0,0,200"  Width="400">
                             
                                                <telerik:RadCarousel
                                                x:Name="radc"
                                                    ItemsSource="{Binding Items}"
                                                    ItemTemplate="{StaticResource template}"
                                                    Height="400" Width="380"
                                                    Background="Transparent">
                                                    </telerik:RadCarousel>
                                            </Grid>
                                 
                     </Grid>
                                    </DataTemplate>
code behind:
private void listBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            foreach (var item in e.AddedItems)
            {
                this.radc.BringDataItemIntoView(item);
            }
            }
0
Maya
Telerik team
answered on 15 Sep 2010, 02:46 PM
Hi Rick Mueller,

As you are setting the ListBox and the RadCarousel inside a DateTemplate, you are not able to access them directly only by their names in the code-behind. So, in order to provide you with a more accurate solution, I would need a bit more information about your application. Why are you using difining a DataTemplate ? It would be great if you could send us a sample project if possible, so that I could see your exact settings and requirements.

 

Kind regards,
Maya
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Rick Mueller
Top achievements
Rank 1
answered on 15 Sep 2010, 03:05 PM
Hi Maya,
Thank you for your time I will create a ticket and zip to your attention.

Regards,
Rick
Tags
Carousel
Asked by
Rick Mueller
Top achievements
Rank 1
Answers by
Maya
Telerik team
Rick Mueller
Top achievements
Rank 1
Share this question
or