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

Bring first item in collection into view

1 Answer 185 Views
Carousel
This is a migrated thread and some comments may be shown as answers.
Boots
Top achievements
Rank 1
Boots asked on 14 Jan 2011, 04:19 PM
Hello,

Currently we're using a ListCollectionView to filter the items in the carousel. After I refresh the ListCollectionView I call BringDataitemIntoView(NameOfMyView.CurrentItem) with the carousel. But it isn't bringing the first item in the collection into view. I was wondering if you had any ideas on what I'm doing wrong? Below is a simple example of what I'm hitting.

Also I noticed if we type in 10, 11, 12, 13, or 14 it doesn't scroll anything into view.

I'm using versions 2010.3.1110.35 and 2010.1.603.35 (in an already released product)


<Window
    x:Class="CarouselTest2.MainWindow"
    xmlns:local="clr-namespace:CarouselTest2"
    Title="MainWindow" Height="350" Width="525">
     
    <Window.Resources>
         
        <DataTemplate DataType="{x:Type local:Item}">
            <Border BorderBrush="Black" BorderThickness="2" CornerRadius="5">
                <Grid>
                    <Label Content="{Binding Path=Value}" />
                </Grid>
            </Border>
        </DataTemplate>
         
    </Window.Resources>
     
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>       
         
        <TextBox x:Name="txtBox" Grid.Row="0" TextChanged="TextBox_TextChanged" />
         
        <telerik:RadCarousel
            x:Name="Carousel"
            Grid.Row="1"
            Focusable="False"
            AutoGenerateDataPresenters="False"
            HorizontalScrollBarVisibility="Hidden"
            VerticalScrollBarVisibility="Visible">
            <telerik:RadCarousel.ItemsPanel>
                <ItemsPanelTemplate>
                    <telerik:RadCarouselPanel
                        ItemsPerPage="7"
                        IsOpacityEnabled="False"
                        PathPadding="0">
                        <!--<telerik:RadCarouselPanel.Path>
                            <Path Stretch="Fill">
                                <Path.Data>
                                    <LineGeometry StartPoint="0, 800" EndPoint="0, 10" />
                                </Path.Data>
                            </Path>
                        </telerik:RadCarouselPanel.Path>-->
                    </telerik:RadCarouselPanel>
                </ItemsPanelTemplate>
            </telerik:RadCarousel.ItemsPanel>
        </telerik:RadCarousel>
 
    </Grid>
</Window>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Collections;
 
namespace CarouselTest2
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window
    {
        ListCollectionView view;
 
        public MainWindow()
        {
            InitializeComponent();
 
 
            List<Item> Items = new List<Item>();
            for (int i = 0; i < 150; i++)
            {
                Items.Add(new Item(i));
            }
 
            view = new ListCollectionView(Items.ToList());
            view.Filter = new Predicate<object>(FilterObject);
            this.Carousel.ItemsSource = view;
        }
 
        private bool FilterObject(object itemToFilter)
        {
            if (itemToFilter == null)
                return false;
 
            String filterText = this.txtBox.Text.ToUpper();
             
            if (filterText.Length == 0)
                return true;
             
            return ((itemToFilter as Item).Value.ToString().Contains(filterText));
 
        }
 
        private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
        {
            this.view.Refresh();
            this.Carousel.BringDataItemIntoView(this.view.CurrentItem);
             
        }
    }
 
    public class Item
    {
        public Item(int i)
        {
            this.Value = i;
        }
 
        public int Value { get; set; }
    }
 
}

Thanks Much,
~Boots

1 Answer, 1 is accepted

Sort by
0
Accepted
Yordanka
Telerik team
answered on 17 Jan 2011, 12:25 PM
Hello Boots,

You need to set AutoLoadItems property to False and your solution will work as expected. However, when the carousel is shown items won't be loaded automatically. If you need this you may subscribe to Loaded event and scroll the RadCarouselPanel content by one page:

private void RadCarouselPanel_Loaded(object sender, RoutedEventArgs e)
        {
            var panel = sender as RadCarouselPanel;
 
            panel.PageDown();
        }

I hope this helps.
 
Best wishes,
Yordanka
the Telerik team
Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
Tags
Carousel
Asked by
Boots
Top achievements
Rank 1
Answers by
Yordanka
Telerik team
Share this question
or