Binding Carousel to a listbox

5 posts, 0 answers
  1. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 08 Sep 2010 Link to this post

    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
  2. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 14 Sep 2010 Link to this post

    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
  3. UI for WPF is Visual Studio 2017 Ready
  4. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 14 Sep 2010 Link to this post

    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);
                }
                }
  5. Maya
    Admin
    Maya avatar
    4062 posts

    Posted 15 Sep 2010 Link to this post

    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
  6. Rick Mueller
    Rick Mueller avatar
    103 posts
    Member since:
    Feb 2010

    Posted 15 Sep 2010 Link to this post

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

    Regards,
    Rick
Back to Top
UI for WPF is Visual Studio 2017 Ready