Binding Carousel to a listbox

[Rick Mueller]

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

[Maya]

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

[Rick Mueller]

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);
            }
            }

[Maya]

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

[Rick Mueller]

Hi Maya,
Thank you for your time I will create a ticket and zip to your attention.

Regards,
Rick