C# 来自ObservableCollection的图像的水平列表

我喜欢在水平滚动列表中显示ObservableCollection中的图像，就像在Windows应用商店中一样，但我会像在FlipView中一样水平滚动，所有图像都可见。此时此刻，我有这样的想法：

<FlipView x:Name="MasterListView" ItemsSource="{x:Bind PopularTVSeries}" 
            Grid.Row="1" Margin="10,10,10,0" Height="278">
    <FlipView.ItemTemplate>
        <DataTemplate x:DataType="data:PopularTVSeries">
            <Image Source="{x:Bind poster_path}" Width="185" Height="278"
                   HorizontalAlignment="Left" VerticalAlignment="Center"/>
        </DataTemplate>
    </FlipView.ItemTemplate>
</FlipView>

---

有一些控件可以执行此操作

方法1： 由UWPCommunityToolkit使用。安装nuget软件包以使用它

下面是语法

<controls:Carousel x:Name="CarouselControl" InvertPositive="0"
                    ItemDepth="0" ItemMargin="0"
                    ItemRotationX="0" ItemRotationY="0"
                    ItemRotationZ="0" Orientation="Horizontal">
    <controls:Carousel.ItemTemplate>
        <DataTemplate>
            <Image/>
        </DataTemplate>
    </controls:Carousel.ItemTemplate>
</controls:Carousel>

<controls:Carousel MaxItems="5" MinHeight="240" 
                   MaxHeight="480" GradientOpacity="0.3">
    <controls:Carousel.ItemTemplate>
        <DataTemplate>
            <Image/>
        </DataTemplate>
    </controls:Carousel.ItemTemplate>
</controls:Carousel>

最终工作代码：

<controls:Carousel 
            ItemsSource="{x:Bind popularTVSeries}"
            x:Name="MasterListView"
            InvertPositive="True"
            ItemDepth="153"
            ItemMargin="0"
            ItemRotationX="0"
            ItemRotationY="29"
            ItemRotationZ ="0"
            Orientation="Horizontal"
            SelectedIndex="3"
            Grid.Row="1">

            <controls:Carousel.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </controls:Carousel.EasingFunction>

            <controls:Carousel.ItemTemplate>
                <DataTemplate x:DataType="data:PopularTVSeries">
                    <Image
                        Width="185"
                        Height="278"
                        VerticalAlignment="Bottom"
                        Source="{x:Bind poster_path}"
                        Stretch="Uniform" />
                </DataTemplate>
            </controls:Carousel.ItemTemplate>

        </controls:Carousel>

它不起作用。也许与ObservableCollecion的联系是problem@K.Kempski你试过哪一个？你能在问题中附加你的代码吗？x:Bind*对不起Vijay@K.Kempski您没有像问题中的示例代码那样为CarouselI绑定源代码设置

ItemsSource

，因此无法工作

<controls:Carousel 
            ItemsSource="{x:Bind popularTVSeries}"
            x:Name="MasterListView"
            InvertPositive="True"
            ItemDepth="153"
            ItemMargin="0"
            ItemRotationX="0"
            ItemRotationY="29"
            ItemRotationZ ="0"
            Orientation="Horizontal"
            SelectedIndex="3"
            Grid.Row="1">

            <controls:Carousel.EasingFunction>
                <CubicEase EasingMode="EaseOut"/>
            </controls:Carousel.EasingFunction>

            <controls:Carousel.ItemTemplate>
                <DataTemplate x:DataType="data:PopularTVSeries">
                    <Image
                        Width="185"
                        Height="278"
                        VerticalAlignment="Bottom"
                        Source="{x:Bind poster_path}"
                        Stretch="Uniform" />
                </DataTemplate>
            </controls:Carousel.ItemTemplate>

        </controls:Carousel>