Carousel, using x:Bind to an empty list breaks the control

[dusandjovanovic]

Hello, I have an observable collection of: private ObservableCollection Suggested { get; set; }

When I tried to bind carousel to this collection, which is initially empty, I get an error that a binding property is of invalid range (0 elements) as soon as I navigate the xaml page containing the carousel control.

<controls:Carousel x:Name="CarouselControl"
                  ItemsSource="{x:Bind Suggested}"
                  InvertPositive="True"
                  ItemDepth="300"
                  ItemMargin="0"
                  ItemRotationX="0"
                  ItemRotationY="45"
                  ItemRotationZ ="0"
                  Orientation="Horizontal"
                  SelectedIndex="4">
        <controls:Carousel.EasingFunction>
          <CubicEase EasingMode="EaseOut" />
        </controls:Carousel.EasingFunction>
        <controls:Carousel.ItemTemplate>
          <DataTemplate x:DataType="local:Movie">
            <Image Width="200"
                  Height="200"
                  VerticalAlignment="Bottom"
                   Source="{Binding Path=Title, 
                Converter={StaticResource imageConverter}}" // ignore the converter internal method..
                  Stretch="Uniform" />
          </DataTemplate>
        </controls:Carousel.ItemTemplate>
      </controls:Carousel>

Am I doing something wrong? My Observable collection of type "Movie" is being filled with API requests, but it's initially empty - The carousel control should be able to handle this kind of binding.

[dusandjovanovic]

If anyone could come up with a solution until Wednesday night I would be very grateful, kind of in a hurry :-)

[Vijay-Nirmal]

@dusandjovanovic Carousel is to show images then what it will show without any images. My solution is to have a default image (Ex: AppLogo) in ObservableCollection and hide the Carousel control until first API requests. After the first API requests, Add all the images in the ObservableCollection and remove the Default image.

[lukasf]

@Vijay-Nirmal When there are no images, then the control should just show no images. All list controls show an empty view when the list is empty. Delayed adding of content should not break the control, it is a very common scenario.

[nmetulev]

Agree, that seems like a bug. @Mimetis, what do you think?

[touseefbsb]

I encountered a very similar issue

[touseefbsb]

@Vijay-Nirmal I tried to provide the app logo as default 1st image in my first object, but its still giving the same exception.

Initialization in ViewModel

Videos = new ObservableCollection

XAML :

<controls:Carousel x:Name="CarouselControl"
ItemTemplate="{StaticResource MainTemplate}"
ItemsSource="{x:Bind ViewModel.Videos}"
InvertPositive="True"
ItemDepth="300"
ItemMargin="0"
ItemRotationX="0"
ItemRotationY="45"
ItemRotationZ ="0"
Orientation="Horizontal"
SelectedIndex="4">
controls:Carousel.EasingFunction

</controls:Carousel.EasingFunction>
</controls:Carousel>

[Mimetis]

Hi all;
The last PR #1139 is correcting this error.
I have made a test with an empty ObservableCollection<T> binded to the Carousel using x:Bind and it's working as expected :)

Be careful, in your code, you set the SelectedIndex to 4. Remember to remove this affectation

Here is my code (working with the correction added with this PR)

    <controls:Carousel x:Name="CarouselControl"
              ItemsSource="{x:Bind Suggested}"
              InvertPositive="True"
              ItemDepth="300"
              ItemMargin="0"
              ItemRotationX="0"
              ItemRotationY="45"
              ItemRotationZ ="0"
              Orientation="Horizontal">
        <controls:Carousel.EasingFunction>
            <CubicEase EasingMode="EaseOut" />
        </controls:Carousel.EasingFunction>
        <controls:Carousel.ItemTemplate>
            <DataTemplate x:DataType="local:Data">
                <Image Source="{Binding BitmapImage}" Width="200" Height="100"
                           Stretch="Fill"></Image>
            </DataTemplate>
        </controls:Carousel.ItemTemplate>
    </controls:Carousel>

Mainpage.xaml.cs code :

    public ObservableCollection<Data> Suggested { get; set; } = new ObservableCollection<Data>();
    private void AddItemClick(object sender, RoutedEventArgs e)
    {
        Suggested.Add(new Data { BitmapImage = new BitmapImage(new Uri("ms-appx:///Images/BigFourSummerHeat.jpg", UriKind.Absolute)), Title = "BigFourSummerHeat" });
        Suggested.Add(new Data { BitmapImage = new BitmapImage(new Uri("ms-appx:///Images/Owl.jpg", UriKind.Absolute)), Title = "Owl" });

    }

[touseefbsb]

I removed the selected index property and just bound it to an empty collection, and I am still getting the same error. I am binding it to a ViewModel property actually.

[nmetulev]

Thanks for testing this @touseefbsb . I haven't had a chance to test it, did you try this with the PR (#1139) in progress?

[touseefbsb]

no I havent tested it with PR, I am using nuget package, can you please guide me how can I use PR version of the library? thanks

[nmetulev]

I just tested it with the latest PR (binding to an empty collection) and seems to be working ok :)

If you want to test it yourself, you can use the nugets generated from AppVeyor on that PR: https://ci.appveyor.com/project/dotnetfoundation/uwpcommunitytoolkit/build/1.5.1-PullRequest01139.7.build.1183/artifacts